/* Shared workbench. Static header/hero/footer remain owned by the page shell. */
[hidden] { display:none !important; }
.pq-app { color:var(--pq-text,#47474f); background:var(--pq-bg,#f5f5fa); min-height:calc(100dvh - var(--pq-header-h,60px)); font-family:inherit; }
body[data-state=empty] .pq-app { min-height:0; }
.pq-app *, .pq-app *::before, .pq-app *::after { box-sizing:border-box; }
.pq-app button, .pq-app input, .pq-app select { font:inherit; }
.pq-app button, .pq-app a { -webkit-tap-highlight-color:transparent; overflow-wrap:anywhere; }
.pq-primary span { min-width:0; }
.pq-app button { cursor:pointer; }
.pq-app button:disabled { cursor:not-allowed; opacity:.5; }
.pq-app :focus-visible { outline:3px solid var(--pq-primary,#4d90fe); outline-offset:3px; }
body[data-state=workspace] .pq-footer, body[data-state=processing] .pq-footer { display:none; }
.pq-workspace { display:grid; grid-template-columns:minmax(0,1fr) var(--pq-sidebar-w,380px); min-height:calc(100dvh - var(--pq-header-h,60px)); }
.workspace-board { position:relative; min-width:0; padding:72px 72px 100px; }
.pq-selected { position:absolute; top:14px; inset-inline-start:24px; margin:0; font-size:13px; }
.pq-cards { display:flex; flex-wrap:wrap; align-content:flex-start; justify-content:center; gap:16px; min-width:0; }
.image-card { position:relative; width:198px; height:220px; flex:0 0 198px; background:var(--pq-card,#fdfdfd); border-radius:var(--pq-card-radius,8px); box-shadow:var(--pq-card-shadow,0 0 8px rgba(0,0,0,.08)); padding:10px; text-align:center; }
.card-preview { height:138px; display:flex; align-items:center; justify-content:center; }
.card-preview img { max-width:100%; max-height:100%; object-fit:contain; }
.pq-placeholder { font-size:36px; opacity:.5; }
.card-name { margin:4px 0; font-size:12px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; }
.card-meta { margin:0; font-size:11px; }
.card-state { margin:4px 0 0; font-size:11px; line-height:1.2; max-height:28px; overflow:auto; }
.card-state.error, .pq-error, .pq-field-error { color:var(--pq-danger,#d64444); }
.card-description { margin:4px 0 0; font-size:12px; }
.image-card:has(.card-description) .card-preview { height:118px; }
.image-card:has(.pq-card-tools) { height:auto; min-height:220px; }
.remove-button { position:absolute; top:4px; inset-inline-end:4px; border:0; border-radius:50%; background:var(--pq-surface,#fff); color:var(--pq-text,#47474f); width:24px; height:24px; line-height:20px; z-index:1; }
.pq-add { position:absolute; top:60px; inset-inline-end:24px; width:42px; height:42px; border-radius:50%; background:var(--pq-primary,#4d90fe); color:var(--pq-surface,#fff); border:0; font-size:24px !important; box-shadow:0 2px 5px var(--pq-border,rgba(0,0,0,.2)); }
.pq-add__count { position:absolute; top:-7px; inset-inline-start:-7px; min-width:25px; height:25px; padding:2px; border:3px solid var(--pq-primary,#4d90fe); border-radius:20px; background:var(--pq-heading,#33333b); font-size:12px; line-height:15px; }
.pq-add__tip { position:absolute; inset-inline-end:54px; top:6px; white-space:nowrap; border-radius:3px; padding:6px 8px; background:var(--pq-text,#47474f); color:var(--pq-surface,#fff); font-size:14px; font-weight:600; visibility:hidden; }
.pq-add:hover .pq-add__tip, .pq-add:focus-visible .pq-add__tip { visibility:visible; }
.pq-sidebar { display:flex; flex-direction:column; position:sticky; top:var(--pq-header-h,60px); height:calc(100dvh - var(--pq-header-h,60px)); padding-bottom:112px; border-inline-start:1px solid var(--pq-border,rgba(0,0,0,.2)); background:var(--pq-surface,#fff); min-width:0; }
.pq-sidebar h2 { overflow-wrap:anywhere; flex-shrink:0; color:var(--pq-heading,#33333b); text-align:center; font-size:28px; font-weight:500; line-height:34px; padding:12px 16px 8px; margin:0; border-bottom:1px solid var(--pq-border,rgba(0,0,0,.2)); }
.pq-option-content { flex:1; min-height:0; overflow-y:auto; padding:16px; }
.pq-option-content label { display:block; }
.pq-option-content input[type=number], .pq-option-content select { max-width:100%; }
.pq-action-footer { position:absolute; bottom:24px; inset-inline:24px; }
.pq-primary { width:330px; max-width:100%; min-height:64px; display:flex; justify-content:center; align-items:center; gap:20px; padding:8px 12px; border:0; border-radius:var(--pq-btn-radius,12px); font-size:22px !important; font-weight:500 !important; background:var(--pq-primary,#4d90fe); color:var(--pq-surface,#fff); box-shadow:0 2px 8px var(--pq-border,rgba(0,0,0,.2)); }
.pq-primary svg { width:26px; height:26px; flex-shrink:0; }
[dir=rtl] .pq-primary svg { transform:scaleX(-1); }
.pq-primary:hover, .pq-add:hover, .pq-download:hover { background:var(--pq-primary-hover,#3179ed); }
.pq-settings-trigger, .pq-settings-close { display:none; }
.pq-quiet { display:inline-block; border:1px solid var(--pq-border,rgba(0,0,0,.2)); background:var(--pq-surface,#fff); color:var(--pq-text,#47474f); padding:8px 12px; border-radius:6px; font-size:14px; text-decoration:none; }
.pq-reset { position:fixed; inset-inline-start:18px; bottom:18px; border:0; background:var(--pq-surface,#fff); color:var(--pq-text,#47474f); padding:8px 12px; border-radius:6px; font-size:13px !important; z-index:5; }
.pq-error:not([hidden]) { pointer-events:none; position:fixed; z-index:30; top:calc(var(--pq-header-h,60px) + 6px); inset-inline-start:50%; transform:translateX(-50%); margin:0; padding:12px 16px; max-width:calc(100% - 24px); width:max-content; border:1px solid var(--pq-danger,#d64444); background:var(--pq-surface,#fff); border-radius:6px; }
[dir=rtl] .pq-error:not([hidden]) { transform:translateX(50%); }
.pq-status { position:fixed; top:calc(var(--pq-header-h,60px) + 8px); inset-inline:12px; width:fit-content; max-width:calc(100% - 24px); margin:0 auto; text-align:center; font-size:14px; z-index:3; pointer-events:none; }
.pq-status:not(:empty) { padding:10px; background:var(--pq-surface,#fff); border-radius:6px; }
.pq-processing { min-height:calc(100dvh - var(--pq-header-h,60px)); display:flex; align-items:center; justify-content:flex-start; flex-direction:column; gap:24px; padding:104px 32px 32px; text-align:center; }
.pq-spinner { width:108px; height:108px; border:10px solid color-mix(in srgb,var(--pq-heading,#33333b) 10%,var(--pq-bg,#f5f5fa)); border-inline-start-color:var(--pq-primary,#4d90fe); border-radius:50%; animation:pq-spin 1.2s linear infinite; }
@keyframes pq-spin { to { transform:rotate(360deg); } }
.pq-processing h2 { font-size:28px; font-weight:500; margin:0; }
.pq-processing progress { width:420px; max-width:100%; height:10px; appearance:none; border:0; border-radius:10px; overflow:hidden; background:var(--pq-border,rgba(0,0,0,.2)); accent-color:var(--pq-primary,#4d90fe); }
.pq-processing progress::-webkit-progress-bar { background:var(--pq-border,rgba(0,0,0,.2)); }
.pq-processing progress::-webkit-progress-value { background:var(--pq-primary,#4d90fe); }
.pq-processing progress::-moz-progress-bar { background:var(--pq-primary,#4d90fe); }
.pq-result { padding:28px 24px 90px; max-width:1040px; margin-inline:auto; text-align:center; }
.pq-result h2 { color:var(--pq-heading,#33333b); font-size:30px; line-height:1.3; font-weight:600; margin:0 0 24px; }
.pq-download-actions { display:flex; justify-content:center; align-items:center; gap:12px; }
.pq-download { display:flex; align-items:center; justify-content:center; min-height:80px; max-width:calc(100% - 96px); min-width:500px; padding:20px 36px; border-radius:var(--pq-btn-radius,12px); background:var(--pq-primary,#4d90fe); color:var(--pq-surface,#fff); font-size:24px; font-weight:500; text-decoration:none; box-shadow:0 2px 6px var(--pq-border,rgba(0,0,0,.2)); }
.pq-back { border:0; background:var(--pq-text,#47474f); color:var(--pq-surface,#fff); width:36px; height:36px; border-radius:50%; flex-shrink:0; font-size:24px !important; }
[dir=rtl] #edit-task { transform:scaleX(-1); }
.pq-summary { margin:32px auto 20px; max-width:700px; font-size:17px; }
.pq-zip-note { font-size:13px; margin:12px auto; max-width:700px; }
.pq-continue { background:var(--pq-surface,#fff); border-radius:8px; padding:24px; margin:32px auto; max-width:784px; text-align:start; }
.pq-continue:has(.pq-continue-links:empty) { display:none; }
.pq-continue h3 { font-size:17px; margin:0 0 20px; }
.pq-continue-links { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.pq-continue-link { color:var(--pq-text,#47474f); font-size:14px; text-decoration:none; border:1px solid transparent; border-radius:6px; padding:12px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.pq-continue-link::after { content:"›"; font-size:22px; }
.pq-continue-link:hover { color:var(--pq-primary,#4d90fe); border-color:var(--pq-primary,#4d90fe); }
.pq-result-items { max-width:784px; margin:24px auto; }
.result-item { display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding:16px; border-bottom:1px solid var(--pq-border,rgba(0,0,0,.2)); text-align:start; }
.result-item-main { flex:1 1 240px; min-width:0; overflow-wrap:anywhere; }
.result-item-main p { margin:8px 0 0; font-size:13px; }
.result-item.error p { color:var(--pq-danger,#d64444); }
.pq-dragging::after { content:'↓'; position:fixed; inset:var(--pq-header-h,60px) 12px 12px; border:4px dashed var(--pq-primary,#4d90fe); border-radius:16px; background:var(--pq-bg,#f5f5fa); opacity:.9; display:grid; place-items:center; color:var(--pq-primary,#4d90fe); font-size:80px; pointer-events:none; z-index:40; }
@media(max-width:740px) {
 .pq-workspace { display:block; }
 .workspace-board { padding:72px 48px calc(164px + env(safe-area-inset-bottom)); }
 .pq-selected { inset-inline-start:12px; font-size:12px; }
 .pq-add { top:104px; inset-inline-end:16px; width:32px; height:32px; font-size:22px !important; }
 .pq-add__count { width:23px; min-width:23px; height:23px; font-size:11px; border-width:2px; }
 .pq-add__tip { display:none; }
 .pq-settings-trigger { display:flex; flex-direction:column; align-items:center; justify-content:center; position:fixed; top:calc(var(--pq-header-h,60px) + 60px); inset-inline-end:10px; width:42px; min-height:36px; border:0; border-radius:18px; background:var(--pq-surface,#fff); color:var(--pq-text,#47474f); box-shadow:0 2px 5px var(--pq-border,rgba(0,0,0,.2)); font-size:26px !important; z-index:2; }
 .pq-settings-trigger span { font-size:10px; white-space:nowrap; background:var(--pq-surface,#fff); }
 .pq-sidebar { position:static; height:auto; padding:0; border:0; }
 .pq-sidebar h2, .pq-option-content { display:none; }
 .pq-action-footer { position:fixed; bottom:0; inset-inline:0; padding:14px 12px max(24px,env(safe-area-inset-bottom)); background:var(--pq-bg,#f5f5fa); display:flex; justify-content:flex-end; z-index:4; }
 .pq-primary { width:200px; min-height:48px; border-radius:8px; font-size:16px !important; gap:12px; padding:4px 8px; }
 .pq-primary svg { width:20px; height:20px; }
 .pq-reset { bottom:max(18px,env(safe-area-inset-bottom)); inset-inline-start:8px; padding:8px; max-width:140px; }
 body[data-state=workspace] .pq-reset { bottom:calc(76px + max(24px,env(safe-area-inset-bottom))); }
 .pq-sidebar.is-open { position:fixed; top:var(--pq-header-h,60px); bottom:0; inset-inline-end:0; width:min(300px,100%); height:auto; padding-bottom:104px; z-index:22; border-inline-start:1px solid var(--pq-border,rgba(0,0,0,.2)); }
 .pq-sidebar.is-open h2 { display:block; font-size:24px; padding-inline:36px; }
 .pq-sidebar.is-open .pq-option-content { display:block; }
 .pq-sidebar.is-open .pq-settings-close { display:block; position:absolute; inset-inline-start:6px; top:9px; border:0; background:var(--pq-surface,#fff); color:var(--pq-text,#47474f); font-size:28px; }
 .pq-sidebar.is-open .pq-action-footer { inset-inline-start:auto; width:min(300px,100%); background:var(--pq-surface,#fff); }
 .pq-backdrop { position:fixed; inset:var(--pq-header-h,60px) 0 0; background:var(--pq-heading,#33333b); opacity:.45; border:0; z-index:21; }
 .settings-open { overflow:hidden; }
 .pq-result { padding:34px 16px 90px; }
 .pq-result h2 { font-size:18px; line-height:24px; margin-bottom:30px; }
 .pq-download-actions { gap:6px; flex-wrap:wrap; justify-content:space-between; }
 .pq-download { min-width:0; max-width:none; order:-1; flex:0 0 100%; min-height:96px; font-size:22px; padding:16px; }
 .pq-back { width:36px; height:36px; margin-inline:6px; }
 .pq-summary { font-size:15px; margin-top:40px; }
 .pq-continue { padding:18px; }
 .pq-continue-links { grid-template-columns:1fr; gap:8px; }
}
@media(prefers-reduced-motion:reduce) { .pq-app * { scroll-behavior:auto !important; animation:none !important; } }