.color-converter-container[data-v-418ccc73]{max-width:1000px;margin:0 auto;padding:20px}.converter-header[data-v-418ccc73]{text-align:center;margin-bottom:30px}.converter-header h2[data-v-418ccc73]{font-size:28px;color:#333;margin:0 0 8px}.subtitle[data-v-418ccc73]{font-size:14px;color:#666;margin:0}.converter-layout[data-v-418ccc73]{background:var(--em-bg-card);border-radius:12px;padding:24px;box-shadow:0 2px 12px #00000014}.color-preview-section[data-v-418ccc73]{margin-bottom:24px}.preview-box[data-v-418ccc73]{height:120px;border-radius:8px;display:flex;align-items:center;justify-content:center;border:2px solid #e8e8e8;box-shadow:0 2px 8px #0000001a}.color-value[data-v-418ccc73]{font-size:18px;font-weight:600;color:#333;text-shadow:0 1px 2px rgba(255,255,255,.8);background:#ffffffe6;padding:8px 16px;border-radius:4px}.color-input-section[data-v-418ccc73]{margin-bottom:24px}.input-group[data-v-418ccc73]{margin-bottom:16px}.rgb-inputs[data-v-418ccc73],.hsl-inputs[data-v-418ccc73]{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.conversion-results[data-v-418ccc73]{margin-bottom:24px}.conversion-results h3[data-v-418ccc73]{font-size:18px;color:#333;margin:0 0 16px}.result-grid[data-v-418ccc73]{display:grid;gap:16px}.result-item label[data-v-418ccc73]{display:block;margin-bottom:8px;font-size:14px;color:#666;font-weight:500}.common-colors[data-v-418ccc73]{margin-top:24px}.common-colors h3[data-v-418ccc73]{font-size:18px;color:#333;margin:0 0 16px}.color-grid[data-v-418ccc73]{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:12px}.color-item[data-v-418ccc73]{height:80px;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;border:2px solid #e8e8e8;transition:all .3s;position:relative;overflow:hidden}.color-item[data-v-418ccc73]:hover{transform:translateY(-2px);box-shadow:0 4px 12px #00000026;border-color:#409eff}.color-name[data-v-418ccc73]{font-size:12px;color:#333;text-shadow:0 1px 2px rgba(255,255,255,.8);font-weight:500;background:#ffffffe6;padding:4px 8px;border-radius:4px}@media (max-width: 768px){.color-converter-container[data-v-418ccc73]{padding:16px}.converter-header h2[data-v-418ccc73]{font-size:24px}.converter-layout[data-v-418ccc73]{padding:16px}.rgb-inputs[data-v-418ccc73],.hsl-inputs[data-v-418ccc73]{grid-template-columns:1fr}.color-grid[data-v-418ccc73]{grid-template-columns:repeat(auto-fill,minmax(80px,1fr))}.color-item[data-v-418ccc73]{height:60px}}