.favicon-field { margin-top: 14px; }
.favicon-field label { display: block; margin-bottom: 7px; }
.favicon-field :is(select, input[type="text"]) { width: 100%; }
.favicon-field input[type="color"] { width: 100%; height: 36px; padding: 3px; border: 2px solid var(--eyy-button-border); border-radius: 6px; background: #000; cursor: pointer; }
.favicon-field input[type="color"]:disabled { opacity: .45; cursor: default; }
.favicon-hint { margin: 14px 0 0; color: #aaa8b5; font-size: .8rem; }
.favicon-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.favicon-actions button { width: 100%; }
body > .tool-page--image-editor .favicon-stage img[data-workspace-image] { display: none !important; }
.favicon-stage #favicon-preview { display: block; width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; }
.favicon-previews { position: absolute; z-index: 2; bottom: 8px; left: 8px; display: flex; align-items: end; gap: 16px; pointer-events: none; }
.favicon-workspace:not([data-ready]) .favicon-previews { visibility: hidden; }
.favicon-previews > div { display: grid; justify-items: center; gap: 4px; color: #ddd; font-size: .75rem; font-variant-numeric: tabular-nums; text-shadow: 0 1px 3px #000; }
.favicon-previews canvas { display: block; image-rendering: auto; }