.config-intro{padding:24px 0 16px!important}.config-intro h1{font-size:clamp(1.7rem,4vw,2.8rem);line-height:1.12;margin:0 0 12px}.config-intro p{max-width:62ch;margin:0;color:#b9c5d3}.config-language{display:flex;gap:8px;justify-content:flex-end;margin-bottom:12px}.config-language button{padding:8px 16px;min-height:44px;border:1px solid var(--card-edge, #28333f);background:var(--control-surface, #101720);color:#fff;border-radius:4px}.config-language [aria-pressed=true]{background:var(--selected-surface, #10223a);border-color:var(--selected-surface, #10223a)}
.config-workspace{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:32px;align-items:start;padding:0!important}.config-preview{position:sticky;top:100px;min-width:0;margin:0;background:#000;border:0;border-left:2px solid var(--card-accent, #1674ff);border-radius:0;overflow:hidden}.config-preview canvas{display:block;width:100%;height:auto;aspect-ratio:1000/1120}.config-preview figcaption{font-size:.875rem;line-height:1.5;padding:14px 18px;color:#bac7d6;margin:0}.config-preview p{padding:0 18px;color:#e4b977;font-size:.875rem}.config-controls{min-width:0}.config-controls fieldset{padding:20px;margin:0 0 16px;border:0;border-left:2px solid var(--card-accent, #1674ff);border-radius:0;background:var(--panel, #0c1117);min-width:0}.config-controls legend{font-size:1rem;font-weight:600;padding:0 8px}.config-controls label{display:block;margin:0 0 14px;font-size:.95rem;line-height:1.5}.config-controls input:not([type=checkbox]),.config-controls select,.config-controls textarea{box-sizing:border-box;width:100%;min-width:0;min-height:46px;margin-top:6px;border:1px solid var(--card-edge, #28333f);border-radius:4px;background:var(--control-surface, #101720);color:#f4f7fb;padding:10px 12px;font:inherit;font-size:16px}.config-controls textarea{resize:vertical;min-height:130px}.config-controls input[type=range]{padding:6px 0;accent-color:#64a6ff}.config-controls .config-check{display:flex;gap:10px;align-items:flex-start}.config-check input{width:20px;height:20px;flex-shrink:0;margin-top:2px;accent-color:#3182f4}.config-controls input[type=file]{padding:8px;font-size:14px}.config-controls input::file-selector-button{padding:8px;border:0;border-radius:4px;margin-right:8px}.config-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}.config-price{font-size:1.25rem;font-weight:600;margin:12px 0 8px}.config-note{font-size:.875rem;line-height:1.5;color:#b9c5d3;margin:8px 0}.config-controls details{margin-top:14px}.config-controls summary{min-height:44px;cursor:pointer;padding:8px 0;font-weight:500}.config-controls .button{display:block;text-align:center;white-space:normal;min-height:48px;line-height:1.4;border-radius:4px;width:100%;box-sizing:border-box;padding:14px 16px;margin-top:10px;font-size:1rem}.config-controls button.secondary{background:var(--control-surface, #101720);border:1px solid var(--card-edge, #28333f);color:#e6effc}.config-controls button:disabled{opacity:.45;cursor:wait}.config-controls a[aria-disabled=true]{opacity:.45;pointer-events:none}.config-error{color:#ffbeaf;font-size:.9rem;line-height:1.4;overflow-wrap:anywhere}.config-warning{color:#efd199;font-size:.875rem;line-height:1.5}.config-workspace :focus-visible{outline:3px solid #78b4ff;outline-offset:3px}.config-controls output{float:right;color:#a3bce0}.config-controls .config-mini{background:transparent;color:#bad6ff;border:1px solid var(--card-edge, #28333f);padding:8px 14px;min-height:44px;border-radius:4px}.config-controls .config-draft{min-height:180px;font-size:.875rem}.config-process{padding:28px 0!important}.config-process details{border-top:1px solid var(--card-edge, #28333f);padding:16px 0}.config-process summary{cursor:pointer;font-size:1.05rem;min-height:44px}.config-process p{max-width:72ch}.config-controls [hidden],.config-workspace [hidden]{display:none!important}
@media(max-width:760px){.config-workspace{grid-template-columns:1fr;gap:18px}.config-preview{width:100%;justify-self:center}.config-intro{padding-top:18px!important}.config-controls fieldset{padding:16px}.config-row{gap:10px}.config-preview figcaption{padding:12px 14px}.config-language{margin-bottom:10px}}
.config-editor{min-width:0}.config-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-bottom:16px}.config-steps button{min-width:0;min-height:48px;font:inherit;font-size:14px;padding:8px 4px;border:1px solid var(--card-edge, #28333f);border-radius:4px;background:var(--control-surface, #101720);color:#dce9fa;cursor:pointer}.config-steps [aria-pressed=true]{background:var(--selected-surface, #10223a);border-color:#5c9ffb;color:white}.config-controls fieldset[hidden]{display:none!important}.config-preview figcaption{font-size:14px}.config-editor select{max-width:100%}
@media(max-width:760px){.config-workspace{gap:12px}.config-preview{position:sticky;top:78px;z-index:3;max-width:none;border-radius:0}.config-preview canvas{height:clamp(190px,32svh,280px);width:100%;object-fit:contain}.config-preview figcaption{padding:7px 12px;font-size:12px;line-height:1.3}.config-preview p:empty{display:none}.config-editor{position:relative}.config-steps{margin-bottom:10px}.config-controls fieldset{padding:12px}.config-intro p{font-size:14px}.config-intro h1{font-size:1.6rem}.config-language{margin-bottom:0}.config-row{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr)}}
@media(max-height:600px) and (max-width:760px){html body .config-preview{position:relative;top:auto}.config-preview canvas{height:180px}}
#preview-zoom{position:absolute;right:10px;top:10px;background:#102238e8;color:#e1efff;border:1px solid #557497;border-radius:4px;padding:8px 12px;min-height:44px;font-size:14px;cursor:pointer}#config-zoom{margin:auto;inset:0;max-width:95vw;width:920px;height:auto;max-height:95dvh;background:#05090e;border:1px solid #38516d;border-radius:0;padding:10px}#config-zoom::backdrop{background:#000d}#zoom-close{display:block;margin:0 0 8px auto;min-height:44px;padding:8px 20px;background:#162b44;color:#fff;border:1px solid #456587;border-radius:4px}#zoom-canvas{display:block;width:100%;max-height:calc(95dvh - 80px);object-fit:contain}
@media(max-width:760px){#preview-zoom{position:static;display:flex;width:max-content;margin:10px 12px 0 auto}}

@media(max-width:760px){.config-editor :is(input,select,textarea,button,a,summary){scroll-margin-top:calc(var(--ui-header-height,68px) + var(--ui-preview-height,260px) + 20px);scroll-margin-bottom:24px}}