:root{color-scheme:light;font-family:Yu Gothic,Meiryo,system-ui,sans-serif;--bg: #f5f7f8;--surface: #ffffff;--line: #d8dee4;--text: #16202a;--muted: #687586;--navy: #17324d;--teal: #0f766e;--coral: #d95f46;--gold: #c7952f;--shadow: 0 18px 50px rgba(22, 32, 42, .12)}*{box-sizing:border-box}body{margin:0;min-width:320px;height:100dvh;overflow:hidden;color:var(--text);background:linear-gradient(180deg,rgba(15,118,110,.07),transparent 280px),var(--bg)}button,input{font:inherit}button{border:0;cursor:pointer}button:disabled{cursor:not-allowed;opacity:.52}#app{width:100%;height:100dvh;margin:0 auto;padding:10px;overflow:hidden}.app-header{display:none;align-items:center;justify-content:space-between;gap:20px;margin-bottom:22px}.eyebrow{margin:0 0 4px;color:var(--teal);font-size:13px;font-weight:700}h1,h2{margin:0;line-height:1.2;letter-spacing:0}h1{font-size:32px}h2{font-size:16px}.privacy-pill{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border:1px solid rgba(15,118,110,.24);border-radius:999px;color:var(--teal);background:#ffffffe0;font-weight:700}.workspace{position:relative;display:grid;grid-template-columns:clamp(318px,25vw,380px) minmax(0,1fr);gap:10px;align-items:stretch;height:100%;min-height:0}.control-panel,.preview-panel{background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow)}.control-panel{position:relative;z-index:1;contain:paint;border-radius:8px;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto auto;gap:9px;min-height:0;padding:12px;overflow:clip}.preview-panel{position:relative;z-index:3;display:grid;grid-template-rows:auto minmax(0,1fr);min-height:0;border-radius:8px;overflow:hidden;isolation:isolate}.panel-block{min-height:0;padding:0 0 9px;border-bottom:1px solid var(--line);margin-bottom:0}.panel-block:last-of-type{overflow:hidden;padding-bottom:8px;margin-bottom:0}.block-title,.preview-toolbar{display:flex;align-items:center;gap:9px}.block-title{margin-bottom:7px}.block-title h2{margin-right:auto}.block-title svg,.preview-toolbar svg,.privacy-pill svg{width:18px;height:18px}.file-drop{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:44px;border:1px dashed rgba(23,50,77,.38);border-radius:8px;color:var(--navy);background:#f7fbfc;font-weight:700;cursor:pointer;transition:background .14s ease,border-color .14s ease,box-shadow .14s ease,transform .14s ease}.file-drop.property{background:#fffaf1;color:#805d12}.file-drop.is-drag-over{border-color:var(--teal);background:#e7f5f3;box-shadow:0 0 0 4px #0f766e24;transform:translateY(-1px)}.file-drop.property.is-drag-over{border-color:var(--gold);background:#fff2cf;box-shadow:0 0 0 4px #c7952f2e}.file-drop.is-disabled{pointer-events:none;opacity:.56}.file-drop input{position:absolute;width:1px;height:1px;opacity:0}.file-drop svg{width:20px;height:20px}.saved-row,.action-row{display:flex;align-items:center;gap:10px}.saved-row{justify-content:space-between;margin-top:8px}.mini-label{display:block;margin-bottom:3px;color:var(--muted);font-size:12px;font-weight:700}#bandName,#previewTitle{display:block;max-width:290px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.icon-button,.primary-button,.secondary-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:8px;font-weight:700}.icon-button{width:38px;height:38px;flex:0 0 38px}.icon-button svg{width:18px;height:18px}.subtle{color:var(--navy);background:#edf2f7}.band-preview-wrap{position:relative;display:grid;place-items:center;min-height:52px;margin-top:8px;border:1px solid var(--line);border-radius:8px;background:#fbfcfd;overflow:hidden}#bandPreview{display:none;width:100%;max-height:70px;object-fit:contain;padding:6px}#bandPreview.visible{display:block}.empty-note,.empty-state{color:var(--muted);font-weight:700}.empty-note.hidden,.empty-state.hidden{display:none}.file-summary{min-height:22px;margin-top:6px;color:var(--muted);font-weight:700;overflow-wrap:anywhere}.slider-grid{display:grid;gap:7px}.setting-group{--group-color: var(--teal);--group-soft: #e7f5f3;display:grid;gap:5px;padding:7px;border:1px solid color-mix(in srgb,var(--group-color) 24%,#ffffff);border-left:4px solid var(--group-color);border-radius:8px;background:var(--group-soft)}.property-settings{--group-color: #0f766e;--group-soft: #e7f5f3}.band-settings{--group-color: #d95f46;--group-soft: #fff0e8}.other-settings{--group-color: #17324d;--group-soft: #edf2f7}.setting-group-title{color:var(--group-color);font-size:12px;font-weight:800;line-height:1}.setting-row{display:grid;grid-template-columns:80px 26px minmax(70px,1fr) 26px 48px;align-items:center;gap:6px;color:var(--muted);font-size:12px;font-weight:700}input[type=range]{width:100%;accent-color:var(--group-color, var(--teal))}output{color:var(--text);font-size:12px;font-weight:800;text-align:right}.step-button{display:grid;place-items:center;width:26px;height:26px;border:1px solid color-mix(in srgb,var(--group-color) 42%,#ffffff);border-radius:7px;color:var(--group-color);background:#fff}.step-button svg{width:15px;height:15px;stroke-width:3}.step-button:active{transform:translateY(1px)}.toggle-row{display:flex;align-items:center;gap:8px;margin:14px 0;color:var(--text);font-weight:700}.toggle-row input{width:18px;height:18px;accent-color:var(--teal)}.primary-button,.secondary-button{min-height:38px;padding:0 12px}.primary-button{flex:1 1 auto;color:#fff;background:var(--teal)}.secondary-button{color:var(--navy);border:1px solid #cdd6df;background:#f7f9fb}.pdf-output-button:disabled{display:none}.primary-button svg,.secondary-button svg{width:18px;height:18px}.action-row{flex-wrap:wrap;gap:8px}.status{min-height:36px;margin-top:0;padding:9px 10px;border-left:4px solid var(--gold);border-radius:6px;color:var(--navy);background:#fff8e6;font-weight:700}.preview-toolbar{position:relative;z-index:2;justify-content:space-between;min-height:54px;padding:8px 12px;border-bottom:1px solid var(--line);background:#fff}.preview-heading{display:flex;align-items:center;gap:12px;min-width:0}.preview-copy{flex:0 0 auto;min-width:max-content}.toolbar-actions{display:flex;align-items:center;gap:8px}.secondary-button.compact{min-height:38px;padding:0 12px}.hazard-button{flex:0 0 auto;color:#5b3a00;border-color:#e0bf69;background:#fff6dd;text-decoration:none;white-space:nowrap}.hazard-button svg{color:#9b6a00}.candidate-button{color:#6b3f00;border-color:#f0c36a;background:#fff8e6}.candidate-button svg{color:#bf7f00}.candidate-button.is-selected{color:#fff;border-color:#c7952f;background:#c7952f}.candidate-button.is-selected svg{fill:currentColor;color:#fff}.reset-button{min-height:30px;padding:0 9px;font-size:12px}.page-counter{min-width:54px;color:var(--muted);font-size:13px;font-weight:800;text-align:center}.preview-stage{position:relative;z-index:2;display:grid;place-items:center;min-height:0;padding:10px;background:#e9eef2;overflow:hidden}.preview-stage.is-drag-over{outline:3px solid rgba(18,132,117,.45);outline-offset:-8px;background:#dff3ef}.preview-stage.is-drag-over .empty-state{color:var(--teal)}#previewCanvas,#customerCanvas{display:none;max-width:100%;max-height:100%;width:auto;height:auto;border:1px solid #c4ccd4;background:#fff;box-shadow:0 14px 36px #16202a2e}#previewCanvas.visible,#customerCanvas.visible{display:block}#customerCanvas{max-height:calc(100vh - 150px);box-shadow:0 20px 60px #0000005c}.empty-state{display:grid;place-items:center;gap:12px}.empty-state svg{width:48px;height:48px;color:#91a0af}.page-strip{display:none;position:relative;z-index:2;gap:8px;min-height:42px;padding:6px 12px 8px;overflow-x:auto;border-top:1px solid var(--line);background:#fff}.page-chip{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:30px;padding:0 10px;border:1px solid #cdd6df;border-radius:8px;color:var(--navy);background:#f7f9fb;font-weight:800}.page-chip.is-active{color:#fff;border-color:var(--teal);background:var(--teal)}.page-chip.is-candidate:before{content:"★";margin-right:4px;color:#c7952f}.page-chip.is-active.is-candidate:before{color:#fff0bd}.page-chip.is-customized:after{content:"";width:6px;height:6px;margin-left:4px;border-radius:999px;background:var(--coral)}body.viewer-open{overflow:hidden}body.viewer-open .workspace{visibility:hidden}.customer-viewer{position:fixed;top:0;right:0;bottom:0;left:0;z-index:2147483000;display:grid;grid-template-rows:auto 1fr;background:#111820;color:#fff}.customer-viewer[hidden]{display:none}.viewer-topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;padding:12px 20px;background:#111820f5;border-bottom:1px solid rgba(255,255,255,.14)}.viewer-topbar .mini-label,.viewer-topbar .page-counter{color:#ffffffb3}#customerTitle{display:block;max-width:min(780px,58vw);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.viewer-stage{position:relative;display:grid;place-items:center;min-height:0;padding:18px 78px;background:#dfe5eb}.viewer-nav{position:absolute;top:50%;z-index:2;display:grid;place-items:center;width:52px;height:80px;border-radius:8px;color:#fff;background:#111820a8;transform:translateY(-50%)}.viewer-nav:disabled{opacity:.2}.viewer-nav.prev{left:16px}.viewer-nav.next{right:16px}.viewer-nav svg{width:30px;height:30px}.viewer-strip{border-top:1px solid rgba(255,255,255,.14);background:#111820f5}.viewer-strip .page-chip{color:#fff;border-color:#ffffff3d;background:#ffffff14}.viewer-strip .page-chip.is-active{border-color:#fff;background:var(--teal)}@media(max-width:980px){#app{padding:8px}.workspace{grid-template-columns:clamp(290px,34vw,340px) minmax(0,1fr);gap:8px}.preview-panel,.preview-stage{min-height:0}.control-panel{padding:10px}.band-preview-wrap{display:none}.file-drop{min-height:40px}.slider-grid{gap:6px}}@media(max-width:560px){.workspace{grid-template-columns:1fr;grid-template-rows:minmax(390px,47dvh) minmax(0,1fr)}.preview-panel{grid-template-rows:minmax(0,1fr) auto auto}.control-panel{grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto auto auto;gap:5px 8px;padding:8px}.control-panel .panel-block:nth-of-type(1),.control-panel .panel-block:nth-of-type(2){padding-bottom:4px}.control-panel .panel-block:nth-of-type(3){grid-column:1 / 3;padding-bottom:4px}.action-row{grid-column:1 / 2;align-items:stretch;gap:6px}.status{grid-column:2 / 3;align-self:stretch;margin:0;min-height:0;padding:7px 8px;font-size:11px;line-height:1.35;overflow:hidden}.file-drop{min-height:30px;gap:6px;font-size:11px}.file-drop svg{width:16px;height:16px}.saved-row{margin-top:3px}#bandName,#previewTitle{max-width:100%}.file-summary,#bandName{font-size:11px}.slider-grid{grid-template-columns:1fr 1fr;gap:4px 8px}.setting-group{padding:4px;gap:3px}.setting-group-title{font-size:9px}.setting-row{grid-template-columns:52px 20px minmax(34px,1fr) 20px 34px;gap:3px;font-size:9px}.step-button{width:20px;height:20px;border-radius:6px}.step-button svg{width:12px;height:12px}.primary-button{flex:1 1 100%;min-height:32px;font-size:13px}.action-row .secondary-button{flex:1 1 46%;min-height:32px;min-width:0;padding:0 8px;font-size:11px}.toolbar-actions{flex-wrap:wrap;justify-content:flex-end}.preview-toolbar{grid-row:2;align-items:flex-start;flex-wrap:wrap;min-height:44px;padding:6px 8px;border-top:1px solid var(--line);border-bottom:0}.preview-stage{grid-row:1}.page-strip{grid-row:3}.preview-heading{flex:1 1 100%}.preview-toolbar>.toolbar-actions{width:100%}.preview-toolbar .mini-label,#previewTitle{font-size:10px}.secondary-button.compact{min-height:30px;padding:0 8px;font-size:11px}.icon-button{width:32px;height:32px;flex-basis:32px}.preview-stage{padding:6px}.viewer-stage{padding:12px 54px}.viewer-nav{width:42px;height:64px}.page-strip{min-height:34px;padding:4px 8px 5px}.page-chip{min-width:34px;height:28px}}@media(max-height:760px){.control-panel{gap:6px;padding:8px}.panel-block{padding-bottom:6px}.block-title{margin-bottom:5px}.band-preview-wrap{display:none}.file-drop{min-height:36px}.slider-grid{gap:5px}.setting-group{padding:5px;gap:4px}.setting-row{font-size:11px}.primary-button,.secondary-button{min-height:34px}.status{min-height:32px;padding:7px 9px;font-size:12px}.preview-toolbar{min-height:48px}.page-strip{min-height:36px;padding:4px 10px 6px}}