.wb-page { max-width:1180px; }
.wb-page .card { margin-block:18px; }
.wb-controls { display:flex; align-items:end; flex-wrap:wrap; gap:16px; margin-block:16px; }
.wb-field { display:flex; flex:1 1 220px; flex-direction:column; gap:6px; min-width:0; }
.wb-field input,.wb-field select { max-width:100%; min-height:44px; box-sizing:border-box; padding:9px 12px; font:inherit; border:1px solid var(--border-control); border-radius:10px; }
.wb-field input[type="range"] { width:100%; padding:0; }
.wb-check { display:flex; align-items:center; gap:8px; min-height:44px; }
.wb-page button,.wb-page summary,.wb-page a.secondary-button { min-height:44px; }
.wb-advanced { margin-block:16px; padding:14px; border:1px solid var(--border); border-radius:12px; background:var(--surface-muted); }
.wb-advanced summary { display:list-item; cursor:pointer; align-content:center; font-weight:700; }
.wb-files { padding-left:0; list-style:none; }
.wb-files li { display:flex; flex-wrap:wrap; align-items:center; gap:10px; border-bottom:1px solid #d2dee5; padding:8px 0; }
.wb-files li > span { flex:1 1 200px; overflow-wrap:anywhere; min-width:0; }
.wb-preview { display:grid; gap:12px; }
.wb-preview canvas,.wb-preview img { max-width:100%; height:auto; display:block; }
.wb-preview canvas[tabindex] { cursor:crosshair; }
.wb-result { overflow-wrap:anywhere; }
.wb-result dl { display:grid; grid-template-columns:auto 1fr; gap:8px 18px; }
.wb-result dd { margin:0; }
.wb-compare-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:6px;padding:8px;border:1px solid var(--border);border-radius:var(--ui-radius-control);background:var(--surface-muted);}
.wb-compare-toolbar button{min-height:44px;}
.wb-compare-toolbar [aria-pressed="true"]{border-color:var(--primary);color:var(--primary-hover);background:var(--surface-muted);}
.wb-compare-view-control{display:none;align-items:center;gap:8px;font-weight:700;}
.wb-compare-view-control select{min-height:44px;min-width:150px;max-width:100%;padding:6px 10px;border:1px solid var(--border-control);border-radius:var(--ui-radius-control);background:var(--surface);color:var(--text);font:inherit;}
.wb-compare-zoom-label{padding-inline:8px;color:var(--muted);font-variant-numeric:tabular-nums;}
.wb-compare-stage { position:relative; overflow:hidden; touch-action:none; user-select:none; height:clamp(280px,55vw,680px); background:var(--surface-muted); border:1px solid var(--border); border-radius:var(--ui-radius-control); cursor:default; }
.wb-compare-layer{position:absolute;inset:0;min-width:0;overflow:hidden;}
.wb-preview .wb-compare-layer img{position:absolute;left:50%;top:50%;max-width:none;width:auto;height:auto;user-select:none;-webkit-user-drag:none;pointer-events:none;}
.wb-compare-stage[data-view="flicker"]{isolation:isolate;}
.wb-compare-stage[data-view="flicker"] .wb-compare-layer{will-change:opacity;transform:translateZ(0);transition:none;}
.wb-compare-stage[data-view="side"] { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.wb-compare-stage[data-view="side"] .wb-compare-layer { position:relative; }
.wb-compare-divider{position:absolute;top:0;bottom:0;left:clamp(22px,var(--reveal,50%),calc(100% - 22px));transform:translateX(-50%);width:44px;cursor:col-resize;z-index:2;touch-action:none;outline:0;}
.wb-compare-stage[data-view="slider"]::before{content:"";position:absolute;top:0;bottom:0;left:var(--reveal,50%);width:2px;background:var(--surface);box-shadow:0 0 0 1px var(--text);pointer-events:none;z-index:2;}
.wb-compare-divider::after{content:"↔";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--surface);color:var(--text);border:2px solid var(--text);font-size:15px;box-shadow:0 2px 8px rgb(23 32 51 / .16);}
.wb-page .wb-compare-divider:focus-visible{outline:0;}
.wb-compare-divider:focus-visible::after{box-shadow:0 0 0 3px var(--focus-ring),0 2px 8px rgb(23 32 51 / .16);}
.wb-compare-stage[data-view="slider"]{cursor:col-resize;}
.wb-compare-stage.wb-compare-pan-mode,.wb-compare-stage.wb-compare-space-pan{cursor:grab;}
.wb-compare-stage.wb-compare-panning{cursor:grabbing;}
.wb-compare-stage .wb-compare-divider{cursor:col-resize;}
.wb-preview:fullscreen,.wb-preview.wb-compare-expanded{display:flex;flex-direction:column;position:fixed;inset:0;z-index:1000;max-width:none;width:100%;height:100dvh;margin:0;padding:12px;background:var(--surface);overflow:hidden;}
.wb-preview:fullscreen .wb-compare-view-control,.wb-preview.wb-compare-expanded .wb-compare-view-control{display:flex;}
.wb-preview:fullscreen .wb-compare-toolbar,.wb-preview.wb-compare-expanded .wb-compare-toolbar{flex:0 0 auto;max-height:34dvh;overflow:auto;}
.wb-preview:fullscreen .wb-compare-stage,.wb-preview.wb-compare-expanded .wb-compare-stage{flex:1 1 auto;min-height:0;height:auto;}
.wb-image-slots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:12px;}
.wb-image-slots + .pdf-drop-zone{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;padding:10px;}
.wb-image-slots + .pdf-drop-zone p{margin:0;}
.wb-image-slot{display:flex;align-items:center;flex-wrap:wrap;gap:6px;padding:12px;border:1px solid var(--border);border-radius:var(--ui-radius-control);background:var(--surface-muted);}
.wb-image-slot h3{margin:0;font-size:1rem;width:100%;}
.wb-slot-name{width:100%;overflow-wrap:anywhere;font-size:.9rem;color:var(--muted);}
.wb-page .pdf-privacy-note{color:var(--accent-teal);background:var(--surface-success);padding:8px 12px;border-radius:var(--ui-radius-control);}
.wb-page #wb-status:not(:empty){color:var(--state-success);}
.wb-page .wb-input>.wb-output{padding:0;border:0;box-shadow:none;}
.wb-page .wb-output>h2{margin:8px 0;font-size:var(--ui-heading-size);}
.wb-page .tool-info-section.usage-guide{background:var(--surface-muted);}
.wb-palette { display:flex; flex-wrap:wrap; gap:10px; margin-block:12px; }
.wb-palette button { display:flex; flex-direction:column; align-items:center; gap:5px; min-width:88px; border:1px solid #7d94a4; border-radius:10px; padding:8px; background:#fff; color:#19374b; }
.wb-swatch { width:50px; height:36px; border:1px solid #778c9a; }
.wb-page-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr)); gap:14px; }
.wb-page-tile { border:1px solid #b4c9d6; border-radius:12px; padding:12px; display:flex; flex-wrap:wrap; gap:6px; align-content:start; }
.wb-page-tile canvas { width:100%; height:auto; }
.wb-page-tile label { display:flex; align-items:center; min-height:44px; gap:8px; }
.wb-page-tile input { width:22px; height:22px; }
.wb-page :focus-visible { outline:3px solid var(--focus-ring); outline-offset:3px; }
.wb-output[hidden] { display:none; }
@media(max-width:560px){.wb-controls { gap:12px; }.wb-field { flex-basis:100%; }.wb-page .card { padding:16px; }.wb-compare-stage{height:clamp(280px,72vw,420px);}.wb-compare-stage[data-view="side"]{gap:6px;}.wb-compare-toolbar button{flex:1 1 auto;padding-inline:9px;}.wb-compare-zoom-label{min-width:100%;}.wb-result dl{grid-template-columns:1fr;gap:4px;}.wb-result dd{margin-bottom:12px;}}
.wb-preview [hidden] { display:none; }
.wb-page [hidden] { display:none !important; }