.f230 {
	--f230-line: #d7d9de;
	--f230-ink: #1c2024;
	--f230-muted: #6b7280;
	--f230-accent: #1f3a93;
	--f230-bad: #b32020;
	max-width: 780px;
	margin: 0 auto;
	color: var(--f230-ink);
	font-size: 16px;
	line-height: 1.5;
}

.f230-alert {
	border-left: 4px solid var(--f230-bad);
	background: #fdf2f2;
	color: #7a1717;
	padding: 12px 16px;
	margin-bottom: 24px;
	border-radius: 3px;
}

.f230-fs {
	border: 1px solid var(--f230-line);
	border-radius: 6px;
	padding: 20px 22px 8px;
	margin: 0 0 22px;
}

.f230-fs legend {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--f230-muted);
	padding: 0 8px;
}

.f230-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 0 16px;
}

.f230-field {
	flex: 1 1 100%;
	margin: 0 0 16px;
	min-width: 0;
}

.f230-w8 { flex-basis: calc(66.6% - 16px); }
.f230-w6 { flex-basis: calc(50% - 16px); }
.f230-w5 { flex-basis: calc(41% - 16px); }
.f230-w4 { flex-basis: calc(33.3% - 16px); }
.f230-w3 { flex-basis: calc(25% - 16px); }
.f230-w2 { flex-basis: calc(16% - 16px); }

.f230-field label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 4px;
}

.f230-field label span,
.f230-req { color: var(--f230-bad); }

.f230 input[type="text"],
.f230 input[type="email"],
.f230 input[type="tel"] {
	width: 100%;
	box-sizing: border-box;
	padding: 9px 11px;
	border: 1px solid var(--f230-line);
	border-radius: 4px;
	font: inherit;
	background: #fff;
}

.f230 input:focus {
	outline: none;
	border-color: var(--f230-accent);
	box-shadow: 0 0 0 3px rgba(31, 58, 147, .12);
}

.f230 input[aria-invalid="true"] {
	border-color: var(--f230-bad);
	background: #fffafa;
}

#f230-cnp { letter-spacing: .18em; font-variant-numeric: tabular-nums; }

.f230-hint {
	display: block;
	font-size: 12px;
	color: var(--f230-muted);
	margin-top: 4px;
}

.f230-hint.is-bad { color: var(--f230-bad); }
.f230-hint.is-ok { color: #157347; }

.f230-recap {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 12px 20px;
	background: #f6f7f9;
	border-radius: 5px;
	padding: 14px 16px;
	margin-bottom: 18px;
}

.f230-recap span {
	display: block;
	font-size: 11px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--f230-muted);
}

.f230-recap strong { font-size: 14px; font-weight: 600; }

.f230-check {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-size: 14px;
	margin-bottom: 14px;
	cursor: pointer;
}

.f230-check input { margin-top: 3px; flex: 0 0 auto; }

.f230-canvas {
	width: 100%;
	height: auto;
	aspect-ratio: 10 / 3;
	border: 1px dashed var(--f230-line);
	border-radius: 5px;
	background: #fff;
	touch-action: none;
	cursor: crosshair;
}

.f230-clear {
	background: none;
	border: 1px solid var(--f230-line);
	border-radius: 4px;
	padding: 6px 12px;
	font-size: 13px;
	cursor: pointer;
}

.f230-submit button {
	width: 100%;
	padding: 15px 20px;
	background: var(--f230-accent);
	color: #fff;
	border: 0;
	border-radius: 5px;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
}

.f230-submit button:hover { filter: brightness(1.1); }
.f230-submit button[disabled] { opacity: .6; cursor: progress; }

.f230-note {
	font-size: 13px;
	color: var(--f230-muted);
	margin-top: 14px;
}

.f230-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

@media (max-width: 640px) {
	.f230-w8, .f230-w6, .f230-w5, .f230-w4 { flex-basis: 100%; }
	.f230-w3, .f230-w2 { flex-basis: calc(50% - 16px); }
	.f230-fs { padding: 16px 14px 4px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   TEMA ÎNTUNECATĂ — se activează cu [formular_230 tema="dark"]
   Aceeași paletă ca stiluri-donatii.css: prună de sală, gel cald, gel rece.
   ══════════════════════════════════════════════════════════════════════════ */

.f230--dark {
	--f230-line: #3b2634;
	--f230-ink: #f5ece1;
	--f230-muted: #b09aa4;
	--f230-accent: #f0b25c;
	--f230-bad: #f08b7e;
}

/* bandă pe toată lățimea, ca secțiunile paginii */
.f230--dark {
	max-width: none;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding: clamp(24px, 4vw, 48px) 0 clamp(40px, 6vw, 72px);
	background: #150d13;
}

.f230--dark .f230-form {
	max-width: 860px;
	margin: 0 auto;
	padding: 0 clamp(20px, 5vw, 40px);
}

.f230--dark .f230-fs {
	background: #221520;
	border-color: var(--f230-line);
	border-radius: 4px;
}

.f230--dark .f230-fs legend {
	color: var(--f230-accent);
	letter-spacing: .16em;
	font-size: 12px;
}

.f230--dark .f230-field label { color: #ece0d6; }

.f230--dark input[type="text"],
.f230--dark input[type="email"],
.f230--dark input[type="tel"] {
	background: #150d13;
	border-color: var(--f230-line);
	color: var(--f230-ink);
	border-radius: 3px;
}

.f230--dark input::placeholder { color: #7d6a72; }

.f230--dark input:focus {
	border-color: var(--f230-accent);
	box-shadow: 0 0 0 3px rgba(240, 178, 92, .18);
}

.f230--dark input[aria-invalid="true"] {
	border-color: var(--f230-bad);
	background: #1e1015;
}

.f230--dark .f230-recap {
	background: #150d13;
	border: 1px solid var(--f230-line);
	border-radius: 3px;
}

.f230--dark .f230-recap strong { color: #fff; }

.f230--dark .f230-check { color: #ded0d5; }

.f230--dark .f230-canvas {
	background: #fbf7f2;
	border-color: var(--f230-line);
}

.f230--dark .f230-clear {
	color: var(--f230-ink);
	border-color: var(--f230-line);
	background: transparent;
	border-radius: 3px;
}

.f230--dark .f230-clear:hover { border-color: var(--f230-accent); }

.f230--dark .f230-submit button {
	background: var(--f230-accent);
	color: #2a1608;
	border-radius: 4px;
	font-weight: 750;
}

.f230--dark .f230-alert {
	background: rgba(240, 139, 126, .1);
	color: #f6b4aa;
	border-left-color: var(--f230-bad);
}

.f230--dark .f230-hint.is-ok { color: #8fd6a8; }
.f230--dark .f230-hint.is-bad { color: var(--f230-bad); }

.f230--dark .f230-note,
.f230--dark .f230-note strong { color: var(--f230-muted); }
.f230--dark .f230-note strong { color: #ece0d6; }

.f230--dark a { color: var(--f230-accent); }

@media (prefers-reduced-motion: reduce) {
	.f230 * { transition: none !important; animation: none !important; }
}

/* ─── încărcarea documentului semnat ─────────────────────────────────── */

.f230-ok {
	border-left: 4px solid #157347;
	background: #ecf7f0;
	color: #14512f;
	padding: 14px 18px;
	margin-bottom: 22px;
	border-radius: 3px;
}

.f230-howto {
	counter-reset: pas;
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
}

.f230-howto li {
	counter-increment: pas;
	position: relative;
	padding: 0 0 0 42px;
	margin-bottom: 16px;
}

.f230-howto li::before {
	content: counter(pas);
	position: absolute;
	left: 0;
	top: 0;
	width: 26px;
	height: 26px;
	display: grid;
	place-items: center;
	border: 1px solid var(--f230-line);
	border-radius: 50%;
	font-size: 13px;
	font-weight: 700;
	color: var(--f230-accent);
}

.f230-howto b { display: block; font-size: 15px; }
.f230-howto span { display: block; font-size: 14px; color: var(--f230-muted); }

.f230-drop {
	position: relative;
	border: 2px dashed var(--f230-line);
	border-radius: 6px;
	padding: 30px 22px;
	text-align: center;
	transition: border-color .18s, background .18s;
	margin-bottom: 18px;
}

.f230-drop.is-over { border-color: var(--f230-accent); }
.f230-drop.has-files { text-align: left; }
.f230-drop.has-error { border-color: var(--f230-bad); }

.f230-drop input[type="file"] {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	overflow: hidden;
}

.f230-drop-label { display: block; cursor: pointer; }
.f230-drop-label strong {
	display: inline-block;
	padding: 11px 22px;
	border: 1px solid var(--f230-line);
	border-radius: 4px;
	font-size: 15px;
}
.f230-drop-label span { display: block; margin-top: 10px; font-size: 13px; color: var(--f230-muted); }
.f230-drop input[type="file"]:focus-visible + .f230-drop-label strong {
	outline: 2px solid var(--f230-accent);
	outline-offset: 2px;
}

.f230-filelist { list-style: none; margin: 16px 0 0; padding: 0; }
.f230-filelist li {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 9px 0;
	border-top: 1px solid var(--f230-line);
	font-size: 14px;
}
.f230-filelist .f230-fname { overflow-wrap: anywhere; }
.f230-filelist .f230-fsize { color: var(--f230-muted); white-space: nowrap; }
.f230-filelist li.is-bad .f230-fsize { color: var(--f230-bad); font-weight: 600; }

.f230--dark .f230-ok {
	background: rgba(143, 214, 168, .1);
	color: #a8e0bd;
	border-left-color: #8fd6a8;
}
.f230--dark .f230-drop { background: rgba(0, 0, 0, .18); }
.f230--dark .f230-drop-label strong { background: transparent; color: var(--f230-ink); }

/* ══════════════════════════════════════════════════════════════════════════
   ARMURĂ ÎMPOTRIVA TEMEI
   ══════════════════════════════════════════════════════════════════════════

   Problema: `.f230 { color: … }` funcționează prin moștenire, iar moștenirea
   pierde în fața oricărei reguli care țintește direct elementul. Temele scriu
   constant lucruri de tipul `.entry-content p { color:#333 }`, cu specificitate
   (0,1,1) — mai mare decât moștenirea, care nu are nicio specificitate. Pe fundal
   întunecat, rezultatul e text închis pe închis, adică invizibil.

   Soluția: forțăm `color: inherit` pe elementele de text din formular, cu
   specificitate (0,2,1) obținută prin dublarea clasei. Apoi reafirmăm excepțiile
   — etichete, note, accente — cu specificitate cel puțin egală.

   Nu folosim !important: ar fi un ciocan care ar bloca și personalizările
   legitime făcute din Additional CSS.
   ══════════════════════════════════════════════════════════════════════════ */

.f230.f230 p,
.f230.f230 li,
.f230.f230 span,
.f230.f230 label,
.f230.f230 legend,
.f230.f230 strong,
.f230.f230 b,
.f230.f230 em,
.f230.f230 h2,
.f230.f230 h3,
.f230.f230 div {
	color: inherit;
}

/* fieldset și legend primesc des stiluri de temă care strică aliniamentul */
.f230.f230 fieldset { min-width: 0; }
.f230.f230 legend { float: none; width: auto; margin: 0; }

/* câmpurile: unele teme le colorează sau le rotunjesc agresiv */
.f230.f230 input[type="text"],
.f230.f230 input[type="email"],
.f230.f230 input[type="tel"] {
	color: var(--f230-ink);
	background: var(--f230-field, #fff);
	font-family: inherit;
}

/* ── excepțiile, reafirmate ─────────────────────────────────────────────── */

.f230.f230 .f230-fs legend { color: var(--f230-muted); }
.f230.f230 .f230-hint { color: var(--f230-muted); }
.f230.f230 .f230-hint.is-ok { color: #157347; }
.f230.f230 .f230-hint.is-bad { color: var(--f230-bad); }
.f230.f230 .f230-note { color: var(--f230-muted); }
.f230.f230 .f230-recap span { color: var(--f230-muted); }
.f230.f230 .f230-field label span,
.f230.f230 .f230-req { color: var(--f230-bad); }
.f230.f230 .f230-howto span { color: var(--f230-muted); }
.f230.f230 .f230-filelist .f230-fsize { color: var(--f230-muted); }
.f230.f230 .f230-drop-label span { color: var(--f230-muted); }
.f230.f230 .f230-submit button { color: #fff; }
.f230.f230 a { color: var(--f230-accent); }

/* ── varianta întunecată ────────────────────────────────────────────────── */

.f230.f230--dark { --f230-field: #150d13; }
.f230.f230--dark .f230-fs legend { color: var(--f230-accent); }
.f230.f230--dark .f230-field label { color: #ece0d6; }
.f230.f230--dark .f230-recap strong,
.f230.f230--dark .f230-plot b { color: #fff; }
.f230.f230--dark .f230-check { color: #ded0d5; }
.f230.f230--dark .f230-hint.is-ok { color: #8fd6a8; }
.f230.f230--dark .f230-note strong { color: #ece0d6; }
.f230.f230--dark .f230-submit button { color: #2a1608; }
.f230.f230--dark .f230-howto b { color: #fff; }
.f230.f230--dark .f230-drop-label strong { color: var(--f230-ink); }
.f230.f230--dark .f230-ok { color: #a8e0bd; }
.f230.f230--dark .f230-alert { color: #f6b4aa; }

/* nested în pagină: câmpurile iau fundalul paginii, nu unul fix */
.vo .f230.f230--dark { --f230-field: var(--vo-ink); }