.fp-errors{background:#fee;border:1px solid #f99;padding:.75rem;margin:.75rem 0;}
.fp-success{background:#f0fff4;border:1px solid #9ae6b4;padding:.75rem;margin:.75rem 0;}
.fp-table{width:100%;border-collapse:collapse}
.fp-table th,.fp-table td{border:1px solid #ddd;padding:.5rem}
.fp-table .fp-date{white-space:nowrap;width:11rem;}
.fp-table-wrap{overflow-x:auto;}
.fp-actions button{margin-right:.5rem}
.fp-heading{margin:.25rem 0 .75rem;font-size:1.25rem;font-weight:700;}
.fp-del-btn{background:#fff;border:1px solid #e11;color:#e11;padding:.25rem .5rem;border-radius:4px;cursor:pointer;}
.fp-del-btn:hover{background:#fee;}
/* char count */
.fp-charcount{font-size:.9rem;color:#555;text-align:right;margin:.25rem 0 1rem;}
/* align charcount width with textarea */
.fp-form .fp-charcount{display:block;width:100%;max-width:720px;}

/* --- Dark mode for inputs / tables --- */
@media (prefers-color-scheme: dark){
  .fp-form input[type="text"],
  .fp-form input[type="url"],
  .fp-form input[type="email"],
  .fp-form input[type="search"],
  .fp-form input[type="number"],
  .fp-form select,
  .fp-form textarea { background:#111827; color:#e5e7eb; border:1px solid #374151; }
  .fp-form input::placeholder,
  .fp-form textarea::placeholder { color:#9ca3af; }
  .fp-actions button{ background:#2563eb; color:#fff; border:1px solid transparent; }
  .fp-errors{ background:#3b1f1f; border-color:#b91c1c; color:#fee2e2; }
  .fp-success{ background:#0f2f1a; border-color:#10b981; color:#d1fae5; }
  .fp-table th,.fp-table td{ border-color:#374151; }
  .fp-table th{ background:#0f172a; color:#e5e7eb; }
  .fp-table td{ background:#111827; color:#e5e7eb; }
}
html.dark .fp-form input[type="text"],
html.dark .fp-form input[type="url"],
html.dark .fp-form input[type="email"],
html.dark .fp-form input[type="search"],
html.dark .fp-form input[type="number"],
html.dark .fp-form select,
html.dark .fp-form textarea,
body.dark .fp-form input[type="text"],
body.dark .fp-form input[type="url"],
body.dark .fp-form input[type="email"],
body.dark .fp-form input[type="search"],
body.dark .fp-form input[type="number"],
body.dark .fp-form select,
body.dark .fp-form textarea,
[data-theme="dark"] .fp-form input[type="text"],
[data-theme="dark"] .fp-form input[type="url"],
[data-theme="dark"] .fp-form input[type="email"],
[data-theme="dark"] .fp-form input[type="search"],
[data-theme="dark"] .fp-form input[type="number"],
[data-theme="dark"] .fp-form select,
[data-theme="dark"] .fp-form textarea{ background:#111827; color:#e5e7eb; border-color:#374151; }
html.dark .fp-table th, html.dark .fp-table td,
body.dark .fp-table th, body.dark .fp-table td,
[data-theme="dark"] .fp-table th, [data-theme="dark"] .fp-table td{ border-color:#374151; }
html.dark .fp-table th{ background:#0f172a; color:#e5e7eb; }
html.dark .fp-table td{ background:#111827; color:#e5e7eb; }

/* === FP input block (content + counter) === */
.fp-form .fp-input-block { position: relative; width:100%; max-width:720px; box-sizing:border-box; }
.fp-form .fp-input-block textarea,
.fp-form .fp-input-block .wp-editor-wrap,
.fp-form .fp-input-block .wp-editor-container { display:block; width:100%; max-width:720px; box-sizing:border-box; }
.fp-form .fp-input-block .fp-charcount { position:absolute; right:.5rem; bottom:-1.2rem; font-size:.9rem; line-height:1; white-space:nowrap; }
@media (max-width: 768px){
  .fp-form .fp-input-block,
  .fp-form .fp-input-block textarea,
  .fp-form .fp-input-block .wp-editor-wrap,
  .fp-form .fp-input-block .wp-editor-container { max-width:100%; }
}

/* === 1.0.10: counter sits under the input, width synced by JS === */
.fp-form .fp-input-block .fp-charcount{
  position: static !important;
  white-space: nowrap;
  text-align: right;
  display: block;
}

/* === 1.0.12: label on its own line, inputs always below === */
.fp-form p { display:block; clear:both; }
.fp-form label { display:block !important; margin:0 0 .4rem; white-space:normal; float:none !important; }
.fp-form .fp-input-block { display:block; clear:both; width:100%; max-width:720px; box-sizing:border-box; }
.fp-form .fp-input-block textarea,
.fp-form .fp-input-block .wp-editor-wrap,
.fp-form .fp-input-block .wp-editor-container { display:block; width:100%; max-width:720px; box-sizing:border-box; }
.fp-form .fp-input-block .fp-charcount{ display:block; text-align:right; margin:.25rem 0 0 0; }
@media (max-width:768px){
  .fp-form .fp-input-block,
  .fp-form .fp-input-block textarea,
  .fp-form .fp-input-block .wp-editor-wrap,
  .fp-form .fp-input-block .wp-editor-container { max-width:100%; }
}