.color-view[data-v-d79feefd]{background:#f8fafc;padding:48px 24px 24px}.color-container[data-v-d79feefd]{width:min(960px,100%);margin:0 auto}.color-hero[data-v-d79feefd]{margin-bottom:24px}.color-hero h1[data-v-d79feefd]{color:#0f172a;letter-spacing:-.02em;margin:0 0 8px;font-size:clamp(32px,5vw,48px);font-weight:800}.color-hero p[data-v-d79feefd]{color:#64748b;margin:0;font-size:16px;line-height:1.6}.color-card[data-v-d79feefd]{background:#fff;border:2px solid #cbd5e1;border-radius:24px;padding:24px 28px;overflow:hidden;box-shadow:0 4px 24px #0f172a0f}.color-picker-row[data-v-d79feefd]{gap:24px;margin-bottom:24px;display:flex}.color-input-section[data-v-d79feefd]{flex:1}.color-preview-section[data-v-d79feefd]{flex-shrink:0}.color-preview[data-v-d79feefd]{border:2px solid #cbd5e1;border-radius:16px;width:120px;height:120px;box-shadow:0 4px 12px #0000001a}.color-panel-label[data-v-d79feefd]{color:#475569;margin-bottom:10px;font-size:13px;font-weight:600}.output-header[data-v-d79feefd]{justify-content:space-between;align-items:center;margin-top:24px;margin-bottom:10px;display:flex}.add-row-btn[data-v-d79feefd]{color:#0f172a;height:auto;box-shadow:none;background:#f8fafc;border:2px solid #cbd5e1;border-radius:12px;padding:6px 14px;font-size:13px;font-weight:500}.add-row-btn[data-v-d79feefd]:hover{color:#0f172a;background:#f1f5f9;border-color:#94a3b8}.input-row[data-v-d79feefd]{gap:12px;display:flex}.output-row[data-v-d79feefd]{gap:12px;margin-top:10px;display:flex}.remove-btn[data-v-d79feefd]{color:#ef4444;height:auto;box-shadow:none;background:#fef2f2;border:2px solid #ef4444;border-radius:16px;flex-shrink:0;padding:16px 20px;font-size:16px;font-weight:600}.remove-btn[data-v-d79feefd]:hover:not(:disabled){color:#dc2626;background:#fee2e2;border-color:#dc2626}.remove-btn[data-v-d79feefd]:disabled{color:#cbd5e1;cursor:not-allowed;background:#f1f5f9;border-color:#e2e8f0}.color-info-grid[data-v-d79feefd]{grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px;display:grid}.color-info-item[data-v-d79feefd]{background:#f8fafc;border-radius:12px;flex-direction:column;gap:8px;padding:16px;display:flex}.info-label[data-v-d79feefd]{color:#94a3b8;letter-spacing:.5px;font-size:12px;font-weight:600}.info-value[data-v-d79feefd]{color:#0f172a;font-family:monospace;font-size:14px;font-weight:500}.color-input[data-v-d79feefd]{flex:1}.color-input[data-v-d79feefd] .el-input__wrapper{height:auto;box-shadow:none;background:#f8fafc;border:2px solid #cbd5e1;border-radius:16px;padding:16px 20px;transition:all .2s}.color-input[data-v-d79feefd] .el-input__wrapper:hover{background:#f1f5f9;border-color:#94a3b8}.color-input[data-v-d79feefd] .el-input__wrapper:focus-within{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61f}.color-input[data-v-d79feefd] .el-input__inner{color:#0f172a;font-family:monospace;font-size:14px;font-weight:500}.color-input[data-v-d79feefd] .el-input__placeholder{color:#94a3b8}.color-picker[data-v-d79feefd] .el-color-picker__trigger{background:#f8fafc;border:2px solid #cbd5e1;border-radius:16px;width:auto;height:auto;padding:12px}.color-picker[data-v-d79feefd] .el-color-picker__trigger:hover{border-color:#94a3b8}.color-picker[data-v-d79feefd] .el-color-picker__color{border-radius:12px}.format-select[data-v-d79feefd]{flex-shrink:0;width:140px}.format-select[data-v-d79feefd] .el-select__wrapper{height:auto;box-shadow:none;background:#f8fafc;border:2px solid #cbd5e1;border-radius:16px;padding:16px 20px;transition:all .2s}.format-select[data-v-d79feefd] .el-select__wrapper:hover{background:#f1f5f9;border-color:#94a3b8}.format-select[data-v-d79feefd] :scope.is-focus .el-select__wrapper{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61f}.format-select[data-v-d79feefd] .el-select__selected-item{color:#0f172a;font-size:14px;font-weight:500}.format-select[data-v-d79feefd] .el-select__placeholder{color:#94a3b8}@media (width<=640px){.color-picker-row[data-v-d79feefd]{flex-direction:column}.color-preview[data-v-d79feefd]{width:100%;height:80px}.color-info-grid[data-v-d79feefd]{grid-template-columns:repeat(2,1fr)}}