:root{--text:#374151;--text-strong:#111827;--text-muted:#9ca3af;--bg:#fff;--sidebar-bg:#f9fafb;--canvas-bg:#f3f4f6;--border:#e5e7eb;--sans:system-ui, "Segoe UI", Roboto, sans-serif;font-family:var(--sans);color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;font-size:14px;line-height:1.5}@media (prefers-color-scheme:dark){:root{--text:#d1d5db;--text-strong:#f9fafb;--text-muted:#6b7280;--bg:#111827;--sidebar-bg:#1f2937;--canvas-bg:#111827;--border:#374151}}*,:before,:after{box-sizing:border-box}body{margin:0}#root{height:100vh}.layout{height:100vh;display:flex;overflow:hidden}.sidebar{background:var(--sidebar-bg);border-right:1px solid var(--border);flex-direction:column;flex-shrink:0;gap:24px;width:280px;padding:24px 20px;display:flex;overflow-y:auto}.sidebar-title{color:var(--text-strong);letter-spacing:-.3px;margin:0;font-size:18px;font-weight:600}.sidebar-section{flex-direction:column;gap:10px;display:flex}.sidebar-hint{color:var(--text-muted);margin:0;font-size:13px;line-height:1.5}.sidebar-label{color:var(--text-strong);font-size:13px;font-weight:500}.sidebar-input{border:1px solid var(--border);background:var(--bg);color:var(--text-strong);box-sizing:border-box;border-radius:6px;width:100%;padding:7px 10px;font-family:inherit;font-size:13px}.sidebar-input:focus{border-color:var(--text-muted);outline:none}.unit-selector{gap:4px;display:flex}.unit-btn{color:var(--text-muted);border:1px solid var(--border);cursor:pointer;background:0 0;border-radius:5px;flex:1;padding:6px 4px;font-family:inherit;font-size:12px}.unit-btn:hover{color:var(--text-strong);border-color:var(--text-muted)}.unit-btn.active{background:var(--text-strong);color:var(--bg);border-color:var(--text-strong)}.btn-primary{background:var(--text-strong);width:100%;color:var(--bg);cursor:pointer;border:none;border-radius:6px;padding:8px 12px;font-family:inherit;font-size:13px}.btn-primary:hover{opacity:.85}.btn-primary:disabled{opacity:.4;cursor:default}.btn-secondary{width:100%;color:var(--text-strong);border:1px solid var(--border);cursor:pointer;background:0 0;border-radius:6px;padding:8px 12px;font-family:inherit;font-size:13px}.btn-secondary:hover{background:var(--border)}.btn-secondary.active{background:var(--text-strong);color:var(--bg);border-color:var(--text-strong)}.btn-ghost{width:100%;color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-radius:6px;padding:6px 12px;font-family:inherit;font-size:13px}.btn-ghost:hover{color:var(--text-strong)}.zone-list{flex-direction:column;gap:6px;display:flex}.zone-item{background:var(--bg);border:1px solid var(--border);border-radius:6px;align-items:center;gap:8px;padding:8px 10px;display:flex}.zone-swatch{border:1.5px solid;border-radius:3px;flex-shrink:0;width:12px;height:12px}.zone-info{flex-direction:column;flex:1;gap:1px;min-width:0;display:flex}.zone-name{color:var(--text-strong);font-size:13px;font-weight:500}.zone-area{color:var(--text-muted);font-size:12px}.zone-area.muted{font-style:italic}.zone-delete{color:var(--text-muted);cursor:pointer;background:0 0;border:none;flex-shrink:0;padding:0 2px;font-size:16px;line-height:1}.zone-delete:hover{color:var(--text-strong)}.canvas-area{background:var(--canvas-bg);flex:1;position:relative;overflow:hidden}.canvas-placeholder{color:var(--text-muted);justify-content:center;align-items:center;font-size:14px;display:flex;position:absolute;inset:0}.pdf-canvas-container{-webkit-user-select:none;user-select:none;width:100%;height:100%;position:relative;overflow:hidden}.canvas-wrapper{position:absolute;top:0;left:0}.canvas-wrapper canvas{display:block;box-shadow:0 2px 16px #0003}.drawing-overlay{position:absolute;top:0;left:0}.page-nav{color:#fff;z-index:10;-webkit-user-select:none;user-select:none;background:#0009;border-radius:8px;align-items:center;gap:10px;padding:6px 12px;display:flex;position:absolute;bottom:20px;left:50%;transform:translate(-50%)}.page-nav-btn{color:#fff;cursor:pointer;background:0 0;border:none;padding:0 4px;font-size:18px;line-height:1}.page-nav-btn:disabled{opacity:.3;cursor:default}.page-nav-btn:not(:disabled):hover{color:#ccc}.page-nav-input{color:#fff;text-align:center;-moz-appearance:textfield;background:#ffffff26;border:1px solid #ffffff4d;border-radius:4px;width:36px;padding:1px 2px;font-size:13px}.page-nav-input::-webkit-inner-spin-button{display:none}.page-nav-input::-webkit-outer-spin-button{display:none}.page-nav-input:focus{background:#ffffff40;border-color:#fff9;outline:none}.page-nav-label{text-align:left;min-width:24px;font-size:13px}.page-nav-divider{background:#ffffff4d;width:1px;height:16px}