/* Customer steps share the professional editor's palette and working canvas. */
.quick-screen { background:#fff; color:var(--primary); }
.client-mode.client-quick-visible #kb-dismiss-btn { display:none!important; }
.quick-screen .sr-only { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.quick-header { height:48px; flex-shrink:0; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:2px 16px; background:var(--primary); color:#fff; }
.quick-header strong { font-size:15px; font-weight:600; }
.quick-header .btn { min-height:44px; padding-inline:12px; font-size:14px; border-radius:4px; color:inherit; }
.quick-header .btn:hover { background:rgba(255,255,255,.12); }
.quick-steps { height:40px; flex-shrink:0; display:flex; justify-content:center; background:#fff; border-bottom:1px solid var(--border); }
.quick-steps button { min-width:160px; padding:0 20px; border:0; border-bottom:3px solid transparent; background:none; color:var(--text-muted); font:inherit; font-size:14px; cursor:pointer; }
.quick-steps button span { margin-right:8px; font-variant-numeric:tabular-nums; }
.quick-steps button[aria-current=step] { color:var(--primary); border-bottom-color:var(--accent); font-weight:650; }
.quick-workspace.screen-content { min-height:0; padding:0; }
.quick-layout { width:100%; min-height:100%; display:grid; grid-template-columns:minmax(280px,1fr) minmax(320px,440px); align-items:stretch; }
.quick-preview { position:sticky; top:0; align-self:start; min-height:calc(var(--app-height,100dvh) - 148px); background:#c7c7c7; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:56px 52px 36px; border-right:1px solid #b5b9bd; }
#quick-window { position:relative; width:min(75%,440px,calc((var(--app-height,100dvh) - 310px) * var(--quick-ratio,1.1))); flex:none; border:14px solid #9e9e9e; outline:1px solid rgba(0,0,0,.3); background:#e8f0f5; display:flex; align-items:center; justify-content:center; color:var(--primary); }
#quick-window::before { content:""; position:absolute; inset:-10px; pointer-events:none; border:1px solid rgba(255,255,255,.45); }
#quick-window.quick-window-tinted { background:#a7adb1; }
#quick-window.quick-window-mesh { background:#d7dddf; outline:1px dotted #7c898f; outline-offset:-18px; }
#quick-width-label { position:absolute; left:-14px; right:-14px; top:-43px; padding-bottom:7px; border-bottom:1px solid #52616c; text-align:center; white-space:nowrap; font-size:14px; font-weight:600; font-variant-numeric:tabular-nums; }
#quick-height-label { position:absolute; right:-42px; top:50%; transform:translate(50%,-50%) rotate(-90deg); white-space:nowrap; font-size:14px; font-weight:600; font-variant-numeric:tabular-nums; }
#quick-material-label { font-size:14px; line-height:1.4; text-align:center; max-width:180px; padding:12px; }
.quick-preview p { font-size:14px; line-height:1.4; margin-top:28px; text-align:center; color:#34434e; }
.quick-fields { min-width:0; padding:28px 28px 20px; }
.quick-progress { font-size:13px; color:#52616c; margin-bottom:8px; }
.quick-fields h1 { font-size:28px; line-height:1.15; letter-spacing:-.5px; margin:0 0 16px; font-weight:650; }
.quick-hint { font-size:15px; line-height:1.5; margin:0 0 22px; color:#52616c; }
.quick-dimensions { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:16px; }
.quick-dimensions label { display:flex; flex-direction:column; gap:8px; font-size:15px; font-weight:600; }
.quick-dimensions input { width:100%; min-width:0; min-height:50px; border:1px solid #aebbc6; border-radius:4px; padding:11px 12px; font:inherit; font-size:18px; font-weight:500; font-variant-numeric:tabular-nums; color:var(--primary); background:#fff; }
.quick-dimensions input::placeholder { font-size:14px; font-weight:400; color:#6b7280; }
.quick-dimensions input:focus { border-color:var(--primary-lt); }
.quick-choices { border:0; padding:0; margin:0 0 18px; display:grid; gap:8px; min-width:0; }
.quick-choices legend { font-size:15px; font-weight:600; margin-bottom:10px; }
.quick-choice { display:flex; align-items:center; gap:12px; min-height:56px; padding:12px; border:1px solid #cbd5dd; border-radius:4px; cursor:pointer; }
.quick-choice:hover { border-color:var(--primary-lt); }
.quick-choice:has(input:checked) { border-color:var(--primary); background:var(--primary-pale); box-shadow:inset 0 0 0 1px var(--primary); }
.quick-choice input { width:18px; height:18px; flex-shrink:0; accent-color:var(--primary); }
.quick-choice strong { display:block; font-size:16px; line-height:1.3; font-weight:600; overflow-wrap:anywhere; }
.quick-choice small { display:block; font-size:13px; line-height:1.4; margin-top:4px; color:#52616c; }
.quick-colors { grid-template-columns:1fr 1fr; }
.quick-colors .quick-choice { flex-wrap:wrap; gap:8px; padding:11px; }
.quick-colors .quick-choice>span:last-child { flex:1 0 75px; }
.quick-swatch { width:28px; height:28px; border:1px solid rgba(26,58,92,.35); border-radius:4px; flex-shrink:0; }
.quick-text-button { display:block; border:0; background:none; color:var(--primary-lt); font:inherit; font-size:14px; line-height:1.4; text-align:left; text-decoration:underline; text-underline-offset:4px; min-height:44px; padding:10px 0; cursor:pointer; }
.quick-summary { font-size:15px; line-height:1.45; margin:0; }
.quick-summary>div { display:grid; grid-template-columns:1fr 1.3fr; gap:16px; border-top:1px solid var(--border); padding:12px 0; }
.quick-summary dt { color:#52616c; }
.quick-summary dd { margin:0; font-weight:550; }
.quick-estimate { font-size:13px; margin-top:16px; margin-bottom:8px; }
#quick-error { color:var(--danger); font-size:14px; line-height:1.45; margin-top:12px; }
#quick-error:empty { display:none; }
.quick-footer { height:calc(60px + var(--safe-bottom)); min-height:calc(60px + var(--safe-bottom)); padding:0 20px var(--safe-bottom); display:flex; align-items:center; justify-content:flex-end; gap:24px; border-top:1px solid var(--border); background:#fff; flex-shrink:0; }
.quick-total { margin-right:auto; display:flex; align-items:baseline; gap:12px; }
.quick-total span { color:#52616c; font-size:13px; }
.quick-total strong { font-size:24px; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; }
.quick-footer .btn { min-height:44px; min-width:180px; font-size:16px; border-radius:4px; }
.quick-footer .btn--primary { background:var(--accent); }
.quick-footer .btn--primary:hover { background:#c94f00; }
.quick-mobile-step { display:none; }
.quick-screen :focus-visible { outline:3px solid var(--primary-lt); outline-offset:3px; }
.quick-header :focus-visible { outline-color:#fff; }
#client-simple-mode { white-space:nowrap; }
.quick-steps-dialog { position:fixed; inset:auto 12px calc(72px + env(safe-area-inset-bottom)); margin:0 auto; width:min(420px,calc(100% - 24px)); padding:12px; border:1px solid var(--border); border-radius:4px; color:var(--primary); background:#fff; }
.quick-steps-dialog::backdrop { background:rgba(26,58,92,.3); }
.quick-steps-dialog>div { display:flex; align-items:center; justify-content:space-between; padding-left:10px; }
.quick-steps-dialog button { display:block; width:100%; text-align:left; min-height:44px; padding:10px; border:0; background:none; color:inherit; font:inherit; font-size:16px; cursor:pointer; }
.quick-steps-dialog #quick-steps-close { width:44px; text-align:center; font-size:24px; }
.quick-steps-dialog button[aria-current=step] { background:var(--primary-pale); font-weight:600; }
@media(min-width:701px) and (max-width:1000px) {
 .quick-layout { grid-template-columns:minmax(280px,1fr) 360px; }
 .quick-fields { padding:24px 22px 20px; }
 .quick-preview { padding-inline:40px; }
 .quick-steps button { min-width:0; flex:1; padding:0 8px; }
 .quick-colors { grid-template-columns:1fr; }
 .quick-colors .quick-choice { flex-wrap:nowrap; }
}
@media(max-width:700px) {
 .quick-header { height:calc(48px + var(--safe-top)); padding:var(--safe-top) max(8px,var(--safe-right)) 0 max(8px,var(--safe-left)); gap:4px; }
 .quick-header strong { display:none; }
 .quick-header .btn { padding-inline:8px; }
 .quick-steps { display:none; }
 .quick-layout { display:flex; flex-direction:column; min-height:100%; width:100%; }
 .quick-fields { width:100%; max-width:520px; margin-inline:auto; padding:22px max(18px,var(--safe-right)) 20px max(18px,var(--safe-left)); }
 .quick-preview { display:none; }
 .quick-screen[data-step="3"] .quick-preview { display:flex; position:static; order:2; width:100%; min-height:310px; padding:44px 44px 24px; border-right:0; border-top:1px solid #b5b9bd; }
 #quick-window { width:min(65%,280px,calc(205px * var(--quick-ratio,1.1))); border-width:12px; }
 #quick-window::before { inset:-8px; }
 #quick-width-label { left:-12px; right:-12px; font-size:13px; top:-37px; padding-bottom:5px; }
 #quick-height-label { right:-34px; font-size:13px; }
 #quick-material-label { font-size:13px; padding:8px; }
 .quick-preview p { font-size:13px; margin-top:20px; }
 .quick-progress { margin-bottom:7px; }
 .quick-fields h1 { font-size:28px; }
 .quick-hint { font-size:16px; margin-bottom:20px; }
 .quick-dimensions label { font-size:16px; }
 .quick-dimensions input { font-size:18px; padding:10px; }
 .quick-footer { padding-inline:max(12px,var(--safe-left)) max(12px,var(--safe-right)); gap:8px; box-shadow:0 -2px 10px rgba(26,58,92,.07); }
 .quick-total { flex-direction:column; gap:1px; }
 .quick-total span { font-size:11px; }
 .quick-total strong { font-size:20px; line-height:1.1; }
 .quick-footer .btn { min-width:0; max-width:148px; font-size:14px; padding:8px 12px; }
 button.quick-mobile-step { display:block; width:64px; min-height:44px; flex-shrink:0; border:1px solid var(--border); background:#fff; border-radius:4px; color:var(--primary); font:inherit; font-size:14px; }
 .quick-summary>div { gap:14px; }
 #client-simple-mode { font-size:12px; padding-inline:6px; }
}
@media(max-width:350px) {
 .quick-fields { padding-inline:16px; }
 .quick-colors { grid-template-columns:1fr; }
 .quick-colors .quick-choice { flex-wrap:nowrap; }
 .quick-dimensions { gap:10px; }
 .quick-dimensions input { font-size:18px; }
 .quick-dimensions input::placeholder { font-size:12px; }
 .quick-footer { padding-inline:8px; }
 .quick-total strong { font-size:17px; }
 .quick-footer .btn { max-width:124px; }
 button.quick-mobile-step { width:58px; }
}