.color-mixer-container[data-v-60b3a9b0]{background-color:#fff;border:1px solid #e2e8f0;border-radius:12px;box-shadow:0 2px 8px #141b240a;margin:12px auto;max-width:1200px;padding:0 12px 12px}.color-mixer-header[data-v-60b3a9b0]{align-items:center;background-color:#fff;border-bottom:1px solid #f1f5f8;display:flex;padding:10px 4px;position:sticky;top:0;z-index:10}.header-left[data-v-60b3a9b0]{align-items:center;display:flex;gap:10px}.main-color-preview[data-v-60b3a9b0]{border:1px solid #e2e8f0;border-radius:50%;box-shadow:inset 0 0 0 1px #ffffff80;height:24px;transition:background-color .2s ease;width:24px}.header-label[data-v-60b3a9b0]{color:#141b24;font-size:13px;font-weight:600;letter-spacing:.2px}.header-actions[data-v-60b3a9b0]{display:flex;gap:8px;margin-left:auto}.action-btn[data-v-60b3a9b0]{align-items:center;background-color:#f8fafc;border:1px solid #e2e8f0;border-radius:6px;color:#454e58;cursor:pointer;display:flex;font-size:13px;font-weight:500;gap:4px;padding:5px 12px;transition:all .2s ease}.action-btn[data-v-60b3a9b0]:hover{background-color:#dbf2f5;border-color:#00828f40;color:#00535c;transform:translateY(-1px)}.action-btn[data-v-60b3a9b0]:active{transform:translateY(0)}.color-mixer-main[data-v-60b3a9b0]{display:grid;gap:12px;grid-template-columns:1fr;padding:12px 0}@media (min-width:992px){.color-mixer-main[data-v-60b3a9b0]{grid-template-columns:1fr 1fr 1fr}}.color-card[data-v-60b3a9b0]{background-color:#fff;border:1px solid #e2e8f0;border-radius:10px;box-shadow:0 2px 8px #141b240a;display:flex;flex-direction:column;gap:8px;padding:12px 14px;transition:all .2s ease}.color-card[data-v-60b3a9b0]:hover{border-color:#d8dfe4;box-shadow:0 4px 12px #141b240f}.card-title[data-v-60b3a9b0]{align-items:center;color:#141b24;display:flex;font-size:14px;font-weight:600;gap:6px;letter-spacing:.2px;margin:0}.color-indicator[data-v-60b3a9b0]{border:1px solid #e2e8f0;border-radius:50%;height:14px;width:14px}.color-indicator[data-v-60b3a9b0],.color-preview[data-v-60b3a9b0]{box-shadow:inset 0 0 0 1px #fff6}.color-preview[data-v-60b3a9b0]{border:1px solid #e2e8f0;border-radius:8px;height:56px;transition:background-color .2s ease;width:100%}.row-group[data-v-60b3a9b0]{align-items:center;display:flex;gap:8px}.control-label[data-v-60b3a9b0]{color:#5b646f;flex:0 0 34px;font-size:12px;font-weight:600;letter-spacing:.3px}.text-input[data-v-60b3a9b0]{background-color:#f8fafc;border:1px solid #e2e8f0;border-radius:6px;color:#141b24;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;outline:none;padding:5px 8px;transition:all .2s ease;width:100%}.text-input[data-v-60b3a9b0]:focus{background-color:#fff;border-color:#00828f;box-shadow:0 0 0 2px #00828f26}.color-picker[data-v-60b3a9b0]{background-color:#fff;border:1px solid #e2e8f0;border-radius:6px;cursor:pointer;flex:1;height:28px;padding:2px;transition:all .2s ease;width:100%}.color-picker[data-v-60b3a9b0]:hover{border-color:#00828f;box-shadow:0 0 0 2px #00828f26}.hex-input-group[data-v-60b3a9b0]{display:flex;flex:1}.hex-prefix[data-v-60b3a9b0]{align-items:center;background-color:#f1f5f8;border:1px solid #e2e8f0;border-radius:6px 0 0 6px;border-right:none;color:#5b646f;display:flex;font-size:12px;font-weight:600;padding:0 10px}.hex-input[data-v-60b3a9b0]{border-radius:0 6px 6px 0}.rgb-row[data-v-60b3a9b0]{display:grid;gap:6px;grid-template-columns:1fr 1fr 1fr}.rgb-item[data-v-60b3a9b0]{align-items:center;display:flex;gap:4px}.rgb-label[data-v-60b3a9b0]{color:#5b646f;flex:0 0 12px;font-size:12px;font-weight:700;text-align:center}.rgb-item .text-input[data-v-60b3a9b0]{font-size:12px;padding:4px 6px;text-align:center}.mix-control-panel[data-v-60b3a9b0]{background-color:#fff;border:1px solid #e2e8f0;border-radius:10px;box-shadow:0 2px 8px #141b240a;display:flex;flex-direction:column;gap:10px;justify-content:center;padding:12px 14px}.panel-title[data-v-60b3a9b0]{color:#141b24;font-size:14px;font-weight:600;letter-spacing:.2px;margin:0;text-align:center}.ratio-control[data-v-60b3a9b0]{display:flex;flex-direction:column;gap:4px}.ratio-labels[data-v-60b3a9b0]{color:#5b646f;display:flex;font-size:12px;font-weight:500;justify-content:space-between}.midpoints-slider[data-v-60b3a9b0],.ratio-slider[data-v-60b3a9b0]{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#f1f5f8;border-radius:3px;cursor:pointer;height:5px;outline:none;width:100%}.midpoints-slider[data-v-60b3a9b0]::-webkit-slider-thumb,.ratio-slider[data-v-60b3a9b0]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background-color:#00828f;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 6px #00828f4d;cursor:pointer;height:16px;-webkit-transition:all .2s ease;transition:all .2s ease;width:16px}.midpoints-slider[data-v-60b3a9b0]::-webkit-slider-thumb:hover,.ratio-slider[data-v-60b3a9b0]::-webkit-slider-thumb:hover{background-color:#00535c;box-shadow:0 4px 10px #00828f66;transform:scale(1.1)}.midpoints-slider[data-v-60b3a9b0]::-moz-range-thumb,.ratio-slider[data-v-60b3a9b0]::-moz-range-thumb{background-color:#00828f;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 6px #00828f4d;cursor:pointer;height:16px;width:16px}.midpoints-control[data-v-60b3a9b0]{display:flex;flex-direction:column;gap:4px}.midpoints-labels[data-v-60b3a9b0]{display:flex;justify-content:space-between}.midpoints-title[data-v-60b3a9b0]{color:#5b646f;font-size:12px;font-weight:500}.midpoints-value[data-v-60b3a9b0]{color:#00535c;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;font-weight:600}.midpoints-buttons[data-v-60b3a9b0]{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;margin-top:4px}.midpoint-btn[data-v-60b3a9b0]{background-color:#f8fafc;border:1px solid #e2e8f0;border-radius:6px;color:#454e58;cursor:pointer;font-size:12px;font-weight:500;height:26px;transition:all .2s ease;width:26px}.midpoint-btn.active[data-v-60b3a9b0]{background-color:#00828f;border-color:#00828f;box-shadow:0 2px 8px #00828f40;color:#fff}.midpoint-btn[data-v-60b3a9b0]:hover:not(.active){background-color:#dbf2f5;border-color:#00828f40;color:#00535c}.mix-visualization[data-v-60b3a9b0]{align-items:center;display:flex;gap:10px;justify-content:center;margin-top:4px}.small-color[data-v-60b3a9b0]{border:1px solid #e2e8f0;border-radius:50%;box-shadow:inset 0 0 0 1px #fff6;height:32px;width:32px}.operator[data-v-60b3a9b0]{color:#5b646f;font-size:16px;font-weight:500}.gradient-preview-section[data-v-60b3a9b0]{border-top:1px solid #f1f5f8;padding:12px 0}.section-header[data-v-60b3a9b0]{align-items:center;display:flex;justify-content:space-between;margin-bottom:10px}.section-title[data-v-60b3a9b0]{color:#141b24;font-size:14px;font-weight:600;letter-spacing:.2px;margin:0}.export-btn[data-v-60b3a9b0]{align-items:center;background-color:#dbf2f5;border:none;border-radius:6px;color:#00828f;cursor:pointer;display:inline-flex;font-size:12px;font-weight:500;gap:4px;padding:5px 12px;transition:all .2s ease}.export-btn[data-v-60b3a9b0]:hover{background-color:#00828f;color:#fff}.export-btn[data-v-60b3a9b0]:active{transform:scale(.98)}.gradient-colors-container[data-v-60b3a9b0]{border:1px solid #e2e8f0;border-radius:8px;display:flex;gap:1px;height:56px;overflow:hidden}.gradient-color-card[data-v-60b3a9b0]{cursor:pointer;flex:1;position:relative;transition:flex .3s ease}.gradient-color-card[data-v-60b3a9b0]:hover{flex:8}.color-value[data-v-60b3a9b0]{color:#fff;left:50%;opacity:0;padding:0 8px;pointer-events:none;position:absolute;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,.5);top:50%;transform:translate(-50%,-50%);transition:opacity .3s ease;width:100%}.color-value.visible[data-v-60b3a9b0]{opacity:1}.color-value span[data-v-60b3a9b0]{display:block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;font-weight:600}.result-section[data-v-60b3a9b0]{border-top:1px solid #f1f5f8;padding:12px 0 0}.result-title[data-v-60b3a9b0]{color:#141b24;font-size:14px;font-weight:600;letter-spacing:.2px;margin:0 0 10px}.result-content[data-v-60b3a9b0]{display:grid;gap:10px;grid-template-columns:1fr}@media (min-width:768px){.result-content[data-v-60b3a9b0]{grid-template-columns:1fr 1fr}}.result-preview[data-v-60b3a9b0]{align-items:center;background-color:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;display:flex;justify-content:center;min-height:76px;padding:8px}.result-color[data-v-60b3a9b0]{border:1px solid #e2e8f0;border-radius:6px;box-shadow:inset 0 0 0 1px #fff6;height:100%;min-height:60px;transition:background-color .2s ease;width:100%}.result-codes[data-v-60b3a9b0]{justify-content:center}.code-group[data-v-60b3a9b0],.result-codes[data-v-60b3a9b0]{display:flex;flex-direction:column;gap:8px}.hex-code-group[data-v-60b3a9b0]{display:flex}.result-input[data-v-60b3a9b0]{background-color:#f8fafc;border-radius:0}.hex-code-group .result-input[data-v-60b3a9b0]{border-left:none;border-right:none}.copy-btn[data-v-60b3a9b0]{align-items:center;background-color:#dbf2f5;border:none;border-radius:0 6px 6px 0;color:#00828f;cursor:pointer;display:inline-flex;font-size:12px;font-weight:500;gap:4px;padding:5px 12px;transition:all .2s ease;white-space:nowrap}.copy-btn[data-v-60b3a9b0]:hover{background-color:#00828f;color:#fff}.copy-btn[data-v-60b3a9b0]:active{transform:scale(.98)}.rgb-code-group[data-v-60b3a9b0]{display:flex;gap:6px}.rgb-input[data-v-60b3a9b0]{flex:1}.rgb-copy-btn[data-v-60b3a9b0],.rgb-input[data-v-60b3a9b0]{border-radius:6px}.notification[data-v-60b3a9b0]{align-items:center;background-color:#141b24eb;border-radius:8px;bottom:24px;box-shadow:0 8px 24px #141b2426;color:#fff;display:flex;gap:8px;opacity:0;padding:9px 16px;pointer-events:none;position:fixed;right:24px;transform:translateY(20px);transition:opacity .3s ease,transform .3s ease;z-index:100}.notification.visible[data-v-60b3a9b0]{opacity:1;transform:translateY(0)}.notification-icon[data-v-60b3a9b0]{color:#10b981;font-size:14px;font-weight:700}.notification-text[data-v-60b3a9b0]{font-size:13px}@media (max-width:767px){.color-mixer-container[data-v-60b3a9b0]{border-radius:10px;margin:8px auto;padding:0 10px 10px}.color-mixer-header[data-v-60b3a9b0]{padding:10px 0}.card-title[data-v-60b3a9b0]{font-size:13px}.midpoints-buttons[data-v-60b3a9b0]{gap:3px}.midpoint-btn[data-v-60b3a9b0]{height:24px;width:24px}.color-value span[data-v-60b3a9b0],.midpoint-btn[data-v-60b3a9b0]{font-size:11px}.notification[data-v-60b3a9b0]{bottom:20px;left:20px;right:20px}}