*,*:before,*:after{box-sizing:border-box}html,body,#root{margin:0;width:100%;min-height:100%}body{min-width:320px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}.app-shell{height:100vh;padding:1rem;background:radial-gradient(circle at top left,rgb(56 189 248 / .16),transparent 34%),radial-gradient(circle at top right,rgb(99 102 241 / .16),transparent 40%),#020617;color:#e2e8f0;display:flex;flex-direction:column;gap:1rem;overflow:hidden}.topbar{border:1px solid rgb(100 116 139 / .34);background:#0f172ae0;border-radius:16px;padding:.95rem 1.15rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;box-shadow:0 18px 38px #02061759}.topbar h1{margin:0;font-size:1.15rem;letter-spacing:-.02em}.topbar p{margin:.25rem 0 0;font-size:.88rem;color:#94a3b8}.topbar-actions{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}.export-menu-wrap{position:relative}.export-dropdown{position:absolute;top:calc(100% + .45rem);right:0;min-width:190px;padding:.4rem;border:1px solid rgb(100 116 139 / .48);border-radius:10px;background:#0f172af5;box-shadow:0 14px 30px #02061773;display:flex;flex-direction:column;gap:.3rem;z-index:12}.workspace{flex:1;min-height:0;display:grid;grid-template-columns:330px minmax(0,1fr);gap:.9rem;overflow:hidden}.sidebar,.viewer-wrap{border:1px solid rgb(100 116 139 / .3);background:#0f172adb;border-radius:16px;overflow:hidden;box-shadow:0 18px 36px #02061752}.sidebar{padding:.8rem;overflow:hidden;display:flex;flex-direction:column;gap:.7rem;min-height:0}.sticky-tools{position:sticky;top:0;z-index:2;display:flex;flex-direction:column;gap:.7rem;background:linear-gradient(to bottom,#0f172af2 0% 90%,#0f172a00);padding-bottom:.35rem}.pages-panel{flex:1;min-height:0;display:flex;flex-direction:column}.pages-scroll{flex:1;min-height:0;overflow-y:auto;padding-right:.15rem}.panel{border:1px solid rgb(100 116 139 / .25);border-radius:12px;padding:.8rem;background:#1e293b99}.panel h2{margin:0 0 .65rem;font-size:.92rem;color:#e2e8f0}.thumb-list{display:flex;flex-direction:column;gap:.45rem}.thumb-card{border:1px solid rgb(100 116 139 / .32);border-radius:11px;padding:.5rem;display:flex;justify-content:space-between;gap:.45rem;background:#0f172acc}.thumb-card.selected{border-color:#22d3ee;box-shadow:0 0 0 2px #22d3ee3d}.thumb-card.dragging{opacity:.65}.thumb-main{appearance:none;border:none;background:transparent;color:inherit;text-align:left;padding:0;display:flex;flex-direction:column;gap:.35rem;width:100%}.thumb-preview{width:100%;height:88px;border:1px solid rgb(100 116 139 / .35);border-radius:8px;background:#0f172a;display:grid;place-items:center;overflow:hidden}.thumb-preview img{width:100%;height:100%;object-fit:cover}.thumb-placeholder{color:#94a3b8;font-size:.72rem}.thumb-title{font-weight:600;font-size:.88rem;color:#e2e8f0}.thumb-actions{display:flex;flex-direction:column;gap:.3rem}.tool-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.4rem}.chip{border:1px solid rgb(100 116 139 / .4);border-radius:999px;background:#0f172ab8;color:#cbd5e1;padding:.34rem .58rem;font-size:.78rem;text-transform:capitalize}.chip.active{border-color:#22d3ee;background:#0c4a6e73;color:#67e8f9}.controls{display:flex;flex-direction:column;gap:.55rem;margin-top:.65rem}.search-row{display:flex;align-items:center;gap:.45rem}.search-input{flex:1;min-width:0;border:1px solid rgb(100 116 139 / .55);background:#0f172aeb;color:#e2e8f0;border-radius:9px;padding:.4rem .55rem}.search-input::placeholder{color:#94a3b8}.controls label{display:flex;justify-content:space-between;align-items:center;gap:.6rem;font-size:.84rem;color:#cbd5e1}.inline-buttons{display:flex;align-items:center;gap:.45rem}.button,.ghost,.danger{border:1px solid rgb(100 116 139 / .48);background:#0f172ad6;color:#e2e8f0;border-radius:10px;padding:.48rem .75rem;font-weight:600;cursor:pointer}.button:disabled,.danger:disabled,.ghost:disabled{opacity:.55;cursor:not-allowed}.button.primary{border-color:#2563eb;color:#fff;background:linear-gradient(120deg,#2563eb,#0284c7)}.button.accent{border-color:#7c3aed;color:#fff;background:linear-gradient(120deg,#7c3aed,#db2777)}.button.subtle{padding:.36rem .58rem;font-weight:500}.ghost{border-style:dashed}.danger{border-color:#f8717199;color:#fecaca;background:#7f1d1d5c}.viewer-wrap{display:flex;flex-direction:column;min-height:0}.viewer-toolbar{border-bottom:1px solid rgb(100 116 139 / .3);padding:.7rem .95rem;display:flex;justify-content:space-between;align-items:center;gap:.8rem;flex-wrap:wrap}.viewer-stage{flex:1;min-height:0;overflow:auto;padding:1rem}.page-column{max-width:980px;margin:0 auto;display:flex;flex-direction:column;gap:1rem}.page-sheet{border:1px solid rgb(100 116 139 / .32);border-radius:14px;background:#0f172ae6;padding:.8rem;box-shadow:0 16px 36px #02061759}.page-sheet.active{border-color:#22d3ee;box-shadow:0 16px 36px #02061759,0 0 0 3px #22d3ee33}.page-sheet-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.55rem;font-size:.86rem;font-weight:600;color:#e2e8f0}.canvas-stack{position:relative;width:fit-content;max-width:100%;margin:0 auto}.viewer-canvas,.overlay-canvas{max-width:100%;height:auto;border-radius:10px;box-shadow:0 12px 26px #02061766}.overlay-canvas{position:absolute;inset:0;cursor:crosshair}.overlay-canvas.select-mode{cursor:default}.empty-view{min-height:300px;display:grid;place-items:center;color:#94a3b8}.preset-list{display:flex;flex-direction:column;gap:.4rem}.preset-list label{font-size:.84rem;color:#cbd5e1;display:flex;align-items:center;gap:.42rem}.muted{color:#94a3b8}.tiny{font-size:.76rem}.ok{color:#22c55e;font-size:.8rem}.signature-row{display:flex;align-items:center;justify-content:space-between}.modal-backdrop{position:fixed;inset:0;background:#0206179e;display:grid;place-items:center;z-index:1000}.modal{width:min(680px,calc(100vw - 2rem));border-radius:16px;border:1px solid rgb(100 116 139 / .46);background:#0f172a;padding:1rem;box-shadow:0 22px 48px #0206178c}.modal h3{margin:0;color:#f8fafc}.modal p{margin:.4rem 0 .8rem}.signature-canvas{width:100%;border-radius:10px;border:1px dashed #64748b;background:#fff}.modal-actions{display:flex;justify-content:flex-end;gap:.5rem;margin-top:.85rem}@media(max-width:1120px){.workspace{grid-template-columns:1fr}}