:root{--bg: #ffffff;--bg-soft: #fafaf7;--bg-panel: #ffffff;--bg-input: #ffffff;--bg-viewer: #f4f4ef;--ink: #0a0a0a;--ink-mute: #3a3a3a;--ink-dim: #707070;--line: #e6e6e6;--line-bold: #0a0a0a;--yellow: #ffd60a;--yellow-soft: #fff3a6;--yellow-deep: #f5c400;--font-display: "Inter Tight","Inter","Helvetica Neue",Helvetica,Arial,sans-serif;--font-body: "Inter","Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;--font-mono: ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace}*,*:before,*:after{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:14.5px;-webkit-font-smoothing:antialiased}button,input,select{font:inherit;color:inherit}::selection{background:var(--yellow);color:var(--ink)}.app{display:grid;grid-template-rows:auto 1fr;height:100vh;height:100dvh}.topbar{display:flex;align-items:center;gap:12px;padding:10px 14px;background:var(--bg);border-bottom:2px solid var(--ink);flex-wrap:wrap}.topbar .brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;font-family:var(--font-display);font-size:17px;font-weight:800;letter-spacing:-.005em}.topbar .brand-mark{width:26px;height:26px;background:var(--yellow);border:2px solid var(--ink);border-radius:8px;display:grid;place-items:center;box-shadow:2px 2px 0 var(--ink)}.topbar .brand-mark:after{content:"";width:8px;height:8px;border-radius:50%;background:var(--ink)}.topbar .brand span{background:var(--yellow);padding:0 3px}.topbar .sep{color:var(--ink-dim);font-family:var(--font-mono)}.topbar .tool-name{font-family:var(--font-mono);font-size:13px;color:var(--ink-mute)}.topbar .spacer{flex:1;min-width:0}.topbar .file-info{font-family:var(--font-mono);font-size:12px;color:var(--ink-mute);display:flex;gap:10px;align-items:center;flex-wrap:wrap}.topbar .file-info .dot{color:var(--yellow-deep);font-size:14px;line-height:1}.workspace{display:grid;grid-template-columns:240px 1fr;min-height:0}.sidebar{background:var(--bg-soft);border-right:2px solid var(--ink);padding:18px 14px;overflow-y:auto}.sidebar h4{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mute);margin:0 0 12px;font-weight:700}.viewer{position:relative;overflow:auto;background:var(--bg-viewer);padding:20px;min-width:0}.empty{min-height:100%;display:grid;place-items:center}.empty .drop{width:min(560px,100%);padding:48px 28px;border:2.5px dashed var(--ink);border-radius:18px;background:var(--bg);text-align:center;transition:background .15s ease,transform .15s ease;box-shadow:4px 4px 0 var(--ink)}.empty .drop.over{background:var(--yellow-soft);transform:translate(-1px,-1px);box-shadow:6px 6px 0 var(--ink)}.empty h2{font-family:var(--font-display);font-weight:800;font-size:28px;letter-spacing:-.01em;margin:0 0 8px}.empty p{color:var(--ink-mute);margin:0 0 22px;font-size:14.5px}.btn{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;background:var(--bg);border:2px solid var(--ink);border-radius:8px;color:var(--ink);cursor:pointer;font-size:13.5px;font-weight:600;transition:transform .12s ease,box-shadow .12s ease,background .12s;box-shadow:2px 2px 0 var(--ink)}.btn:hover:not(:disabled){background:var(--yellow);transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--ink)}.btn:active:not(:disabled){transform:translate(0);box-shadow:1px 1px 0 var(--ink)}.btn:disabled{opacity:.4;cursor:not-allowed;box-shadow:2px 2px 0 var(--ink)}.btn.primary{background:var(--yellow);color:var(--ink)}.btn.primary:hover:not(:disabled){background:var(--ink);color:var(--yellow)}.btn.ghost{background:transparent;border-color:var(--line);box-shadow:none;font-weight:500}.btn.ghost:hover:not(:disabled){background:var(--yellow);border-color:var(--ink);transform:none;box-shadow:none}.btn.icon{padding:6px 10px;font-family:var(--font-mono);font-size:14px;font-weight:700}.controls{display:flex;align-items:center;gap:10px;padding:10px 14px;margin-bottom:20px;background:var(--bg);border:2px solid var(--ink);border-radius:12px;position:sticky;top:0;z-index:5;flex-wrap:wrap;box-shadow:3px 3px 0 var(--ink)}.controls .group{display:flex;align-items:center;gap:6px}.controls .label{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute);font-weight:700}.controls input.page-input{width:56px;background:var(--bg);border:2px solid var(--ink);border-radius:6px;padding:5px 8px;text-align:center;font-family:var(--font-mono);font-weight:700}.controls input.page-input:focus{outline:2px solid var(--yellow);outline-offset:1px}.controls select.scale-select{background:var(--bg);border:2px solid var(--ink);border-radius:6px;padding:5px 10px;font-family:var(--font-mono);font-size:13px;font-weight:600;cursor:pointer}.controls .total{font-family:var(--font-mono);font-size:12.5px;color:var(--ink-mute);font-weight:600}.controls .spacer{flex:1;min-width:0}.pages{display:flex;flex-direction:column;align-items:center;gap:28px;padding-bottom:40px}.page-frame{background:#fff;border:2px solid var(--ink);border-radius:4px;box-shadow:4px 4px 0 var(--ink);position:relative;max-width:100%}.page-frame canvas{display:block;border-radius:2px;max-width:100%;height:auto}.page-frame .page-label{position:absolute;bottom:-22px;left:50%;transform:translate(-50%);font-family:var(--font-mono);font-size:11px;color:var(--ink-dim);letter-spacing:.05em;font-weight:600}.page-frame.active{outline:3px solid var(--yellow);outline-offset:3px}.thumbs{display:flex;flex-direction:column;gap:2px}.thumb-insert-line{height:3px;background:var(--yellow-deep);border-radius:2px;margin:1px 0}.thumb-wrap{position:relative;border-radius:8px;border:2px solid transparent;transition:border-color .12s}.thumb-wrap:hover{border-color:var(--line)}.thumb-wrap.active{border-color:var(--ink);background:var(--yellow-soft)}.thumb-wrap[draggable]{cursor:grab}.thumb-wrap[draggable]:active{cursor:grabbing}.thumb{display:flex;align-items:center;gap:10px;padding:6px 8px;border:none;border-radius:6px;background:transparent;text-align:left;width:100%;color:var(--ink-mute);font-family:var(--font-mono);font-size:12px;font-weight:600;cursor:pointer}.thumb-wrap.active .thumb{color:var(--ink)}.thumb .num{flex:0 0 24px;text-align:right;color:var(--ink-dim)}.thumb-wrap.active .thumb .num{color:var(--ink)}.thumb canvas{background:#fff;border:1px solid var(--line);border-radius:2px;width:60px;height:auto;display:block}.thumb-controls{display:flex;gap:2px;padding:0 6px 6px;opacity:0;pointer-events:none;transition:opacity .12s}.thumb-wrap:hover .thumb-controls,.thumb-wrap:focus-within .thumb-controls{opacity:1;pointer-events:auto}.thumb-ctrl{padding:3px 6px!important;font-size:13px!important;box-shadow:1px 1px 0 var(--ink)!important}.thumb-del{color:#c00}.dialog-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0a0a0a73;display:grid;place-items:center;z-index:100}.dialog{background:var(--bg);border:2px solid var(--ink);border-radius:14px;padding:28px 28px 24px;width:min(420px,90vw);box-shadow:6px 6px 0 var(--ink)}.dialog-title{font-family:var(--font-display);font-size:20px;font-weight:800;margin:0 0 6px}.dialog-sub{font-size:13px;color:var(--ink-mute);margin:0 0 18px;line-height:1.5}.dialog-row{display:flex;gap:16px;margin-bottom:12px}.dialog-label{display:flex;flex-direction:column;gap:6px;font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-mute);flex:1}.dialog-input{width:100%;border:2px solid var(--ink);border-radius:6px;padding:7px 10px;font-family:var(--font-mono);font-size:14px;font-weight:700;text-align:center;background:var(--bg)}.dialog-input:focus{outline:2px solid var(--yellow);outline-offset:1px}.dialog-err{color:#b00;font-size:13px;font-weight:600;margin-bottom:10px}.dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}.file-input{display:none}.error{margin:0 0 14px;padding:10px 14px;border:2px solid var(--ink);background:var(--yellow);border-radius:8px;color:var(--ink);font-size:13.5px;font-weight:600}.loading{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:13px;color:var(--ink);font-weight:700}.loading:before{content:"";width:10px;height:10px;border-radius:50%;background:var(--ink);animation:pulse 1s ease-in-out infinite}@keyframes pulse{0%,to{opacity:.35;transform:scale(.85)}50%{opacity:1;transform:scale(1.05)}}.ann-toolbar{display:flex;align-items:center;gap:8px;padding:8px 14px;margin-bottom:16px;background:var(--bg);border:2px solid var(--ink);border-radius:12px;flex-wrap:wrap;box-shadow:3px 3px 0 var(--ink)}.ann-group{display:flex;align-items:center;gap:4px}.ann-sep{width:1px;height:22px;background:var(--line);margin:0 4px}.ann-tool.active,.ann-width.active{background:var(--yellow);border-color:var(--ink);box-shadow:1px 1px 0 var(--ink)}.color-swatch{width:24px;height:24px;border-radius:50%;border:2px solid var(--ink);cursor:pointer;padding:0;transition:transform .12s ease,box-shadow .12s ease;box-shadow:2px 2px 0 var(--ink)}.color-swatch.active{transform:scale(1.2);box-shadow:3px 3px 0 var(--ink)}.color-swatch:hover:not(.active){transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--ink)}.annotation-overlay{display:block}.back{font-family:var(--font-mono);font-size:12px;color:var(--ink-mute);text-decoration:none;padding:4px 8px;border-radius:6px}.back:hover{color:var(--ink);background:var(--yellow)}@media (max-width: 800px){.workspace{grid-template-columns:1fr}.sidebar{display:none}.viewer{padding:14px}.controls{padding:8px 10px;gap:6px}.controls .group{gap:4px}.pages{gap:24px}}@media (max-width: 480px){.topbar{padding:8px 12px;gap:8px}.topbar .sep,.topbar .tool-name{display:none}.topbar .file-info{font-size:11px;gap:6px}.empty .drop{padding:36px 20px}.empty h2{font-size:24px}.controls .label{display:none}}.workspace.with-form{grid-template-columns:240px 1fr 280px}.form-sidebar{background:var(--bg-soft);border-left:2px solid var(--ink);padding:18px 14px;overflow-y:auto}.form-sidebar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.form-sidebar-header h4{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mute);margin:0;font-weight:700}.form-panel-inner{display:flex;flex-direction:column;gap:12px}.form-field-row{display:flex;flex-direction:column;gap:4px}.form-field-label{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-mute);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.form-input{width:100%;border:2px solid var(--ink);border-radius:6px;padding:6px 8px;background:var(--bg);font-family:var(--font-mono);font-size:13px}.form-input:focus{outline:2px solid var(--yellow);outline-offset:1px}.form-select{width:100%;border:2px solid var(--ink);border-radius:6px;padding:6px 8px;background:var(--bg);font-family:var(--font-mono);font-size:13px;cursor:pointer}.form-select:focus{outline:2px solid var(--yellow);outline-offset:1px}.form-checkbox{width:16px;height:16px;cursor:pointer;accent-color:var(--yellow)}.form-radio-group{display:flex;flex-direction:column;gap:4px}.form-radio-label{display:flex;align-items:center;gap:6px;font-size:13px;cursor:pointer}.form-flatten-row{margin-top:16px;padding-top:12px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:4px}.flatten-label{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;cursor:pointer}.flatten-hint{font-size:11px;color:var(--ink-mute);line-height:1.4}.form-empty-msg{font-size:13px;color:var(--ink-mute);line-height:1.6}.form-warn{font-size:12px;color:var(--ink-mute);background:var(--yellow-soft);border:1px solid var(--ink);border-radius:6px;padding:8px 10px;line-height:1.4}.image-dialog{width:min(520px,90vw);max-height:80vh;overflow-y:auto}.img-list{display:flex;flex-direction:column;gap:8px;margin-bottom:16px;max-height:240px;overflow-y:auto}.img-item{display:flex;align-items:center;gap:10px;padding:6px 8px;border:1px solid var(--line);border-radius:8px;background:var(--bg-soft)}.img-preview{width:48px;height:48px;object-fit:contain;border-radius:4px;border:1px solid var(--line);flex-shrink:0;background:#fff}.img-name{flex:1;font-size:12px;font-family:var(--font-mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-mute)}.img-remove{flex-shrink:0}.viewer.img-drag-over:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border:3px dashed var(--yellow-deep);border-radius:8px;background:#ffd60a14;pointer-events:none}@media (max-width: 800px){.workspace.with-form{grid-template-columns:1fr}.form-sidebar{display:none}}