:root{--color-bg:#f5f5f5;--color-surface:#fff;--color-border:#e5e5e5;--color-text:#171717;--color-muted:#737373;--color-emerald:#059669;--color-emerald-hover:#047857;--color-emerald-soft:#ecfdf5;--color-danger:#ef4444;--color-danger-hover:#dc2626;--header-h:56px;--sidebar-w:320px;--radius:.5rem;--radius-lg:.75rem;--shadow:0 25px 50px -12px rgba(0,0,0,.25);--font-sans:ui-sans-serif , system-ui , sans-serif}*,*::before,*::after{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family: var(--font-sans);color:var(--color-text);background:var(--color-bg)}button{font-family:inherit;cursor:pointer}input,select,textarea{font-family:inherit}.app{min-height:100vh;display:flex;flex-direction:column}.app-header-wrap{position:sticky;top:0;z-index:50;flex-shrink:0;background:var(--color-surface);border-bottom:1px solid var(--color-border)}.app__header{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1.5rem;background:var(--color-surface);max-height:360px;overflow:hidden;transition:max-height .3s cubic-bezier(.4,0,.2,1) , opacity .25s ease , padding .3s ease}.app--header-collapsed .app__header{max-height:0;opacity:0;padding-top:0;padding-bottom:0;pointer-events:none}.header-bar-toggle{display:flex;align-items:center;justify-content:center;width:100%;height:22px;margin:0;padding:0;border:none;background:#ececec;color:#525252;cursor:pointer;transition:background .15s ease , color .15s ease}.header-bar-toggle:hover{background:#e0e0e0;color:#171717}.header-bar-toggle:focus-visible{outline:2px solid var(--color-emerald);outline-offset:-2px}.header-bar-toggle__chev{display:block}.app__brand{display:flex;align-items:center;gap:1rem}.app__logo{display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border-radius:var(--radius-lg);background:var(--color-emerald);color:#fff}.app__title{margin:0;font-size:1.125rem;font-weight:600;line-height:1}.app__byline{margin:.15rem 0 0;font-size:.6875rem;font-weight:500;color:#a3a3a3;letter-spacing:.02em}.app__subtitle{margin:.2rem 0 0;font-size:.75rem;color:var(--color-muted)}.app__toolbar{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}.app__toolbar--main{justify-content:flex-end;flex:1;gap:.65rem}body[data-role="admin"] .user-only{display:none!important}body[data-role="user"] .admin-only{display:none!important}.role-badge{font-size:.72rem;color:#525252;padding:.35rem .6rem;background:#f5f5f5;border-radius:var(--radius-lg);border:1px solid #eee;white-space:nowrap}.toolbar-cluster{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap}.toolbar-cluster--shared{padding-left:.35rem;border-left:1px solid var(--color-border);margin-left:.15rem}.btn-secondary{padding:.45rem .85rem;border:1px solid var(--color-border);border-radius:var(--radius-lg);background:#fff;font-size:.8rem;font-weight:500;cursor:pointer;color:#404040;transition:background .15s ease , border-color .15s ease}.btn-secondary:hover{background:#fafafa;border-color:#d4d4d4}.btn-logout{font-size:.8rem;font-weight:500;color:#737373;padding:.35rem .5rem;border-radius:var(--radius)}.btn-logout:hover{color:#171717}.sidebar-intro{font-size:.8rem;color:#525252;line-height:1.45;margin:0 0 1rem}.modal-footnote{font-size:.68rem;color:#a3a3a3;margin:1rem 0 0;line-height:1.45}.modal-footnote code{font-size:.65rem;background:#f5f5f5;padding:.1rem .25rem;border-radius:3px}.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;padding:0;border:none;border-radius:var(--radius-lg);background:transparent;color:#525252;transition:background .15s ease , color .15s ease}.icon-btn:hover{background:#f5f5f5}.icon-btn svg{display:block}.mode-toggle{display:flex;gap:.25rem;padding:.25rem;margin-right:1rem;background:#f5f5f5;border-radius:var(--radius-lg)}.mode-toggle__btn{display:inline-flex;align-items:center;gap:.5rem;padding:.375rem .75rem;border:none;border-radius:var(--radius);background:transparent;font-size:.875rem;font-weight:500;color:#737373;transition:all .15s ease}.mode-toggle__btn.is-active{background:#fff;color:#047857;box-shadow:0 1px 2px rgba(0,0,0,.06)}.mode-toggle__btn:hover:not(.is-active) {color:#404040}.btn-primary{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;border:none;border-radius:var(--radius-lg);background:#171717;color:#fff;font-size:.875rem;font-weight:500;transition:background .15s ease}.btn-primary:hover{background:#262626}.app__main{flex:1;display:flex;overflow:hidden;min-height:0}.sidebar-handle{flex:0 0 14px;width:14px;min-width:14px;align-self:stretch;margin:0;padding:0;border:none;border-right:1px solid var(--color-border);background:#ececec;color:#525252;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s ease , color .15s ease}.sidebar-handle:hover{background:#e0e0e0;color:#171717}.sidebar-handle:focus-visible{outline:2px solid var(--color-emerald);outline-offset:-2px}.sidebar-handle__chev{display:block;flex-shrink:0}.app__main--sidebar-collapsed .sidebar-handle{border-left:none}.sidebar{flex:0 0 var(--sidebar-w);width:var(--sidebar-w);min-width:0;max-width:var(--sidebar-w);padding:1.5rem;overflow-x:hidden;overflow-y:auto;background:var(--color-surface);border-right:1px solid var(--color-border);display:flex;flex-direction:column;gap:2rem;transition:flex-basis .28s cubic-bezier(.4,0,.2,1) , max-width .28s cubic-bezier(.4,0,.2,1) , opacity .22s ease , padding .28s ease , border-color .28s ease}.app__main--sidebar-collapsed .sidebar{flex-basis:0;width:0;max-width:0;padding-left:0;padding-right:0;opacity:0;overflow:hidden;pointer-events:none;border-right-color:transparent}.sidebar-hint-scroll{margin:0 0 1rem;padding:.45rem .55rem;font-size:.68rem;line-height:1.4;color:var(--color-muted);background:#fafafa;border-radius:var(--radius);border:1px solid #f0f0f0}.sidebar-hint-scroll kbd{display:inline-block;padding:.05rem .3rem;font-size:.62rem;font-family: var(--font-sans);background:#eee;border-radius:3px;border:1px solid #ddd}.sidebar__heading{margin:0 0 1rem;font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#a3a3a3}.field-group{margin-bottom:1rem}.field-group label{display:block;margin-bottom:.25rem;font-size:.875rem;font-weight:500;color:#404040}.sidebar-label{display:block;margin-bottom:.25rem;font-size:.875rem;font-weight:500;color:#404040}label.icon-btn--file{cursor:pointer;margin:0}.input-text,.input-number,.input-select{width:100%;padding:.5rem .75rem;border:1px solid var(--color-border);border-radius:var(--radius-lg);outline:none;transition:box-shadow .15s ease , border-color .15s ease}.input-text:focus,.input-number:focus,.input-select:focus{border-color:var(--color-emerald);box-shadow:0 0 0 2px rgba(5,150,105,.25)}.dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:8rem;border:2px dashed var(--color-border);border-radius:.75rem;cursor:pointer;transition:background .15s ease}.dropzone:hover{background:#fafafa}.dropzone--busy{pointer-events:none}.dropzone__text{margin:.5rem 0 0;font-size:.75rem;color:var(--color-muted)}.tools-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}.tool-btn{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:.75rem;border:1px solid var(--color-border);border-radius:.75rem;background:#fff;color:#525252;font-size:.625rem;font-weight:500;transition:border-color .15s ease , background .15s ease , color .15s ease}.tool-btn:hover{border-color:var(--color-emerald);background:var(--color-emerald-soft);color:#047857}.props{margin-top:auto;padding-top:1.5rem;border-top:1px solid #f5f5f5}.props__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}.props__actions{display:flex;gap:.25rem}.props__actions .icon-btn{width:2rem;height:2rem}.props__actions .icon-btn--danger:hover{background:#fef2f2;color:var(--color-danger)}.props__actions .icon-btn--clone:hover{background:var(--color-emerald-soft);color:var(--color-emerald)}.props__hint{margin:0 0 1rem;padding:.5rem .65rem;font-size:.7rem;line-height:1.45;color:var(--color-muted);background:#fafafa;border-radius:var(--radius);border:1px solid #f0f0f0}.props__hint kbd{display:inline-block;padding:.05rem .3rem;font-size:.65rem;font-family: var(--font-sans);background:#eee;border-radius:3px;border:1px solid #ddd}.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}.canvas-wrap{flex:1;min-width:0;min-height:0;overflow:auto;overscroll-behavior-x:contain;overscroll-behavior-y:auto;-webkit-overflow-scrolling:touch}.canvas-wrap__inner{display:flex;justify-content:center;align-items:flex-start;box-sizing:border-box;width:max-content;min-width:100%;min-height:100%;padding:2rem}.canvas{position:relative;width:297mm;height:210mm;min-width:297mm;min-height:210mm;background-color:#fff;background-size:100% 100%;background-position:center;background-repeat:no-repeat;box-shadow:var(--shadow)}.canvas.canvas--portrait{width:210mm;height:297mm;min-width:210mm;min-height:297mm}.canvas:focus{outline:none}.canvas:focus-visible{outline:2px solid var(--color-emerald);outline-offset:3px}#form-fields{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:1}#form-fields .form-field{pointer-events:auto}.form-field--edit .form-field__input,.form-field--edit .form-field__checkbox,.form-field--edit .form-field__sig{pointer-events:none}.canvas--empty .canvas__placeholder{display:flex}.canvas__placeholder{display:none;position:absolute;inset:0;flex-direction:column;align-items:center;justify-content:center;color:#d4d4d4;pointer-events:none}.canvas__placeholder p{margin:.5rem 0 0;font-size:1.25rem;font-weight:300}.canvas__placeholder small{margin-top:.5rem;font-size:.875rem}.form-field{position:absolute;display:flex;align-items:center;justify-content:center;transition:border .15s ease , background .15s ease}.form-field--edit{cursor:move;border:1px dashed rgba(5,150,105,.6)}.form-field--edit:hover{background:rgba(236,253,245,.3)}.form-field--selected{border:2px solid var(--color-emerald);background:rgba(236,253,245,.5);z-index:10}.form-field--fill:hover{background:rgba(245,245,245,.2)}.form-field__input{width:100%;height:100%;border:none;outline:none;background:transparent;text-align:left;padding:0 .25rem}.form-field__input:disabled{cursor:move}.form-field__input::placeholder{color:rgba(4,120,87,.5)}.form-field__checkbox{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-weight:700;cursor:pointer}.form-field__checkbox.is-edit{pointer-events:none}.form-field__sig{width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden;cursor:pointer}.form-field__sig.is-edit{pointer-events:none}.form-field__sig--empty{background:#fafafa;border:1px dashed #d4d4d4;border-radius:.25rem}.form-field__sig img{max-width:100%;max-height:100%;object-fit:contain}.form-field__sig-hint{font-size:.625rem;color:#a3a3a3}.form-field__label{position:absolute;top:-1.5rem;left:0;padding:.125rem .375rem;border-radius:.25rem;background:var(--color-emerald);color:#fff;font-size:.625rem;white-space:nowrap;opacity:0;transition:opacity .15s ease;pointer-events:none}.form-field:hover .form-field__label{opacity:1}.spinner{width:1.5rem;height:1.5rem;border:2px solid var(--color-emerald);border-top-color:transparent;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}.modal-overlay{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:1rem;background:rgba(0,0,0,.5)}.modal-overlay--confirm{z-index:110}.modal{width:100%;max-width:28rem;padding:1.5rem;border-radius:1rem;background:#fff;box-shadow:var(--shadow)}.modal--wide{max-width:32rem}.modal__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}.modal__title{margin:0;font-size:1.125rem;font-weight:600}.modal__body{margin-bottom:1rem}.modal__search{margin-bottom:1rem}.modal__list{max-height:400px;overflow-y:auto;padding-right:.5rem}.template-row{display:flex;align-items:center;justify-content:space-between;padding:.75rem;border:1px solid #f5f5f5;border-radius:.75rem;margin-bottom:.5rem;transition:background .15s ease}.template-row:hover{background:#fafafa}.template-row__name{flex:1;margin-right:.5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border:none;background:none;text-align:left;font-size:.875rem;font-weight:500;cursor:pointer}.template-row__actions{display:flex;gap:.25rem}.btn-ghost{padding:.5rem 1rem;width:100%;border:1px solid var(--color-border);border-radius:var(--radius-lg);background:#fff;font-size:.875rem;font-weight:500;transition:background .15s ease}.btn-ghost:hover{background:#fafafa}.btn-row{display:flex;gap:.75rem}.btn-row .btn-ghost,.btn-row .btn-danger{flex:1}.btn-danger{padding:.5rem 1rem;border:none;border-radius:var(--radius-lg);background:var(--color-danger);color:#fff;font-size:.875rem;font-weight:500;transition:background .15s ease}.btn-danger:hover{background:var(--color-danger-hover)}.btn-emerald{padding:.5rem 1rem;border:none;border-radius:var(--radius-lg);background:var(--color-emerald);color:#fff;font-size:.875rem;font-weight:500;transition:background .15s ease}.btn-emerald:hover{background:var(--color-emerald-hover)}.sig-canvas-wrap{border:2px dashed var(--color-border);border-radius:.75rem;overflow:hidden;background:#fafafa;margin-bottom:1rem}.sig-canvas{display:block;width:100%;height:200px;cursor:crosshair;touch-action:none}.toast{position:fixed;bottom:2rem;left:50%;transform:translateX(-50%);z-index:120;display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;border-radius:.75rem;box-shadow:var(--shadow);color:#fff;font-size:.875rem;font-weight:500;max-width:90vw}.toast--success{background:var(--color-emerald)}.toast--error{background:var(--color-danger)}.toast__close{margin-left:.5rem;padding:0;border:none;background:none;color:inherit;opacity:.7;cursor:pointer}.toast__close:hover{opacity:1}.is-hidden{display:none!important}@media print{.app-header-wrap,.sidebar,.sidebar-handle{display:none!important}.app__main{overflow:visible}.canvas-wrap{overflow:visible}.canvas-wrap__inner{display:block;width:auto;min-width:0;min-height:0;padding:0}.canvas{box-shadow:none;margin:0}.form-field--edit{border:none;background:transparent}.form-field__label{display:none}}