/* Shared by both storefronts. Explicit styles also work without utility CSS. */
.model-source-picker { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:0 0 16px; }
.model-source-picker button { text-align:left; background:white; color:#334155; border:2px solid #dbe3ee; border-radius:16px; padding:16px 20px; min-height:82px; cursor:pointer; }
.model-source-picker strong { display:block; font-size:17px; line-height:1.4; }
.model-source-picker span { display:block; font-size:13px; line-height:1.5; margin-top:4px; }
.model-source-picker button[aria-selected="true"] { border-color:#2563eb; background:#eff6ff; color:#1e40af; }
.model-source-picker button:focus-visible, .shape-option:focus-within .shape-option-body, .shape-fields input:focus-visible, .shape-create-button:focus-visible { outline:3px solid #2563eb; outline-offset:3px; }
#source-create[hidden], #source-upload[hidden], [data-shape-field][hidden], .shape-error[hidden] { display:none!important; }
.shape-heading { font-size:20px; font-weight:750; margin:0 0 8px; color:#0f172a; }
.shape-intro { color:#475569; font-size:14px; line-height:1.6; margin-bottom:16px; }
#base-shape-controls { border:0; padding:0; margin:0; min-width:0; }
.shape-legend { color:#0f172a; font-size:14px; font-weight:700; margin:16px 0 10px; }
.shape-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.shape-option { position:relative; cursor:pointer; min-width:0; }
.shape-option input { position:absolute; top:12px; right:10px; accent-color:#2563eb; }
.shape-option-body { display:flex; flex-direction:column; height:100%; padding:12px; border:2px solid #e2e8f0; border-radius:12px; background:#f8fafc; color:#334155; }
.shape-option input:checked + .shape-option-body { border-color:#2563eb; color:#1e40af; background:#eff6ff; }
.shape-option svg { width:76px; height:56px; fill:#bfdbfe; stroke:#2563eb; stroke-width:2; margin-bottom:4px; }
.shape-option svg .shape-hole { fill:#f8fafc; }
.shape-option strong { font-size:14px; overflow-wrap:anywhere; }
.shape-option-body > span { font-size:12px; line-height:1.5; color:#475569; margin-top:4px; }
.shape-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.shape-fields label { display:block; color:#334155; font-size:13px; font-weight:600; margin-bottom:5px; }
.shape-fields input { box-sizing:border-box; width:100%; min-width:0; min-height:44px; border:1px solid #94a3b8; border-radius:8px; background:#fff; color:#0f172a; padding:10px; font-size:16px; }
.shape-fields input[aria-invalid="true"] { border-color:#b91c1c; }
.shape-note { font-size:12px; color:#475569; line-height:1.6; margin-top:10px; }
.shape-error { color:#991b1b; background:#fef2f2; border-radius:8px; padding:12px; margin:12px 0; font-size:14px; }
.shape-create-button { display:block; width:100%; min-height:48px; margin-top:16px; border:0; border-radius:10px; padding:12px 16px; font-size:15px; font-weight:700; color:white; background:#2563eb; cursor:pointer; }
.shape-create-button:hover { background:#1d4ed8; }
.shape-create-button:disabled, #base-shape-controls:disabled, .model-source-picker button:disabled { opacity:.6; cursor:wait; }
.shape-purchase-note { font-size:12px; line-height:1.6; padding:12px; margin-top:12px; border-radius:10px; background:#f1f5f9; color:#475569; }
.shape-examples { padding:24px; border:1px solid #dbe3ee; border-radius:16px; background:white; margin:24px 0; }
.shape-examples h2 { font-size:22px; font-weight:700; color:#0f172a; margin:0 0 12px; }
.shape-examples p { color:#475569; line-height:1.7; margin:8px 0; }
@media(max-width:480px) { .model-source-picker { gap:8px; } .model-source-picker button { padding:12px; } .model-source-picker strong { font-size:15px; } .model-source-picker span { font-size:12px; } .shape-examples { padding:18px; } }
@media(prefers-reduced-motion:reduce) { .model-source-picker *, #source-create * { scroll-behavior:auto; transition:none!important; } }