/* OutfitAI personal color chooser. Isolated from existing UI. */
#outfitai-custom-colors-v1 { box-sizing:border-box; width:100%; margin:24px 0; color:#111827; font-family:inherit; }
#outfitai-custom-colors-v1 * { box-sizing:border-box; }
#outfitai-custom-colors-v1 .oc-shell { border:1px solid #e1e7f0; background:#fff; border-radius:20px; padding:22px; box-shadow:0 7px 26px rgba(13,32,70,.045); }
#outfitai-custom-colors-v1 .oc-header { display:flex; gap:12px; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; }
#outfitai-custom-colors-v1 h3 { margin:0; font-size:20px; line-height:1.4; font-weight:800; color:#161f31; }
#outfitai-custom-colors-v1 .oc-sub { margin:5px 0 0; font-size:13px; color:#64748b; line-height:1.55; }
#outfitai-custom-colors-v1 .oc-label { display:inline-flex; align-items:center; padding:5px 10px; background:#f3f0ff; color:#594be3; font-size:12px; font-weight:800; border-radius:20px; }
#outfitai-custom-colors-v1 .oc-main { display:grid; grid-template-columns:minmax(250px, .85fr) minmax(300px, 1.15fr); gap:22px; margin-top:17px; }
#outfitai-custom-colors-v1 .oc-preview { background:linear-gradient(135deg,#f7f9fd,#eef2f8); border:1px solid #e3e9f2; border-radius:16px; padding:17px; }
#outfitai-custom-colors-v1 .oc-pair { display:flex; align-items:center; justify-content:center; gap:13px; min-height:146px; }
#outfitai-custom-colors-v1 .oc-item { display:flex; align-items:center; flex-direction:column; gap:7px; min-width:0; }
#outfitai-custom-colors-v1 .oc-item svg { width:92px; height:92px; filter:drop-shadow(0 4px 7px rgba(13,29,52,.10)); }
#outfitai-custom-colors-v1 .oc-item-label { font-weight:750; font-size:12px; color:#465366; text-align:center; }
#outfitai-custom-colors-v1 .oc-plus { font-size:24px; font-weight:300; color:#9ba7b9; }
#outfitai-custom-colors-v1 .oc-choice-result { text-align:center; margin-top:8px; font-size:14px; font-weight:800; color:#252e43; line-height:1.45; }
#outfitai-custom-colors-v1 .oc-note { margin:9px 0 0; text-align:center; font-size:11px; line-height:1.55; color:#64748b; }
#outfitai-custom-colors-v1 .oc-right { min-width:0; }
#outfitai-custom-colors-v1 .oc-section-title { font-weight:800; font-size:13px; margin:2px 0 10px; color:#334155; }
#outfitai-custom-colors-v1 .oc-chips { display:flex; gap:7px; flex-wrap:wrap; }
#outfitai-custom-colors-v1 .oc-chip { appearance:none; display:inline-flex; align-items:center; gap:7px; border:1px solid #dae1eb; background:#fff; color:#334155; border-radius:12px; padding:7px 9px; font:inherit; font-size:12px; cursor:pointer; min-height:35px; transition:background .1s,border-color .1s; }
#outfitai-custom-colors-v1 .oc-chip:hover { background:#f7f8fe; border-color:#aca6ef; }
#outfitai-custom-colors-v1 .oc-chip[aria-pressed="true"] { background:#f3f0ff; border-color:#6355ee; box-shadow:0 0 0 1px #6355ee inset; font-weight:800; }
#outfitai-custom-colors-v1 .oc-swatch { width:20px; height:20px; flex:none; border:1px solid rgba(12,28,52,.15); border-radius:6px; }
#outfitai-custom-colors-v1 .oc-group { margin-top:16px; }
#outfitai-custom-colors-v1 .oc-group-title { margin:0 0 8px; font-weight:750; font-size:12px; color:#667085; }
#outfitai-custom-colors-v1 .oc-legal { margin:18px 0 0; border-top:1px solid #edf0f4; padding-top:13px; color:#667085; font-size:12px; line-height:1.6; }
@media(max-width:800px) { #outfitai-custom-colors-v1 .oc-main { grid-template-columns:1fr; } #outfitai-custom-colors-v1 .oc-shell { padding:16px; } }
@media(max-width:480px) { #outfitai-custom-colors-v1 .oc-chip { font-size:11px; padding:6px; } #outfitai-custom-colors-v1 .oc-item svg { width:74px; height:74px; } }