.color-convert-grid{display: grid;grid-template-columns: minmax(0,1.15fr) minmax(300px,.85fr);gap: 16px;align-items: stretch}.color-convert-panel{height: 100%}.color-convert-panel .form-control-group-header{flex: 0 0 auto;padding-top: 6px;padding-bottom: 6px}.color-convert-panel .form-control-group-header>span{flex: 1;min-width: 0}.color-convert-panel .form-control-group-header .btn-sm{min-height: 28px;padding-top: 4px;padding-bottom: 4px}.color-input-actions{display: flex;flex: 0 0 auto;gap: 8px}.color-input-body{display: grid;grid-template-columns: auto minmax(0,1fr);gap: 12px;align-items: start}.color-picker-wrap{display: grid;gap: 6px;justify-items: center;color: var(--text-2);font-size: 12.5px;line-height: 1.3}.color-picker-wrap input[type="color"]{width: 54px;height: 44px;padding: 0;border: 1px solid var(--border);border-radius: var(--radius);background: var(--bg);cursor: pointer}.color-picker-label{white-space: nowrap}.color-input-group .btn{min-width: 112px;justify-content: center}.color-message{grid-column: 1 / -1;display: flex;align-items: flex-start;gap: 8px;padding: 10px 12px;border: 1px solid #fecaca;border-radius: var(--radius);background: var(--danger-soft);color: var(--danger);font-size: 13.5px;line-height: 1.45}.color-input-note{grid-column: 1 / -1;margin: 0;color: var(--text-2);font-size: 13px;line-height: 1.45}.color-preset-row{grid-column: 1 / -1;display: flex;flex-wrap: wrap;gap: 8px}.color-swatch{width: 34px;height: 34px;border: 1px solid var(--border);border-radius: var(--radius);background: linear-gradient(45deg,#d1d5db 25%,transparent 25%),linear-gradient(-45deg,#d1d5db 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#d1d5db 75%),linear-gradient(-45deg,transparent 75%,#d1d5db 75%);background-color: #fff;background-position: 0 0,0 8px,8px -8px,-8px 0;background-size: 16px 16px;cursor: pointer}.color-swatch::after{display: block;width: 100%;height: 100%;border-radius: calc(var(--radius) - 1px);background: var(--swatch);content: ""}.color-swatch:focus,.color-swatch:hover{border-color: var(--primary);box-shadow: 0 0 0 3px var(--primary-soft)}.color-preview-body{display: grid;gap: 12px}.color-preview-area{position: relative;min-height: 172px;overflow: hidden;border: 1px solid var(--border);border-radius: var(--radius);background: linear-gradient(45deg,#d1d5db 25%,transparent 25%),linear-gradient(-45deg,#d1d5db 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#d1d5db 75%),linear-gradient(-45deg,transparent 75%,#d1d5db 75%);background-color: #fff;background-position: 0 0,0 10px,10px -10px,-10px 0;background-size: 20px 20px}.color-preview-area>i{position: absolute;inset: 0;display: block;background: transparent}.color-preview-meta{display: grid;gap: 8px}.color-preview-meta p{display: flex;align-items: center;justify-content: space-between;gap: 10px;margin: 0;padding: 8px 10px;border: 1px solid var(--border);border-radius: var(--radius);background: var(--bg-soft)}.color-preview-meta span{color: var(--text-2);font-size: 12.5px}.color-preview-meta strong{min-width: 0;overflow: hidden;color: var(--text);font-family: var(--mono-font);font-size: 13px;text-overflow: ellipsis;white-space: nowrap}.color-results-panel{margin-top: 16px}.color-format-grid{display: grid;grid-template-columns: repeat(2,minmax(0,1fr));gap: 12px;width: 100%}.color-format-item{display: grid;gap: 6px;margin: 0}.color-format-item>span{color: var(--text-2);font-size: 12.5px;line-height: 1.35}.color-format-item input{font-family: var(--mono-font);font-size: 13px}.color-copy-btn,.btn-copy-all{min-width: 78px;justify-content: center}:root[data-theme="dark"] .color-message{border-color: #7f1d1d;background: rgba(127,29,29,.18)}@media (max-width: 991px){.color-convert-grid{grid-template-columns: 1fr}}@media (max-width: 640px){.color-input-body{grid-template-columns: 1fr}.color-picker-wrap{grid-template-columns: auto minmax(0,1fr);justify-items: start;align-items: center}.color-format-grid{grid-template-columns: 1fr}.color-input-actions{display: grid;grid-template-columns: repeat(2,auto);gap: 6px}.color-input-group{display: grid;grid-template-columns: 1fr}.color-input-group .input-group-append,.color-input-group .btn{width: 100%}.color-input-group .input-group-append .btn{border-radius: var(--radius)}.color-results-header{display: grid;grid-template-columns: minmax(0,1fr) auto;align-items: center;column-gap: 8px;padding-top: 6px;padding-bottom: 6px}.color-results-header>span{display: block;min-width: 0;overflow: hidden;text-overflow: ellipsis;white-space: nowrap}.color-convert-tool .btn-copy-all{width: 82px;min-width: 82px;padding-right: 8px;padding-left: 8px;white-space: nowrap}}