input[type="color"] { -webkit-appearance: none; appearance: none; box-sizing: border-box; flex: none; inline-size: 2.5rem; block-size: 2.5rem; padding: .1875rem; border: 1px solid #d6dde8; border-radius: .625rem; background: #fff; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease; }
input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
input[type="color"]::-webkit-color-swatch { border: 0; border-radius: .4375rem; box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .12); }
input[type="color"]::-moz-color-swatch { border: 0; border-radius: .4375rem; box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .12); }
input[type="color"]:hover { border-color: #9aa8bc; }
input[type="color"]:focus-visible { outline: 2px solid #245cf0; outline-offset: 2px; }
input[type="color"]:disabled { opacity: .45; cursor: not-allowed; }
.app-color-field { display: flex; align-items: center; gap: .625rem; box-sizing: border-box; width: 100%; min-width: 0; height: 2.875rem; padding: .3125rem .75rem .3125rem .3125rem; border: 1px solid #cbd5e1; border-radius: .75rem; background: #fff; transition: border-color .15s ease, box-shadow .15s ease; }
.app-color-field:hover { border-color: #9aa8bc; }
.app-color-field:focus-within { border-color: #245cf0; box-shadow: 0 0 0 4px rgba(36, 92, 240, .12); }
.app-color-field:has(input:disabled) { opacity: .55; }
.app-color-field > input[type="color"] { inline-size: 2.125rem; block-size: 2.125rem; padding: 0; border: 0; border-radius: .5rem; }
.app-color-field > input[type="color"]::-webkit-color-swatch { border-radius: .5rem; }
.app-color-field > input[type="color"]::-moz-color-swatch { border-radius: .5rem; }
.app-color-field > input[type="color"]:focus-visible { outline: 0; }
.app-color-field > .app-color-hex { flex: 1 1 auto; width: 100%; min-width: 0; padding: 0; border: 0; background: transparent; color: #0f172a; font: 600 .875rem/1.25rem ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .04em; text-transform: uppercase; outline: 0; box-shadow: none; }
.app-color-field > .app-color-hex::placeholder { color: #94a3b8; }