body[data-na=outfit]{margin:0}body[data-na=outfit] *{box-sizing:border-box}body[data-na=outfit] [hidden]{display:none!important}.oc-page{width:min(1380px,calc(100% - 48px));margin:24px auto 48px}.oc-back{color:#68565e;font-size:.875rem;text-decoration:none;display:inline-flex;align-items:center;min-height:44px}.oc-heading{text-align:center;margin:12px auto 24px}.oc-heading h1{font:700 clamp(2.3rem,5vw,3.8rem)/1.35 NANaskh,serif;color:#573647;margin:2px 0 8px}.oc-heading p{font-size:1rem;color:#68565e;margin:4px 0}.oc-heading p:first-child{font-size:.875rem;color:#9b503b;font-weight:700}.oc-setup{max-width:840px;margin:0 auto 32px;padding:24px;border:1px solid #e8d8c6;border-radius:22px;background:#fffaf4;box-shadow:0 8px 24px #57364708}.oc-fields{display:grid;grid-template-columns:1fr 1fr 1.25fr;gap:14px}.oc-fields label{display:grid;gap:7px;color:#573647;font-size:.875rem;font-weight:700;min-width:0}.oc-fields select{width:100%;min-width:0;min-height:48px;border:1px solid #d8c5b3;border-radius:12px;background:#fffdf9;color:#493d40;font-size:1rem;padding:8px}.oc-form-actions{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:20px}.oc-checkbox{display:flex;align-items:center;gap:10px;font-size:1rem;color:#573647;min-height:44px}.oc-checkbox input{width:22px;height:22px;accent-color:#573647}.oc-primary,.oc-choose{border:1px solid #573647;border-radius:16px;min-height:48px;padding:11px 24px;background:#573647;color:#fffaf4;font-size:1rem;font-weight:700;cursor:pointer}.oc-example{display:block;margin:12px auto 0;min-height:44px;border:0;background:transparent;color:#805274;text-decoration:underline;font-size:.875rem;cursor:pointer}.oc-help,.oc-note{font-size:.875rem;line-height:1.9;color:#68565e}.oc-results-heading{text-align:center;margin:26px auto 16px}.oc-results-heading h2{font:700 2.25rem/1.4 NANaskh,serif;color:#573647;margin:0}.oc-results-heading p{margin:6px 0;font-size:1rem;color:#68565e}.oc-anchor{display:flex;align-items:center;justify-content:center;gap:20px;max-width:540px;margin:18px auto 24px;background:#fffaf4;border:1px solid #e8d8c6;border-radius:20px;padding:12px 20px}.oc-anchor .oc-art{width:120px;height:125px;flex-shrink:0}.oc-anchor h3{margin:0;font-size:1.125rem;color:#573647}.oc-anchor p{margin:5px 0;font-size:.875rem;color:#68565e}.oc-status{text-align:center;color:#573647;font-size:.875rem;min-height:1.8em}.oc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:start}.oc-card{min-width:0;padding:22px 14px 18px;background:#fffaf4;border:1px solid #e8d8c6;border-radius:22px;box-shadow:0 6px 18px #57364709}.oc-card[data-selected=true]{border-color:#805274;box-shadow:0 0 0 2px #80527440}.oc-card h3{font:700 2rem/1.4 NANaskh,serif;color:#573647;text-align:center;margin:0 0 8px}.oc-card-subtitle{font-size:.875rem;color:#68565e;text-align:center;margin:0 0 12px;min-height:0}.oc-board{direction:ltr;display:grid;grid-template-columns:1.05fr 1fr .7fr;grid-template-rows:repeat(3,110px);gap:10px 6px;align-items:stretch;margin:14px 0}.oc-piece{position:relative;display:flex;align-items:center;justify-content:center;min-width:0;min-height:0;padding:5px;border:1px solid transparent;background:transparent;border-radius:13px;color:#573647;text-align:center;font:inherit;direction:rtl}button.oc-piece{cursor:pointer}button.oc-piece:hover,button.oc-piece[aria-expanded=true]{background:#f2e9df80;border-color:#d8c5b3}.oc-piece:focus-visible{outline:2px solid #805274;outline-offset:2px}.oc-piece[data-slot=top]{grid-column:1;grid-row:1/span 2;align-self:start;height:90%;margin-top:14px}.oc-piece[data-slot=bottom]{grid-column:2;grid-row:1/span 3}.oc-piece[data-slot=dress]{grid-column:1/span 2;grid-row:1/span 3}.oc-piece[data-slot=layer]{grid-column:1;grid-row:2/span 2}.oc-board[data-layer=true] .oc-piece[data-slot=top]{grid-row:1;height:100%;margin:0}.oc-piece[data-slot=hijab]{grid-column:3;grid-row:1}.oc-piece[data-slot=bag]{grid-column:3;grid-row:2}.oc-piece[data-slot=shoes]{grid-column:3;grid-row:3}.oc-board[data-hijab=false] .oc-piece[data-slot=bag]{grid-row:1/span 2;align-self:center;height:135px}.oc-art{width:100%;height:100%;min-height:0;display:flex;align-items:center;justify-content:center}.oc-art canvas{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 7px 6px #57364716)}.oc-art .oc-fallback{width:70%;aspect-ratio:1;border-radius:14px;border:1px solid #d8c5b3;display:grid;place-items:center;font-size:.875rem;color:#573647;background:var(--piece-color)}.oc-piece-name,.oc-piece-color{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.oc-locked{position:absolute;bottom:0;left:50%;transform:translate(-50%);background:#697051;color:#fff;padding:2px 10px;border-radius:20px;font-size:.8125rem;white-space:nowrap}.oc-edit-hint{position:absolute;right:0;top:4px;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#fffaf4e6;box-shadow:0 2px 6px #57364716;font-size:1rem;color:#805274}.oc-legend{display:flex;justify-content:center;gap:10px;font-size:.875rem}.oc-legend span{padding:4px 14px;background:#f0e9e1;border-radius:20px;color:#68565e}.oc-legend span:last-child{background:#697051;color:#fff}.oc-palette{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin:22px 0}.oc-palette span{width:32px;height:32px;border-radius:50%;background:var(--swatch);border:1px solid #57364730;box-shadow:0 0 0 3px #fffaf4}.oc-editor{margin:14px 0;padding:14px 10px;background:#f7eee5;border:1px solid #e8d8c6;border-radius:16px}.oc-editor h4{font-size:.875rem;margin:0 0 12px;color:#573647;text-align:center}.oc-swatches{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.oc-swatch{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;min-height:64px;border:1px solid transparent;border-radius:12px;padding:8px 2px;background:transparent;color:#573647;font-size:.875rem;line-height:1.5;cursor:pointer}.oc-swatch[aria-pressed=true]{background:#fffaf4;border-color:#805274}.oc-swatch i{display:block;width:28px;height:28px;border-radius:50%;background:var(--swatch);border:1px solid #493d4040}.oc-editor-close{display:block;margin:10px auto 0;min-height:44px;padding:6px 16px;background:transparent;border:0;color:#805274;font-size:.875rem;text-decoration:underline;cursor:pointer}.oc-choose{display:block;width:100%;margin-top:18px}.oc-note{text-align:center;max-width:780px;margin:24px auto}.site-footer{display:flex;flex-direction:column;align-items:center;background:#573647;color:#f2d69e;text-align:center}.site-footer strong{font-size:2rem}.site-footer-contact{color:#573647;background:#f2d69e;border-radius:99px;text-decoration:none;font-weight:700}@media(max-width:1050px){.oc-grid{grid-template-columns:1fr;max-width:560px;margin:auto}.oc-board{grid-template-rows:repeat(3,130px)}.oc-card-subtitle{min-height:0}.oc-card{padding:22px}.oc-fields{grid-template-columns:1fr 1fr}.oc-fields label:last-child{grid-column:1/-1}}@media(max-width:650px){.oc-page{width:calc(100% - 28px);margin-top:12px}.oc-heading{margin-top:8px}.oc-heading h1{font-size:2.3rem}.oc-setup{padding:18px 14px}.oc-card{padding:18px 10px}.oc-board{grid-template-rows:repeat(3,120px);gap:4px}.oc-primary{padding-inline:14px}.oc-form-actions{gap:10px}.oc-anchor{gap:10px;padding:10px}.oc-anchor .oc-art{width:90px;height:110px}.oc-anchor h3{font-size:1rem}.oc-results-heading h2{font-size:2rem}}@media(max-width:350px){.oc-fields{grid-template-columns:1fr}.oc-form-actions{align-items:stretch;flex-direction:column}.oc-board{grid-template-rows:repeat(3,95px);gap:5px 2px}.oc-legend{font-size:.8125rem}.oc-legend span{padding:4px 10px}}.oc-shade-field{margin-top:20px;padding-top:18px;border-top:1px solid #e8d8c6}.oc-shade-field label{display:grid;gap:8px;font-size:1rem;color:#573647}.oc-shade-field select{min-height:44px;border:1px solid #d8c5b3;border-radius:12px;padding:8px;background:#fffdf9;color:#493d40;font-size:1rem}.oc-shade-swatches{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.oc-shade-swatches button{flex:1 1 85px;max-width:150px;min-height:78px;border:1px solid #e8d8c6;border-radius:12px;background:#fffdf9;color:#573647;font-size:.875rem;padding:8px;cursor:pointer}.oc-shade-swatches i{display:block;width:32px;height:32px;border-radius:50%;background:var(--swatch);border:1px solid #57364740;margin:0 auto 6px}.oc-shade-swatches button[aria-pressed=true]{outline:2px solid #573647;background:#f1e8ef}.oc-card-subtitle{line-height:1.8;min-height:6em}
