:root {
  --turquoise: #4EBFBE;
  --turquoise-dark: #3AA3A2;
  --turquoise-light: #E6F7F6;
  --bordeaux: #6B2D3C;
  --bordeaux-dark: #56212D;
  --ink: #333333;
  --stripe: #F7F7F7;
  --line: #E5E1DC;
  --bg: #FAFAF8;
  --white: #FFFFFF;
  --shadow: 0 2px 10px rgba(107, 45, 60, 0.08);
  --shadow-md: 0 8px 24px rgba(107, 45, 60, 0.10);
  --sidebar-w: 240px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

.tagline {
  font-family: 'Poppins', 'Inter', sans-serif;
  font-style: italic;
  font-weight: 500;
  color: var(--bordeaux);
  opacity: .85;
}

.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--bordeaux);
  color: white;
  font-weight: 700;
  font-size: 16px;
  flex-shrink: 0;
}
.brand-logo-img {
  height: 34px;
  width: auto;
  max-width: 120px;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: 4px;
}
.brand-text {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .2px;
}
.brand-text .brand-sub {
  font-weight: 400;
  opacity: .7;
  margin-left: 6px;
  font-size: 13.5px;
}
.nav-icon { width: 18px; height: 18px; flex-shrink: 0; opacity: .85; }
form.inline { display: inline; }

/* --- App shell: sidebar + main content --- */
.app-shell { display: flex; min-height: 100vh; align-items: flex-start; }
.nav-toggle { display: none; }
.sidebar-backdrop { display: none; }

.sidebar {
  flex: 0 0 var(--sidebar-w);
  width: var(--sidebar-w);
  min-height: 100vh;
  position: sticky;
  top: 0;
  align-self: flex-start;
  background: var(--white);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  padding: 22px 16px 16px;
}
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Poppins', sans-serif;
  padding: 4px 10px 22px;
}
.sidebar-brand .brand-mark { background: var(--bordeaux); }
.sidebar-brand .brand-text { color: var(--bordeaux-dark); }
.sidebar-brand .brand-sub { color: var(--bordeaux-dark); }

.sidebar-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; overflow-y: auto; }
.sidebar-nav a {
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--ink);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  padding: 10px 12px;
  border-radius: 9px;
  border-left: 3px solid transparent;
  transition: background .12s ease, color .12s ease;
}
.sidebar-nav a .nav-icon { color: var(--bordeaux); opacity: .55; transition: opacity .12s ease; }
.sidebar-nav a:hover { background: var(--turquoise-light); }
.sidebar-nav a.active {
  background: var(--turquoise-light);
  border-left-color: var(--bordeaux);
  color: var(--bordeaux-dark);
  font-weight: 600;
}
.sidebar-nav a.active .nav-icon { opacity: 1; }

.sidebar-footer { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.sidebar-footer button {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  color: var(--ink);
  opacity: .8;
  background: none;
  border: none;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  padding: 10px 12px;
  border-radius: 9px;
  transition: background .12s ease, opacity .12s ease;
}
.sidebar-footer button:hover { background: var(--stripe); opacity: 1; }
.sidebar-footer .nav-icon { opacity: .7; }

.main-area { flex: 1 1 auto; min-width: 0; }

/* Topbar: enkel zichtbaar op mobiel/tablet (hamburger + merk) */
.topbar {
  display: none;
  align-items: center;
  gap: 14px;
  background: var(--turquoise);
  color: white;
  padding: 12px 18px;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
  position: sticky;
  top: 0;
  z-index: 60;
}
.topbar .brand-text, .topbar .brand-sub { color: white; opacity: 1; }
.topbar .brand-mark { background: rgba(255,255,255,.2); }
.topbar-brand { display: flex; align-items: center; gap: 10px; }

.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  cursor: pointer;
  flex-shrink: 0;
  background: none;
  border: none;
}
.nav-burger span { display: block; width: 100%; height: 2.5px; background: white; border-radius: 2px; }

.container { max-width: 1000px; margin: 40px auto 60px; padding: 0 32px; }

@media (max-width: 860px) {
  .topbar { display: flex; }
  .nav-burger { display: flex; }
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 80;
    height: 100vh;
    box-shadow: 0 0 30px rgba(0,0,0,.15);
    transform: translateX(-100%);
    transition: transform .22s ease;
  }
  .nav-toggle:checked ~ .sidebar { transform: translateX(0); }
  .nav-toggle:checked ~ .sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(43, 20, 26, .45);
    z-index: 70;
  }
  .sidebar-nav a, .sidebar-footer button { padding: 13px 12px; font-size: 15.5px; }
  .container { margin: 24px auto 40px; padding: 0 18px; }
}

/* --- Headings --- */
h1 {
  font-family: 'Poppins', sans-serif;
  color: var(--bordeaux-dark);
  font-weight: 700;
  font-size: 27px;
  letter-spacing: -.2px;
  margin: 0 0 6px;
}

/* Sectiekopjes: rustig "eyebrow"-label met accentstreepje i.p.v. een volle kleurblok --- */
h2 {
  font-family: 'Poppins', sans-serif;
  color: var(--bordeaux-dark);
  background: none;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .5px;
  text-transform: uppercase;
  padding: 0 0 10px;
  margin: 40px 0 18px;
  border-bottom: 1px solid var(--line);
  position: relative;
}
h2::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 32px;
  height: 2px;
  background: var(--turquoise);
}
h2:first-of-type { margin-top: 8px; }

/* --- Dashboard cards --- */
.cards { display: flex; gap: 20px; margin: 28px 0; flex-wrap: wrap; }
.card {
  background: white;
  border: 1px solid var(--line);
  border-top: 4px solid var(--turquoise);
  border-radius: 14px;
  padding: 22px 30px;
  text-align: center;
  box-shadow: var(--shadow);
  flex: 1 1 160px;
  min-width: 160px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.card:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(107, 45, 60, 0.12); }
.card h2 {
  all: unset;
  display: block;
  font-family: 'Poppins', sans-serif;
  margin: 0;
  font-size: 34px;
  font-weight: 700;
  color: var(--bordeaux);
}
.card p { margin: 6px 0 0; color: var(--ink); opacity: .75; font-size: 14px; }

.cta-row { display: flex; gap: 16px; margin-top: 8px; flex-wrap: wrap; }

/* --- Dashboard: snelle acties + "vandaag/deze week" lijsten --- */
.quick-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-bottom: 8px;
}
.quick-action {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: white;
  border: 1.5px solid var(--line);
  border-left: 5px solid var(--turquoise);
  border-radius: 14px;
  padding: 18px 20px;
  text-decoration: none;
  box-shadow: var(--shadow);
  transition: transform .1s ease, border-color .15s ease;
}
.quick-action:hover { border-color: var(--turquoise); transform: translateY(-1px); }
.quick-action-title { font-family: 'Poppins', sans-serif; font-weight: 700; color: var(--bordeaux-dark); font-size: 15.5px; }
.quick-action-sub { font-size: 13px; color: var(--ink); opacity: .75; }

.today-list { list-style: none; padding: 0; margin: 0 0 22px; display: flex; flex-direction: column; gap: 8px; }
.today-list li {
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 11px 16px;
  font-size: 14px;
}
.today-list li strong { color: var(--bordeaux-dark); }

/* --- Buttons --- */
.btn {
  background: var(--turquoise);
  color: white;
  padding: 12px 22px;
  border-radius: 10px;
  text-decoration: none;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 14.5px;
  border: none;
  cursor: pointer;
  transition: background .15s ease, transform .1s ease, box-shadow .15s ease;
  display: inline-block;
}
.btn:hover { background: var(--turquoise-dark); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(78, 191, 190, 0.35); }
.btn.secondary {
  background: white;
  color: var(--bordeaux);
  border: 1.5px solid var(--bordeaux);
}
.btn.secondary:hover { background: var(--bordeaux); color: white; box-shadow: 0 4px 12px rgba(107, 45, 60, 0.25); }
.btn.btn-small { padding: 7px 14px; font-size: 13px; border-radius: 8px; }

/* --- Promo-tekst suggesties --- */
.suggestion-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
  margin-bottom: 26px;
}
.suggestion-card {
  position: relative;
  background: white;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: 'Inter', sans-serif;
  transition: border-color .15s ease, box-shadow .15s ease, transform .1s ease, background .15s ease;
}
.suggestion-card:hover {
  border-color: var(--turquoise);
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}
.suggestion-card.selected {
  border-color: var(--bordeaux);
  background: var(--turquoise-light);
  box-shadow: 0 0 0 3px var(--bordeaux);
  padding-right: 38px;
}
.suggestion-card.selected::after {
  content: '✓';
  position: absolute;
  top: 10px;
  right: 10px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--bordeaux);
  color: white;
  font-size: 12px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}
.suggestion-card strong {
  color: var(--bordeaux-dark);
  font-family: 'Poppins', sans-serif;
  font-size: 13.5px;
}
.suggestion-card span {
  color: var(--ink);
  font-size: 13px;
  opacity: .8;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.suggestion-theme-heading {
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  color: var(--bordeaux-dark);
  margin: 22px 0 10px;
  padding-bottom: 4px;
  border-bottom: 1.5px solid var(--line);
}
.suggestion-theme-heading:first-of-type { margin-top: 6px; }
.suggestion-card-wrap { display: flex; flex-direction: column; }
.suggestion-card-wrap .suggestion-card { flex: 1; }
.suggestion-card.suggestion-card-custom { border-color: var(--bordeaux); border-style: dashed; }
.suggestion-delete-form { text-align: right; margin-top: 4px; }
.suggestion-delete-form .link-btn { font-size: 12px; }
.suggestion-custom-details {
  background: white;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 26px;
  max-width: 520px;
}
.suggestion-custom-details summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--bordeaux);
  font-family: 'Inter', sans-serif;
}
.suggestion-custom-details[open] summary { margin-bottom: 12px; }
.suggestion-custom-form { border: none; padding: 0; box-shadow: none; max-width: none; }

/* --- Forms --- */
.post-form {
  background: white;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 26px 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 520px;
  box-shadow: var(--shadow);
}
.post-form label {
  font-weight: 600;
  margin-top: 10px;
  font-size: 13.5px;
  color: var(--bordeaux-dark);
  font-family: 'Inter', sans-serif;
}
.post-form input, .post-form textarea, .post-form select {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  font-family: inherit;
  font-size: 14.5px;
  color: var(--ink);
  background: white;
}
.post-form input:focus, .post-form textarea:focus, .post-form select:focus {
  outline: none;
  border-color: var(--turquoise);
  box-shadow: 0 0 0 3px var(--turquoise-light);
}

/* Filterbalk boven een tabel (bv. klanten filteren op categorie) */
.filter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 14px;
}
.filter-bar label { font-weight: 600; font-size: 13.5px; color: var(--bordeaux-dark); }
.filter-bar select, .inline-select {
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
  background: white;
}
.inline-select { padding: 5px 8px; font-size: 13px; }
.post-form button {
  margin-top: 18px;
  background: var(--turquoise);
  color: white;
  border: none;
  padding: 13px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  transition: background .15s ease, transform .1s ease;
}
.post-form button:hover { background: var(--turquoise-dark); transform: translateY(-1px); }
.checkboxes { display: flex; gap: 16px; font-weight: normal; }
.checkboxes label { font-weight: 500; color: var(--ink); }

@media (max-width: 600px) {
  .post-form, .settings-section { max-width: 100%; padding-left: 18px; padding-right: 18px; }
  .post-form input, .post-form textarea, .post-form select, .settings-section input {
    padding: 13px 14px;
    font-size: 16px; /* voorkomt automatisch inzoomen op iOS bij focus */
  }
  .post-form button, .btn { padding: 15px 22px; font-size: 16px; width: 100%; text-align: center; }
  .cta-row .btn, .quick-actions { width: 100%; }
  .cta-row { flex-direction: column; }
}

/* --- Tables --- */
/* Voorkomt dat brede tabellen (veel kolommen) op middelgrote schermen de hele
   pagina breder maken dan de viewport — de tabel scrollt dan enkel zelf
   horizontaal i.p.v. elke kolom geforceerd samen te persen. Op mobiel (zie
   media query hieronder) wordt de tabel toch al een kaartjeslijst, dus daar
   doet deze wrapper niets. */
.table-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

.data-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
  background: white;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.data-table thead tr { background: var(--bordeaux); }
.data-table th {
  color: white;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: .3px;
  padding: 12px 14px;
  text-align: left;
}
.data-table td {
  border-bottom: 1px solid var(--line);
  padding: 11px 14px;
  text-align: left;
  font-size: 14px;
  color: var(--ink);
}
.data-table tbody tr:nth-child(even) { background: var(--stripe); }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr { transition: background .12s ease; }
.data-table tbody tr:hover { background: var(--turquoise-light); }

/* Op smalle schermen wordt elke tabelrij een los "kaartje" met label + waarde per
   veld, in plaats van een tabel die je horizontaal moet scrollen. Elke <td> krijgt
   een data-label="..." attribuut in de view; dat label wordt hier getoond via
   content: attr(). */
@media (max-width: 760px) {
  .data-table { box-shadow: none; background: transparent; }
  .data-table thead { display: none; }
  .data-table, .data-table tbody, .data-table tr, .data-table td { display: block; width: 100%; }
  .data-table tbody tr {
    background: white;
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: var(--shadow);
    margin-bottom: 14px;
    padding: 6px 4px;
  }
  .data-table tbody tr:nth-child(even) { background: white; }
  .data-table td {
    border-bottom: 1px dashed var(--line);
    padding: 10px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    text-align: right;
  }
  .data-table td:last-child { border-bottom: none; }
  .data-table td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--bordeaux-dark);
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: .3px;
    text-align: left;
    flex-shrink: 0;
  }
  .data-table td:not([data-label]) { display: block; text-align: left; }
  .data-table td[data-label="Acties"], .data-table td[data-label=""] {
    justify-content: flex-start;
    flex-wrap: wrap;
    row-gap: 8px;
    column-gap: 14px;
  }
  .data-table td[data-label="Acties"] form.inline, .data-table td[data-label=""] form.inline { flex-shrink: 0; }
}

.status { padding: 3px 10px; border-radius: 12px; font-size: 11.5px; font-weight: 600; }
.status-posted, .status-dry-run-ok { background: #dff0d8; color: #3c763d; }
.status-failed { background: #f2dede; color: #a94442; }
.status-pending, .status-scheduled { background: #fcf1d6; color: #8a6d3b; }

.notice {
  background: var(--turquoise-light);
  border: 1px solid var(--turquoise);
  color: var(--bordeaux-dark);
  padding: 13px 18px;
  border-radius: 8px;
  font-size: 14px;
}
.error { color: #a94442; font-weight: 500; }
.link-btn { text-decoration: underline; color: var(--bordeaux); background: none; border: none; cursor: pointer; font-family: inherit; font-size: inherit; }

/* Actieknoppen in een tabelrij (bv. de klantenlijst). Zonder deze regels plakken de
   losse "link-btn"-knopjes als onderstreepte tekst aan elkaar. Hier tonen we ze als
   nette, uit elkaar staande chips; de destructieve "Verwijderen" krijgt een aparte
   rode stijl zodat hij niet met de mail-acties verward wordt. */
.row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 7px 8px; }
.row-actions form.inline { display: inline-flex; margin: 0; }
.row-actions .link-btn {
  text-decoration: none;
  border: 1px solid var(--turquoise);
  background: var(--turquoise-light);
  color: var(--bordeaux-dark);
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  transition: background .12s ease, color .12s ease;
}
.row-actions .link-btn:hover { background: var(--turquoise); color: #fff; }
.row-actions .link-btn.danger { border-color: #e3bcbc; background: #f8ecec; color: #a94442; }
.row-actions .link-btn.danger:hover { background: #a94442; color: #fff; }

/* --- Flash-berichten (bevestiging na een actie) --- */
.flash {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 18px;
  border-radius: 8px;
  font-size: 14.5px;
  font-weight: 500;
  margin-bottom: 20px;
}
.flash-success { background: #dff0d8; border: 1px solid #3c763d55; color: #3c763d; }
.flash-error { background: #f2dede; border: 1px solid #a9444255; color: #a94442; }
.flash-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  color: inherit;
  opacity: .6;
  padding: 0 4px;
}
.flash-close:hover { opacity: 1; }

/* --- Veldhulp: korte uitleg in gewone taal onder een label --- */
.field-help {
  display: block;
  font-weight: 400;
  font-size: 12.5px;
  color: var(--ink);
  opacity: .7;
  margin: -4px 0 2px;
}

/* --- Reeksen: dag-checkboxes en dynamische tijdstippen-lijst (/reeksen) --- */
.weekday-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 14px;
}
.weekday-chip {
  position: relative;
  font-weight: normal;
}
.weekday-chip input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}
.weekday-chip span {
  display: inline-block;
  min-width: 42px;
  text-align: center;
  padding: 9px 6px;
  border-radius: 8px;
  border: 1.5px solid var(--line);
  color: var(--ink);
  font-weight: 600;
  text-transform: capitalize;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.weekday-chip input[type="checkbox"]:checked + span {
  background: var(--bordeaux);
  border-color: var(--bordeaux);
  color: white;
}
.weekday-chip input[type="checkbox"]:focus-visible + span {
  outline: 2px solid var(--bordeaux-dark);
  outline-offset: 2px;
}

.times-list { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 8px; }
.time-slot-row { display: flex; align-items: center; gap: 10px; }
.time-slot-row input[type="time"] { width: auto; flex: 0 0 auto; }
.remove-time-btn { font-size: 18px; line-height: 1; padding: 4px 8px; }
.add-time-btn { margin-bottom: 16px; }

.date-range-row { display: flex; gap: 16px; margin: 4px 0 14px; }
.date-range-row > div { flex: 1; }
.date-range-row input[type="date"] { width: 100%; }
.sublabel { display: block; font-weight: 500; font-size: 13px; color: var(--ink); opacity: .8; margin-bottom: 4px; }

@media (max-width: 600px) {
  .date-range-row { flex-direction: column; gap: 8px; }
}

/* --- Instellingen: uitklapbare secties zodat het formulier minder overweldigend is --- */
.settings-section {
  background: white;
  border: 1px solid var(--line);
  border-radius: 14px;
  margin-bottom: 16px;
  padding: 4px 22px 4px;
  box-shadow: var(--shadow);
}
.settings-section summary {
  cursor: pointer;
  list-style: none;
  padding: 16px 0;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  color: var(--bordeaux-dark);
  font-size: 15px;
}
.settings-section summary::-webkit-details-marker { display: none; }
.settings-section summary::before { content: '+ '; color: var(--turquoise-dark); }
.settings-section[open] summary::before { content: '– '; }
.settings-section[open] summary { border-bottom: 1px solid var(--line); }
.settings-section .settings-section-body { padding: 4px 0 18px; display: flex; flex-direction: column; gap: 4px; }
.settings-section label { font-weight: 600; margin-top: 10px; font-size: 13.5px; color: var(--bordeaux-dark); font-family: 'Inter', sans-serif; }
.settings-section input {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  font-family: inherit;
  font-size: 14.5px;
  color: var(--ink);
}
.settings-section input:focus { outline: none; border-color: var(--turquoise); box-shadow: 0 0 0 3px var(--turquoise-light); }
.settings-section textarea {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  font-family: inherit;
  font-size: 14.5px;
  color: var(--ink);
  resize: vertical;
}
.settings-section textarea:focus { outline: none; border-color: var(--turquoise); box-shadow: 0 0 0 3px var(--turquoise-light); }
.settings-section h3 { margin: 10px 0 0; font-family: 'Poppins', sans-serif; font-size: 14px; color: var(--bordeaux-dark); }
.settings-section-intro { font-size: 13.5px; color: var(--ink); opacity: .85; margin: 0 0 8px; }
.post-form.settings-form { max-width: 780px; }

/* --- Opvolging: tijdlijn-overzicht bovenaan zodat de automatische flow in 1 oogopslag duidelijk is --- */
.followup-flow { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 26px; max-width: 780px; }
.flow-step {
  flex: 1 1 150px;
  min-width: 140px;
  position: relative;
  background: white;
  border: 1px solid var(--line);
  border-top: 3px solid var(--turquoise);
  border-radius: 12px;
  padding: 12px 14px 13px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.flow-step-start { border-top-color: var(--bordeaux); }
.flow-step-icon { font-size: 20px; line-height: 1; }
.flow-step-title { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 13.5px; color: var(--bordeaux-dark); }
.flow-step-timing { font-size: 12px; font-weight: 700; color: var(--turquoise-dark); }
.flow-step-start .flow-step-timing { color: var(--bordeaux); }
.flow-step-note { font-size: 11.5px; color: var(--ink); opacity: .7; line-height: 1.35; }

/* Genummerd badge in de sectietitels van de opvolgingspagina */
.settings-section summary .step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-right: 9px;
  border-radius: 999px;
  background: var(--turquoise);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  vertical-align: middle;
}

.field-row { display: flex; gap: 20px; }
.field-row .field { flex: 1; min-width: 0; display: flex; flex-direction: column; }
@media (max-width: 640px) {
  .field-row { flex-direction: column; gap: 0; }
}

.phase-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 8px; }
.phase-card {
  background: var(--stripe);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 4px 14px 12px;
  display: flex;
  flex-direction: column;
}
.phase-card h3 { margin-top: 4px; }
@media (max-width: 640px) {
  .phase-grid { grid-template-columns: 1fr; }
}

.media-shortcut-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  flex-wrap: wrap;
}
.media-shortcut-card .btn { flex-shrink: 0; }
@media (max-width: 600px) {
  .media-shortcut-card { flex-direction: column; align-items: flex-start; }
  .media-shortcut-card .btn { width: 100%; text-align: center; }
}

/* --- Opvolging: mail-sjablonen beheren (toevoegen/bewerken/wissen) --- */
.settings-section h4 { margin: 18px 0 0; font-family: 'Poppins', sans-serif; font-size: 13.5px; color: var(--bordeaux-dark); }
.template-actions { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.template-edit { width: 100%; }
.template-edit summary { cursor: pointer; list-style: none; }
.template-edit summary::-webkit-details-marker { display: none; }
.template-edit-form { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; padding: 12px; background: var(--stripe); border-radius: 8px; }
.template-edit-form label { margin-top: 6px; }
.template-add-form { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.template-delete-form { margin: 0; }

/* --- Instellingen: verbindingsstatus als kaartjes i.p.v. platte tekst --- */
.connection-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin-bottom: 8px;
}
.connection-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 14px;
  box-shadow: var(--shadow);
  transition: box-shadow .15s ease;
}
.connection-card:hover { box-shadow: 0 4px 14px rgba(107, 45, 60, 0.1); }
.connection-card strong { display: block; font-size: 13.5px; color: var(--bordeaux-dark); font-family: 'Inter', sans-serif; }
.connection-sub { display: block; font-size: 12px; opacity: .75; }
.connection-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; background: #c9a94a; }
.connection-card.is-connected .connection-dot { background: #3c763d; }
.connection-card.is-pending .connection-dot { background: #c9a94a; }

.tunnel-status-card { padding: 14px 16px; }
.tunnel-status-row { display: flex; align-items: center; gap: 10px; }
.tunnel-status-row > div { flex: 1; }
.tunnel-status-row .connection-dot { transition: background .2s ease; }

/* --- Instellingen: huisstijl (logo, handtekening, lettertype) --- */
.huisstijl-preview-row {
  display: flex;
  align-items: center;
  margin: 6px 0 4px;
}
.huisstijl-logo-preview {
  max-height: 60px;
  max-width: 220px;
  object-fit: contain;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 10px;
  background: white;
}
.huisstijl-signature-preview {
  max-height: 50px;
  max-width: 220px;
  object-fit: contain;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 10px;
  background: white;
}
.huisstijl-preview-empty {
  font-size: 13px;
  color: var(--ink);
  opacity: .6;
  font-style: italic;
}
.huisstijl-upload-form {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 8px 0 18px;
  flex-wrap: wrap;
}
.huisstijl-upload-form input[type="file"] {
  font-size: 13.5px;
  max-width: 100%;
}

/* --- Instellingen: "snel starten met sjabloon"-kader boven de vrije tekstvelden --- */
.quick-template {
  background: var(--stripe);
  border: 1px dashed var(--line);
  border-radius: 8px;
  padding: 12px 14px;
  margin: 10px 0 4px;
}
.quick-template-row {
  display: flex;
  gap: 10px;
  align-items: stretch;
}
.quick-template-row select {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
  background: white;
}
.quick-template-row .btn { flex: 0 0 auto; white-space: nowrap; }

@media (max-width: 600px) {
  .quick-template-row { flex-direction: column; }
}

/* --- Volledig voorbeeld van de gekozen review-/winback-mailtekst --- */
.mail-preview {
  background: var(--turquoise-light);
  border: 1px solid var(--turquoise);
  border-radius: 8px;
  padding: 12px 16px;
  margin: 2px 0 12px;
  font-size: 13.5px;
  color: var(--ink);
  line-height: 1.5;
}
.mail-preview:empty { display: none; }
.mail-preview-subject {
  display: block;
  color: var(--bordeaux-dark);
  font-family: 'Poppins', sans-serif;
  font-size: 13.5px;
  margin-bottom: 6px;
}
.mail-preview-stage {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--turquoise);
}
.mail-preview img { max-width: 100%; height: auto; }

/* --- Handtekeningen (opvolgingspagina) --- */
.settings-section select {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  font-family: inherit;
  font-size: 14.5px;
  color: var(--ink);
  background: white;
}
.settings-section select:focus { outline: none; border-color: var(--turquoise); box-shadow: 0 0 0 3px var(--turquoise-light); }
.signature-thumb {
  display: block;
  max-height: 48px;
  width: auto;
  margin: 2px 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: white;
  padding: 3px;
}
.signature-text-preview { display: block; font-size: 13px; color: var(--ink); opacity: .85; white-space: pre-wrap; }
.checkbox-inline { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.checkbox-inline input { width: auto; }

/* --- Media-bibliotheek + picker --- */
.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 14px;
}
.media-item {
  background: white;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow);
  text-align: center;
  transition: transform .12s ease, box-shadow .12s ease;
}
.media-item:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(107, 45, 60, 0.12); }
.media-item { position: relative; }
.media-item img { width: 100%; height: 110px; object-fit: cover; display: block; }
.media-item form { padding: 8px; }

.media-select-wrap {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 2;
  background: rgba(255,255,255,.85);
  border-radius: 6px;
  padding: 3px;
  display: flex;
  box-shadow: 0 1px 4px rgba(0,0,0,.15);
}
.media-select-checkbox { width: 17px; height: 17px; cursor: pointer; accent-color: var(--bordeaux); }

/* --- Bulk-upload dropzone --- */
.dropzone {
  border: 2px dashed var(--line);
  border-radius: 12px;
  padding: 28px 16px;
  text-align: center;
  cursor: pointer;
  background: var(--stripe);
  transition: border-color .15s ease, background .15s ease;
  margin: 8px 0 4px;
}
.dropzone:hover, .dropzone.dropzone-active {
  border-color: var(--turquoise);
  background: var(--turquoise-light);
}
.dropzone-icon { width: 34px; height: 34px; color: var(--turquoise-dark); margin-bottom: 6px; }
.dropzone-text { font-size: 13.5px; color: var(--ink); opacity: .8; margin: 0; }
.dropzone-link { color: var(--bordeaux); font-weight: 600; text-decoration: underline; }

/* --- Bulkbeheer actiebalk (verplaatsen/verwijderen van geselecteerde foto's) --- */
.bulk-action-bar {
  position: sticky;
  bottom: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bordeaux-dark);
  color: white;
  padding: 12px 16px;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,.22);
  margin-top: 16px;
  flex-wrap: wrap;
}
.bulk-count-label { font-weight: 600; font-size: 13.5px; margin-right: 4px; }
.bulk-action-bar input[type="text"] {
  padding: 8px 10px;
  border-radius: 8px;
  border: none;
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  min-width: 160px;
}
.bulk-action-bar button {
  padding: 8px 14px;
  border-radius: 8px;
  border: none;
  background: var(--turquoise);
  color: white;
  font-weight: 600;
  font-size: 13.5px;
  cursor: pointer;
  transition: background .15s ease;
}
.bulk-action-bar button:hover { background: var(--turquoise-dark); }
.bulk-action-bar button.btn-danger { background: #B23A4E; }
.bulk-action-bar button.btn-danger:hover { background: #96293C; }
.bulk-action-bar button.link-btn { background: none; color: white; text-decoration: underline; font-weight: 400; }

.media-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 6px;
}
.media-picker-thumb {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 6px;
  border: 2px solid var(--line);
  cursor: pointer;
  transition: border-color .15s ease;
}
.media-picker-thumb:hover { border-color: var(--turquoise); }
.media-picker-thumb.selected { border-color: var(--bordeaux); box-shadow: 0 0 0 3px var(--turquoise-light); }

/* --- Meerdere foto's per post (carousel-selectie) --- */
.photo-picker-item { position: relative; display: inline-block; }
.photo-order-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  background: var(--bordeaux);
  color: white;
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  font-weight: 700;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px white;
}
.photo-counter {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  opacity: .75;
  margin-bottom: 6px;
}
.photo-counter.photo-counter-full { color: var(--bordeaux); opacity: 1; }
.photo-preview-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0;
}
.photo-preview-thumb {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 6px;
  border: 2px solid var(--line);
}

/* --- Content-kalender --- */
.calendar-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 4px 0 22px;
}
.calendar-nav-group {
  display: flex;
  align-items: center;
  gap: 18px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 8px;
  box-shadow: var(--shadow);
}
.calendar-nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: var(--bordeaux-dark);
  font-size: 16px;
  text-decoration: none;
  transition: background .12s ease, color .12s ease;
}
.calendar-nav-btn:hover { background: var(--turquoise-light); color: var(--bordeaux); }
.calendar-month-label {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  color: var(--bordeaux-dark);
  font-size: 17px;
  text-transform: capitalize;
  min-width: 160px;
  text-align: center;
}
/* Breekt de kalender uit de padding van .container op grotere schermen, zodat
   de dagvakjes breder zijn i.p.v. samengeknepen in een smalle kolom. Bleedt
   enkel tot de rand van .container zelf (nooit tot de volledige viewport) —
   zo blijft de kalender altijd binnen .main-area, ook naast de zijbalk.
   Onder 900px (tablet/mobiel) blijft alles binnen de gewone container —
   daar zorgt .calendar-scroll al voor horizontaal scrollen. */
@media (min-width: 900px) {
  .calendar-widen {
    width: calc(100% + 64px);
    margin-left: -32px;
    margin-right: -32px;
  }
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}
.calendar-weekday {
  text-align: center;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  color: var(--bordeaux);
  padding-bottom: 6px;
}
.calendar-cell {
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
  min-height: 110px;
  padding: 8px;
  font-size: 12px;
}
.calendar-cell-empty { background: transparent; border: none; }
.calendar-day-number { font-weight: 700; color: var(--bordeaux-dark); margin-bottom: 4px; }
.calendar-post-chip {
  background: var(--turquoise-light);
  border-left: 3px solid var(--bordeaux);
  border-radius: 5px;
  padding: 4px 7px;
  margin-bottom: 4px;
  font-size: 12px;
  line-height: 1.35;
  cursor: pointer;
  transition: filter .1s ease;
}
.calendar-post-chip:hover { filter: brightness(0.94); }
.calendar-post-chip.type-story { border-left-color: #5b6ee1; }
.calendar-post-chip.status-failed { background: #f2dede; color: #a94442; }
.calendar-post-chip.status-pending, .calendar-post-chip.status-scheduled { background: #fcf1d6; color: #8a6d3b; }
.calendar-post-chip-time { color: var(--bordeaux-dark); }
.calendar-chip-type-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--bordeaux-dark);
  opacity: .75;
  margin-right: 4px;
}
.calendar-chip-title { margin-top: 1px; word-break: break-word; }

@media (max-width: 600px) {
  .calendar-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -16px; padding: 0 16px; }
  .calendar-grid { min-width: 560px; }
  .calendar-nav { flex-wrap: wrap; gap: 10px; }
}

/* --- Kalender: post bewerken/verwijderen modal --- */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(43, 20, 26, 0.55);
  z-index: 100;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 16px;
  overflow-y: auto;
}
.modal-overlay.open { display: flex; }
.modal-box {
  background: white;
  border-radius: 12px;
  padding: 28px 26px;
  max-width: 520px;
  width: 100%;
  position: relative;
  box-shadow: 0 12px 40px rgba(0,0,0,0.25);
}
.modal-box h2 {
  font-family: 'Poppins', sans-serif;
  color: var(--bordeaux-dark);
  background: none;
  text-transform: none;
  letter-spacing: 0;
  border-bottom: none;
  padding: 0;
  margin: 0 0 16px;
  font-size: 19px;
  font-weight: 700;
}
.modal-box h2::before { display: none; }
.modal-close {
  position: absolute;
  top: 14px;
  right: 16px;
  background: none;
  border: none;
  font-size: 24px;
  line-height: 1;
  color: var(--ink);
  opacity: .55;
  cursor: pointer;
  padding: 4px;
  transition: opacity .12s ease;
}
.modal-close:hover { opacity: 1; }
.modal-photo-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 16px;
}
.modal-photo-strip:empty { display: none; }
.btn.danger {
  background: white;
  color: #a94442;
  border: 1.5px solid #a94442;
}
.btn.danger:hover { background: #a94442; color: white; }

@media (max-width: 600px) {
  .modal-box { padding: 22px 18px; }
}

/* --- Login --- */
.login-body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  margin: 0;
  background: linear-gradient(160deg, var(--turquoise) 0%, var(--bordeaux-dark) 100%);
}
.login-box {
  background: white;
  padding: 44px 40px;
  border-radius: 14px;
  width: 340px;
  box-shadow: 0 20px 50px rgba(0,0,0,.25);
  text-align: center;
}
.login-brand-mark {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--bordeaux);
  color: white;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
}
.login-box h1 {
  all: unset;
  display: block;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 24px;
  color: var(--bordeaux-dark);
}
.login-box h1 span { font-weight: 400; opacity: .8; font-size: 18px; }
.login-box .tagline { display: block; font-size: 13px; margin: 8px 0 0; }
.login-box form { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; text-align: left; }
.login-box label { font-size: 13px; font-weight: 600; color: var(--bordeaux-dark); font-family: 'Inter', sans-serif; }
.login-box input {
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  font-size: 14.5px;
}
.login-box input:focus { outline: none; border-color: var(--turquoise); box-shadow: 0 0 0 3px var(--turquoise-light); }
.login-box button {
  background: var(--turquoise);
  color: white;
  border: none;
  padding: 13px;
  border-radius: 8px;
  cursor: pointer;
  margin-top: 8px;
  font-weight: 600;
  font-size: 15px;
  font-family: 'Inter', sans-serif;
  transition: background .15s ease;
}
.login-box button:hover { background: var(--turquoise-dark); }

/* --- Stories-editor (canvas: foto + tekstlagen, native Instagram/Facebook-clone) --- */
.story-editor {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}
.story-canvas-wrap {
  position: relative;
  width: 100%;
  max-width: 380px;
}
#story-canvas {
  width: 100%;
  aspect-ratio: 9 / 16;
  height: auto;
  display: block;
  margin: 0 auto;
  background: #000;
  border-radius: 14px;
  box-shadow: var(--shadow);
  touch-action: none;
  cursor: default;
}

/* Bovenbalk: altijd zichtbaar over de canvas */
.story-topbar {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 3;
}
.story-topbar-left, .story-topbar-right { display: flex; gap: 8px; }
.story-icon-btn {
  min-width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.45);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
}
.story-icon-btn:hover { background: rgba(0,0,0,0.65); }
#story-topbar-share {
  border-radius: 20px;
  font-weight: 700;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  background: var(--turquoise);
}
#story-topbar-share:hover { background: var(--turquoise-dark); }

/* Foto-kiezer als uitklap-overlay i.p.v. permanent zichtbaar sidebar-blok */
.story-photo-drawer {
  position: absolute;
  top: 60px;
  left: 12px;
  right: 12px;
  max-height: calc(100% - 80px);
  overflow-y: auto;
  background: rgba(255,255,255,0.97);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 14px;
  z-index: 4;
  display: none;
}
.story-photo-drawer.open { display: block; }
.story-photo-drawer label { font-weight: 600; font-size: 13px; display: block; margin: 8px 0 4px; }

/* Floating toolbar bij geselecteerd tekstblok */
/* LET OP: display staat NIET in de basisregel maar in :not([hidden]) hieronder.
   Reden: het [hidden]-attribuut (gezet via JS met toolbar.hidden = true/false) wordt
   toegepast via de user-agent-stijl "[hidden] { display: none }", die een LAGERE
   specificiteit heeft dan een gewone #id-selector. Stond er hier `display: flex` in de
   #story-toolbar-regel zelf, dan wint die altijd van [hidden] en blijft de toolbar
   permanent zichtbaar/klikbaar bovenop de canvas — ook zonder geselecteerd tekstblok —
   en blokkeert hij dan tik/klik-events die eigenlijk de canvas moeten bereiken (bug
   gevonden 2026-07-12: canvas kreeg geen mousedown meer, dus nooit een tekstvak).
   Zelfde reden voor #story-color-strip en #story-trash-zone hieronder. */
#story-toolbar {
  position: fixed;
  transform: translateX(-50%);
  gap: 6px;
  background: rgba(20,20,20,0.85);
  border-radius: 24px;
  padding: 6px;
  z-index: 20;
}
#story-toolbar:not([hidden]) { display: flex; }
.story-toolbar-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.story-toolbar-btn:hover { background: rgba(255,255,255,0.15); }
#story-toolbar-color-dot { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #fff; display: inline-block; background: #fff; }

#story-color-strip {
  position: fixed;
  transform: translateX(-50%);
  gap: 8px;
  align-items: center;
  background: rgba(20,20,20,0.85);
  border-radius: 20px;
  padding: 8px 10px;
  z-index: 21;
}
#story-color-strip:not([hidden]) { display: flex; }
#story-color-strip .story-swatch { width: 26px; height: 26px; border: 2px solid rgba(255,255,255,0.6); }
#story-color-custom { width: 26px; height: 26px; padding: 0; border: none; border-radius: 50%; cursor: pointer; }

/* Inline tekst-invoer: exact op de foto, native aanvoelend */
#story-inline-editor {
  position: fixed;
  z-index: 15;
  border: none;
  outline: none;
  background: transparent;
  resize: none;
  overflow: hidden;
  padding: 4px;
  line-height: 1.3;
}
#story-inline-editor::placeholder { color: rgba(255,255,255,0.7); }

/* Prullenbak-zone tijdens slepen */
#story-trash-zone {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(0,0,0,0.55);
  color: #fff;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  z-index: 25;
}
#story-trash-zone:not([hidden]) { display: flex; }
#story-trash-zone.active { background: var(--bordeaux); transform: translateX(-50%) scale(1.15); }

/* Deel-paneel (bottom sheet) */
#story-sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 30;
}
#story-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -6px 24px rgba(0,0,0,0.25);
  padding: 20px;
  transform: translateY(110%);
  transition: transform .25s ease;
  z-index: 31;
  max-height: 80vh;
  overflow-y: auto;
}
#story-sheet.open { transform: translateY(0); }
#story-sheet .post-form { display: flex; flex-direction: column; gap: 10px; }
.story-sheet-handle { width: 40px; height: 4px; background: var(--line); border-radius: 2px; margin: 0 auto 12px; }
.story-pills { display: flex; gap: 10px; }
.story-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 2px solid var(--line);
  border-radius: 20px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
}
.story-pill input { accent-color: var(--turquoise); }
.story-pill:has(input:checked) { border-color: var(--turquoise); background: var(--turquoise-light); }

/* Media-kiezer + swatches + geschiedenis-thumbnail (ongewijzigd hergebruikt) */
.story-swatches { display: flex; gap: 8px; margin: 4px 0; }
.story-swatch {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--line);
  cursor: pointer;
  padding: 0;
}
.story-swatch:hover { border-color: var(--turquoise); }
.story-media-thumb {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 6px;
  border: 2px solid var(--line);
  cursor: pointer;
  margin: 2px;
  transition: border-color .15s ease;
}
.story-media-thumb:hover { border-color: var(--turquoise); }
.story-media-thumb.selected { border-color: var(--bordeaux); box-shadow: 0 0 0 3px var(--turquoise-light); }
.story-media-group-label {
  font-weight: 600;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--bordeaux);
  margin: 10px 0 2px;
}
.story-history-thumb { width: 60px; height: 106px; object-fit: cover; border-radius: 6px; }

@media (max-width: 760px) {
  .story-canvas-wrap { max-width: 100%; }
}