.ws-tools-favicon {
	--ws-tools-gap: var(--wp--style--block-gap, 1rem);
	--ws-accent: var(--wp--custom--greyd--button--prim--color--background, var(--wp--preset--color--primary, #1d4ed8));
	--ws-text: var(--wp--preset--color--foreground, inherit);
	--ws-label: var(--wp--custom--greyd--input--label--color--text, var(--wp--preset--color--foreground, inherit));
	--ws-button-text: var(--wp--custom--greyd--button--prim--color--text, var(--wp--preset--color--base, #fff));
	--ws-input-bg: var(--wp--custom--greyd--input--prim--color--background, var(--wp--preset--color--base, #fff));
	--ws-form-bg: var(--wp--preset--color--base, #fff);
	--ws-border: var(--wp--custom--greyd--input--prim--border--color, var(--wp--preset--color--mediumlight, #d1d5db));
	--ws-notice-bg: var(--wp--preset--color--lightest, #eff6ff);
	--ws-result-bg: var(--wp--preset--color--base, #f8fafc);
	--ws-border-width: var(--wp--custom--greyd--input--prim--border--width, 1px);
	--ws-input-radius: var(--wp--custom--greyd--input--prim--border--radius, 6px);
	--ws-form-radius: var(--wp--custom--greyd--input--prim--border--radius, 12px);
	--ws-button-radius: var(--wp--custom--greyd--button--prim--border--radius, 6px);
	--ws-notice-radius: var(--wp--custom--greyd--input--prim--border--radius, 8px);
	--ws-result-radius: var(--wp--custom--greyd--input--prim--border--radius, 12px);
	--ws-label-weight: var(--wp--custom--greyd--input--label--typography--font-weight, 600);
	--ws-panel-padding: var(--wp--preset--spacing--medium, 24px);
	color: var(--ws-text); font-family: var(--wp--preset--font-family--body, inherit); max-width: var(--wp--style--global--wide-size, 60rem);
}
.ws-tools-favicon *, .ws-tools-favicon *::before, .ws-tools-favicon *::after { box-sizing: border-box; }
.ws-tools-favicon__intro, .ws-tools-favicon__stage, .ws-tools-favicon__upload, .ws-tools-favicon__crop, .ws-tools-favicon__controls, .ws-tools-favicon__preview, .ws-tools-favicon__result, .ws-tools-favicon__lead { display: grid; gap: var(--ws-tools-gap); }
.ws-tools-favicon__app { height: auto; transition: height 280ms cubic-bezier(.4, 0, .2, 1); }
.ws-tools-favicon.ws-tools--boxed-form .ws-tools-favicon__stage { background: var(--ws-form-bg, #fff); border: var(--ws-border-width, 1px) solid var(--ws-border, currentColor); border-radius: var(--ws-form-radius, .75rem); padding: var(--ws-panel-padding, 1.5rem); }
.ws-tools-favicon.ws-tools--boxed-output .ws-tools-favicon__result { background: var(--ws-result-bg, #f8fafc); border: var(--ws-border-width, 1px) solid var(--ws-border, currentColor); border-radius: var(--ws-result-radius, .75rem); padding: var(--ws-panel-padding, 1.5rem); }
.ws-tools-favicon .ws-tools__field { display: grid; gap: .35rem; margin-block: 1rem; }
.ws-tools-favicon .ws-tools__label { color: var(--ws-label, inherit); font-weight: var(--ws-label-weight, 600); }
.ws-tools-favicon .ws-tools__help { color: color-mix(in srgb, var(--ws-text, currentColor) 72%, transparent); font-size: .875em; line-height: 1.45; margin: .15rem 0 0; }
.ws-tools-favicon .ws-tools__input { font: inherit; max-width: 100%; min-height: 2.75rem; width: 100%; }
.ws-tools-favicon:not(.ws-tools--theme-styles) .ws-tools__input { background: var(--ws-input-bg, #fff); border: var(--ws-border-width, 1px) solid var(--ws-border, currentColor); border-radius: var(--ws-input-radius, .25rem); color: var(--ws-text, inherit); padding: .65rem .75rem; }
.ws-tools-favicon .ws-tools__choice { align-items: flex-start; display: flex; gap: .55rem; margin-block: .6rem; }
.ws-tools-favicon .ws-tools__choice input { flex: 0 0 auto; margin-top: .25em; }
.ws-tools-favicon .ws-tools__button { cursor: pointer; min-height: 2.75rem; }
.ws-tools-favicon:not(.ws-tools--theme-styles) .ws-tools__button { background: var(--ws-accent, #1e1e1e); border: 2px solid transparent; border-radius: var(--ws-button-radius, .25rem); color: var(--ws-button-text, #fff); font: inherit; font-weight: 600; padding: .65rem 1rem; text-decoration: none; }
.ws-tools-favicon:not(.ws-tools--theme-styles) .ws-tools__button--secondary { background: transparent; border-color: var(--ws-accent, currentColor); color: var(--ws-accent, inherit); }
.ws-tools-favicon .ws-tools__button:disabled { cursor: wait; opacity: .65; }
.ws-tools-favicon :focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
.ws-tools-favicon .ws-tools__navigation, .ws-tools-favicon .wp-block-buttons { display: flex; flex-wrap: wrap; gap: .75rem; margin-block: 1rem; }
.ws-tools-favicon .wp-block-button { margin: 0; }
.ws-tools-favicon .ws-tools__notice { background: var(--ws-notice-bg, transparent); border-inline-start: .3rem solid var(--ws-accent, currentColor); border-radius: var(--ws-notice-radius, 0); padding: .75rem 1rem; }
.ws-tools-favicon .ws-tools__notice--warning { background: color-mix(in srgb, #f0b849 16%, transparent); }
.ws-tools-favicon .ws-tools__error, .ws-tools-favicon .ws-tools__summary-error { color: #b32d2e; font-weight: 600; }
.ws-tools-favicon .ws-tools__summary-error:empty { display: none; }
.ws-tools-favicon .ws-tools__honeypot { height: 0; left: -9999px; overflow: hidden; position: absolute; width: 0; }
.ws-tools-favicon__dropzone { border: 2px dashed var(--ws-border, currentColor); border-radius: var(--ws-notice-radius, .5rem); min-height: 15rem; padding: clamp(1.5rem, 5vw, 3rem); transition: background-color 160ms, border-color 160ms; }
.ws-tools-favicon__dropzone.is-dragging { background: var(--ws-notice-bg, transparent); border-color: var(--ws-accent, currentColor); }
.ws-tools-favicon__upload-label { align-items: center; cursor: pointer; display: flex; flex-direction: column; gap: .55rem; justify-content: center; min-height: 11rem; text-align: center; }
.ws-tools-favicon__upload-label .dashicons { color: var(--ws-accent, currentColor); font-size: 2.5rem; height: 2.5rem; width: 2.5rem; }
.ws-tools-favicon__crop-frame { align-self: start; background-color: #eef0f2; background-image: linear-gradient(45deg, #d8dadd 25%, transparent 25%), linear-gradient(-45deg, #d8dadd 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #d8dadd 75%), linear-gradient(-45deg, transparent 75%, #d8dadd 75%); background-position: 0 0, 0 8px, 8px -8px, -8px 0; background-size: 16px 16px; border: 1px solid var(--ws-border, currentColor); max-width: 32rem; overflow: hidden; position: relative; width: 100%; }
.ws-tools-favicon__crop-frame canvas { cursor: grab; display: block; height: auto; max-width: 100%; touch-action: none; width: 100%; }
.ws-tools-favicon__crop-frame canvas:active { cursor: grabbing; }
.ws-tools-favicon__crop-frame > span { border: 2px solid rgb(255 255 255 / 90%); box-shadow: 0 0 0 999px rgb(0 0 0 / 20%); inset: 0; pointer-events: none; position: absolute; }
.ws-tools-favicon__range { display: grid; gap: .35rem; max-width: 32rem; width: 100%; }
.ws-tools-favicon__range .range_control_wrapper { --rail-width: calc(100% - 20px); --rail-color: var(--ws-border, #d1d5db); --rail-height: 3px; --rail-borderradius: 2px; --track-color: var(--ws-accent, currentColor); --thumb-size: 20px; --thumb-color: var(--ws-input-bg, #fff); --thumb-border-color: var(--ws-accent, currentColor); --thumb-borderradius: 100px; --range-tooltip-background-color: var(--ws-accent, #1d4ed8); --range-tooltip-color: var(--ws-button-text, #fff); margin: 0 10px; min-height: 30px; position: relative; width: var(--rail-width); }
.ws-tools-favicon__range .range_control_wrapper input[type="range"] { cursor: pointer; display: block; height: 100%; inset: 0; margin: 0 -10px; opacity: 0; outline: none; position: absolute; width: calc(100% + 20px); z-index: 2; }
.ws-tools-favicon__range .rail, .ws-tools-favicon__range .track { background: var(--rail-color); border-radius: var(--rail-borderradius); font-size: var(--rail-height); height: 1em; left: -10px; margin-top: -.5em; pointer-events: none; position: absolute; top: 50%; }
.ws-tools-favicon__range .rail { right: -10px; }
.ws-tools-favicon__range .track { background: var(--track-color); border-bottom-right-radius: 0; border-top-right-radius: 0; width: 10px; }
.ws-tools-favicon__range .thumb_wrapper { align-items: center; display: flex; font-size: var(--thumb-size); height: 1em; justify-content: center; margin-left: -.5em; margin-top: -.5em; pointer-events: none; position: absolute; top: 50%; width: 1em; }
.ws-tools-favicon__range .thumb { background: var(--thumb-color); border: 1px solid var(--thumb-border-color); border-radius: var(--thumb-borderradius); height: 100%; position: absolute; width: 100%; }
.ws-tools-favicon__range .tooltip { background: var(--range-tooltip-background-color); border-radius: 2px; bottom: 100%; color: var(--range-tooltip-color); font-size: 14px; left: 50%; margin-bottom: .5em; min-width: 2.66em; opacity: 0; padding: .33em .66em; position: absolute; text-align: center; transform: translateX(-50%); transition: opacity 120ms ease; white-space: nowrap; }
.ws-tools-favicon__range input[type="range"].input-focus ~ .thumb_wrapper .thumb { box-shadow: 0 0 0 2px var(--thumb-border-color); }
.ws-tools-favicon__range input[type="range"].input-focus ~ .thumb_wrapper .tooltip { opacity: 1; }
.ws-tools-favicon__color { align-items: center; display: grid; gap: .6rem; grid-template-columns: auto 1fr; margin: .75rem 0; }
.ws-tools-favicon__color .ws-tools-favicon__color-picker { cursor: pointer; height: 3.25rem; min-height: 3.25rem; padding: .2rem; width: 4.5rem; }
.ws-tools-favicon__color.is-hidden { display: none; }
.ws-tools-favicon__control-preview { aspect-ratio: 1; background: repeating-conic-gradient(#e4e7eb 0 25%, #fff 0 50%) 50% / 20px 20px; border: 1px solid var(--ws-border, currentColor); max-width: 12rem; overflow: hidden; width: 100%; }
.ws-tools-favicon__control-preview canvas { display: block; height: 100%; width: 100%; }
.ws-tools-favicon__preview-toggle { display: flex; gap: .5rem; }
.ws-tools-favicon__preview-toggle button { background: transparent; border: 1px solid var(--ws-border, currentColor); border-radius: 999px; cursor: pointer; padding: .4rem .8rem; }
.ws-tools-favicon__preview-toggle .is-active { background: var(--ws-accent, currentColor); color: var(--ws-button-text, #fff); }
.ws-tools-favicon__preview-grid { background: #f7f7f7; border-radius: var(--ws-notice-radius, .5rem); display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); padding: 1rem; }
.ws-tools-favicon__preview-grid[data-mode="dark"] { background: #202124; color: #fff; }
.ws-tools-favicon__preview-grid figure { align-items: center; display: flex; flex-direction: column; gap: .75rem; margin: 0; min-width: 0; text-align: center; }
.ws-tools-favicon__preview-grid figure > div { align-items: center; display: flex; height: 8rem; justify-content: center; width: 100%; }
.ws-tools-favicon__preview-grid canvas { height: auto; image-rendering: auto; max-height: 8rem; max-width: 8rem; width: auto; }
.ws-tools-favicon__preview-grid canvas[data-preview-size="16"] { height: 16px; width: 16px; }
.ws-tools-favicon__preview-grid canvas[data-preview-size="32"] { height: 32px; width: 32px; }
.ws-tools-favicon__preview-grid figcaption { display: grid; font-size: .85em; }
.ws-tools-favicon__file-list { columns: 2; list-style: none; padding: 0; }
.ws-tools-favicon__code { border-top: 1px solid var(--ws-border, currentColor); margin-top: 1rem; padding-top: 1rem; }
.ws-tools-favicon__code pre { background: #111827; border-radius: var(--ws-notice-radius, .5rem); color: #f9fafb; max-width: 100%; overflow: auto; padding: 1rem; white-space: pre-wrap; }
.ws-tools-favicon__lead { border-top: 1px solid var(--ws-border, currentColor); margin-top: 2rem; padding-top: 2rem; }
.screen-reader-text { clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; width: 1px; }
@media (prefers-reduced-motion: reduce) { .ws-tools-favicon__app { transition: none; } }
@media (max-width: 48rem) { .ws-tools-favicon__file-list { columns: 1; } .ws-tools-favicon__range .range_control_wrapper { min-height: 50px; } .ws-tools-favicon__range .thumb_wrapper { transform: scale(1.2); } }
@media (max-width: 37.5rem) { .ws-tools-favicon .ws-tools__navigation, .ws-tools-favicon .wp-block-buttons { align-items: stretch; flex-direction: column; } .ws-tools-favicon .wp-block-button, .ws-tools-favicon .ws-tools__button { text-align: center; width: 100%; } .ws-tools-favicon__color { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------
 * Hausoptik: Karte, Pillen, Hinweise und Rueckruf-Bereich im Stil der
 * Inhaltskacheln von Greyd-Themes (1px Rahmen, 30px Radius, Eckmarke).
 * Alle Werte folgen den Theme-Variablen; ohne Greyd greifen die Fallbacks.
 * ------------------------------------------------------------------ */
.ws-tools-favicon {
	--ws-ink: var(--wp--preset--color--foreground, #191f30);
	--ws-corner: var(--wp--preset--color--tertiary, #373736);
	--ws-soft: color-mix(in srgb, var(--ws-accent) 16%, var(--wp--preset--color--base, #fff));
	--ws-line: color-mix(in srgb, var(--ws-ink) 16%, transparent);
	--ws-card-radius: 30px;
	--ws-inner-radius: 18px;
	--ws-card-padding: clamp(1.25rem, 3.5vw, 2.5rem);
	max-width: none;
}
.ws-tools-favicon .screen-reader-text { border: 0 !important; clip: rect(0, 0, 0, 0) !important; clip-path: inset(50%) !important; height: 1px !important; margin: -1px !important; min-height: 0 !important; overflow: hidden !important; padding: 0 !important; position: absolute !important; white-space: nowrap !important; width: 1px !important; }
.ws-tools-favicon .ws-tools-favicon__intro { display: grid; gap: .9rem; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.ws-tools-favicon .ws-tools-favicon__intro > * { margin: 0 !important; }
.ws-tools-favicon .ws-tools-favicon__intro > p:not([class]) { max-width: 52rem; }
.ws-tools-favicon .ws-tools__badges { display: flex; flex-wrap: wrap; gap: .75rem; list-style: none; margin: .25rem 0 0; padding: 0; }
.ws-tools-favicon .ws-tools__badges li { align-items: center; background: var(--ws-accent); border-radius: var(--ws-button-radius, 18px); color: var(--ws-button-text); display: inline-flex; font-size: 1rem; font-weight: 700; gap: .55rem; line-height: 1.5; margin: 0; padding: 14px 22px 15px; }
.ws-tools-favicon .ws-tools__badges li::before { content: "\2713"; font-weight: 700; }
.ws-tools-favicon .ws-tools-favicon__app { background: var(--ws-form-bg, #fff); border: 1px solid var(--ws-ink); border-radius: var(--ws-card-radius); padding: var(--ws-card-padding); position: relative; }
.ws-tools-favicon .ws-tools-favicon__app::after { background: var(--ws-corner); border-radius: 0 0 var(--ws-card-radius) 0; bottom: -1px; content: ""; height: 35px; pointer-events: none; position: absolute; right: -1px; width: 35px; }
.ws-tools-favicon .ws-tools-favicon__app h3.wp-block-heading { margin-top: 0; }
.ws-tools-favicon .ws-tools__notice { background: var(--ws-soft); border: 0; border-radius: var(--ws-inner-radius); color: var(--ws-ink); padding: 1rem 1.25rem; }
.ws-tools-favicon .ws-tools__notice--warning { background: color-mix(in srgb, #f0b849 20%, var(--wp--preset--color--base, #fff)); }
.ws-tools-favicon .ws-tools__choice { font-size: 1rem; font-weight: 400; line-height: 1.5; text-transform: none; }
.ws-tools-favicon .ws-tools__choice input { accent-color: var(--ws-ink); height: 1.15rem; margin-top: .15em; width: 1.15rem; }
.ws-tools-favicon .ws-tools__help { font-size: .875rem; }
.ws-tools-favicon .ws-tools__navigation, .ws-tools-favicon .ws-tools__actions, .ws-tools-favicon .wp-block-buttons { gap: .75rem; }
.ws-tools-favicon .ws-tools-favicon__lead { background: var(--ws-soft); border: 0; border-radius: var(--ws-card-radius); margin-top: clamp(2rem, 4vw, 3rem); padding: var(--ws-card-padding); }
.ws-tools-favicon .ws-tools-favicon__lead > h2, .ws-tools-favicon .ws-tools-favicon__lead > h3 { margin: 0; }
.ws-tools-favicon .ws-tools-favicon__lead .ws-tools__input, .ws-tools-favicon .ws-tools-favicon__lead .input { background-color: var(--wp--preset--color--base, #fff); }
@media (max-width: 37.5rem) { .ws-tools-favicon .ws-tools-favicon__app { border-radius: 24px; } .ws-tools-favicon .ws-tools-favicon__app::after { border-radius: 0 0 24px 0; height: 28px; width: 28px; } }
.ws-tools-favicon__dropzone { background: var(--ws-input-bg, #f7f7f7); border: 2px dashed color-mix(in srgb, var(--ws-ink) 30%, transparent); border-radius: var(--ws-inner-radius); }
.ws-tools-favicon__dropzone:hover, .ws-tools-favicon__dropzone.is-dragging { background: var(--ws-soft); border-color: var(--ws-ink); }
.ws-tools-favicon__upload-label { color: var(--ws-ink); font-size: 1rem; font-weight: 400; gap: .35rem; text-transform: none; }
.ws-tools-favicon__upload-label .dashicons { align-items: center; background: var(--ws-accent); border-radius: 50%; color: var(--ws-ink); display: inline-flex; font-size: 1.75rem; height: 4rem; justify-content: center; margin-bottom: .5rem; width: 4rem; }
.ws-tools-favicon__upload-label strong { font-size: 1.25rem; font-weight: 700; }
.ws-tools-favicon__upload-label small { font-size: .875rem; opacity: .75; }
.ws-tools-favicon__crop-frame, .ws-tools-favicon__control-preview { border-color: var(--ws-line); border-radius: var(--ws-inner-radius); }
.ws-tools-favicon__range .range_control_wrapper { --thumb-border-color: var(--ws-ink); --range-tooltip-background-color: var(--ws-ink); --range-tooltip-color: var(--wp--preset--color--base, #fff); }
.ws-tools-favicon__preview-grid { border-radius: var(--ws-inner-radius); }
.ws-tools-favicon__preview-toggle button { border-color: var(--ws-ink); color: var(--ws-ink); font: inherit; font-size: .875rem; font-weight: 600; }
.ws-tools-favicon__preview-toggle .is-active { background: var(--ws-ink); color: var(--ws-accent); }
.ws-tools-favicon__file-list li { margin-block: .2rem; }
.ws-tools-favicon__code { border-top-color: var(--ws-line); }
.ws-tools-favicon__code pre { background: var(--ws-ink); border-radius: var(--ws-inner-radius); }
.ws-tools-favicon fieldset { border: 0; margin: 0; min-width: 0; padding: 0; }
.ws-tools-favicon .ws-tools__field { grid-template-columns: minmax(0, 1fr); }
.ws-tools-favicon .ws-tools__help, .ws-tools-favicon .ws-tools__example { overflow-wrap: anywhere; }
.ws-tools-favicon .ws-tools-favicon__intro, .ws-tools-favicon .ws-tools-favicon__stage, .ws-tools-favicon .ws-tools-favicon__upload, .ws-tools-favicon .ws-tools-favicon__crop, .ws-tools-favicon .ws-tools-favicon__controls, .ws-tools-favicon .ws-tools-favicon__preview, .ws-tools-favicon .ws-tools-favicon__result, .ws-tools-favicon .ws-tools-favicon__lead { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 37.5rem) { .ws-tools-favicon .ws-tools__badges { gap: .5rem; } .ws-tools-favicon .ws-tools__badges li { font-size: .9375rem; padding: 11px 18px 12px; } }
.ws-tools-favicon .ws-tools__progress { margin-bottom: 1.5rem; }
.ws-tools-favicon .ws-tools__step-title { font-size: clamp(1.15rem, 2vw, 1.4rem); margin: 0 0 .75rem; }
.ws-tools-favicon .ws-tools__progress progress { appearance: none; background: var(--ws-input-bg, #f7f7f7); border: 0; border-radius: 999px; display: block; height: .6rem; overflow: hidden; width: 100%; }
.ws-tools-favicon .ws-tools__progress progress::-webkit-progress-bar { background: var(--ws-input-bg, #f7f7f7); border-radius: 999px; }
.ws-tools-favicon .ws-tools__progress progress::-webkit-progress-value { background: var(--ws-accent); border-radius: 999px; }
.ws-tools-favicon .ws-tools__progress progress::-moz-progress-bar { background: var(--ws-accent); border-radius: 999px; }
/* Dateitabelle auf der Favicon-Seite (Seiteninhalt, Klasse ws-tools-dateitabelle).
 * Zwei Klassen, weil das Tabellen-CSS der Block-Bibliothek erst bei Bedarf und damit NACH diesem
 * Stylesheet laedt (.wp-block-table td { border: 1px solid }) - bei gleicher Gewichtung gewinnt es. */
.wp-block-table.wp-block-table.ws-tools-dateitabelle { --ws-ink: var(--wp--preset--color--foreground, #191f30); --ws-line: color-mix(in srgb, var(--ws-ink) 16%, transparent); margin: 1.5rem 0; overflow: visible; }
.wp-block-table.ws-tools-dateitabelle table { border: 0; border-collapse: collapse; font-size: inherit; width: 100%; }
.wp-block-table.ws-tools-dateitabelle th, .wp-block-table.ws-tools-dateitabelle td { border: 0; border-bottom: 1px solid var(--ws-line); padding: .75rem .75rem .75rem 0; text-align: left; vertical-align: top; }
.wp-block-table.ws-tools-dateitabelle thead { border: 0; }
.wp-block-table.ws-tools-dateitabelle thead th { border-bottom: 2px solid var(--ws-ink); font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.wp-block-table.ws-tools-dateitabelle td:first-child { font-weight: 600; white-space: nowrap; }
.wp-block-table.ws-tools-dateitabelle td:nth-child(2) { white-space: nowrap; }
@media (max-width: 37.5rem) {
	.wp-block-table.ws-tools-dateitabelle thead { display: none; }
	.wp-block-table.ws-tools-dateitabelle tr { border-bottom: 1px solid var(--ws-line); display: grid; gap: .15rem .75rem; grid-template-columns: auto 1fr; padding: .75rem 0; }
	.wp-block-table.ws-tools-dateitabelle td { border: 0; padding: 0; }
	.wp-block-table.ws-tools-dateitabelle td:first-child { grid-column: 1 / -1; overflow-wrap: anywhere; white-space: normal; }
	.wp-block-table.ws-tools-dateitabelle td:nth-child(2) { color: color-mix(in srgb, var(--ws-ink) 70%, transparent); }
}

/* Validierung im Stil der Greyd-Formulare: roter Ring + Hinweis-Symbol, Meldung als Tooltip. */
.ws-tools-favicon { --ws-invalid: var(--wp--preset--color--vivid-red, #cf2e2e); }
.ws-tools-favicon .ws-tools__field { position: relative; }
.ws-tools-favicon [aria-invalid="true"].ws-tools__input, .ws-tools-favicon [aria-invalid="true"].input { border-color: var(--ws-invalid) !important; box-shadow: 0 0 0 1px var(--ws-invalid) !important; }
.ws-tools-favicon input[aria-invalid="true"].ws-tools__input:not([type="checkbox"]):not([type="radio"]), .ws-tools-favicon textarea[aria-invalid="true"].ws-tools__input {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='9' fill='%23cf2e2e'/%3E%3Cpath d='M10 5v6' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='10' cy='14.5' r='1.2' fill='%23fff'/%3E%3C/svg%3E") !important;
	background-position: right .9rem center !important; background-repeat: no-repeat !important; background-size: 1.1rem !important; padding-right: 2.75rem !important;
}
.ws-tools-favicon textarea[aria-invalid="true"].ws-tools__input { background-position: right .9rem top .9rem !important; }
.ws-tools-favicon [aria-invalid="true"] ~ .ws-tools__choice, .ws-tools-favicon .ws-tools__choice:has(> [aria-invalid="true"]) { color: var(--ws-invalid); }
.ws-tools-favicon .ws-tools__field > .ws-tools__error, .ws-tools-favicon [data-lead-field] > .ws-tools__error {
	background: var(--wp--preset--color--base, #fff); border-radius: 8px; box-shadow: 0 6px 18px rgb(0 0 0 / 14%), 0 0 0 1px rgb(0 0 0 / 6%);
	color: var(--ws-invalid); font-size: .8125rem; font-weight: 600; left: 0; line-height: 1.35; margin: 0; max-width: min(22rem, 100%);
	opacity: 0; padding: .45rem .75rem; pointer-events: none; position: absolute; top: calc(100% - .35rem); transform: translateY(-4px); width: max-content;
	transition: opacity 120ms ease, transform 120ms ease; z-index: 20;
}
.ws-tools-favicon .ws-tools__field > .ws-tools__error::before, .ws-tools-favicon [data-lead-field] > .ws-tools__error::before {
	border: 7px solid transparent; border-bottom-color: var(--wp--preset--color--base, #fff); content: ""; filter: drop-shadow(0 -1px 0 rgb(0 0 0 / 6%)); left: 1rem; position: absolute; top: -14px;
}
.ws-tools-favicon .ws-tools__field:is(:focus-within, :hover) > .ws-tools__error:not(:empty), .ws-tools-favicon [data-lead-field]:is(:focus-within, :hover) > .ws-tools__error:not(:empty) { opacity: 1; transform: none; }
.ws-tools-favicon .ws-tools__summary-error:not(:empty) { background: color-mix(in srgb, var(--ws-invalid) 8%, var(--wp--preset--color--base, #fff)); border-radius: var(--ws-inner-radius, 18px); color: var(--ws-invalid); font-size: .9rem; padding: .6rem 1rem; }