:root{
  --blue:#1446F0;--blue-d:#0E36C2;--navy:#0A1330;--ink:#18223F;--muted:#5B6685;--line:#E2E7F3;--bg:#EEF2FA;--panel:#fff;
  --sel:#1446F0;--danger:#E5372B;--ok:#0B7A50;--r:12px;
  --bar-h:60px;--tools-h:58px;--thumbs-w:176px;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;color:var(--ink);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg)}
body{overflow:hidden;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit}
svg.i{width:20px;height:20px;flex-shrink:0;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
[hidden]{display:none!important}
#app{height:100%;display:flex;flex-direction:column}
#app.is-empty [data-when="doc"]{display:none!important}
#app:not(.is-empty) [data-when="empty"]{display:none!important}
body:not(.is-empty) .foot{display:none}
:focus-visible{outline:3px solid #FFB020;outline-offset:2px}

/* кнопки */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 16px;border-radius:10px;border:1px solid transparent;background:#fff;font-weight:700;font-size:14px;cursor:pointer;white-space:nowrap;text-decoration:none;color:var(--ink);transition:background .15s,border-color .15s,transform .05s}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--blue);color:#fff}
.btn--primary:hover{background:var(--blue-d)}
.btn--ghost{background:transparent;border-color:rgba(255,255,255,.35);color:#fff}
.btn--ghost:hover{background:rgba(255,255,255,.12)}
.btn--line{border-color:var(--line)}
.btn--line:hover{border-color:#C4CDE4;background:#F7F9FE}
.btn--danger{color:var(--danger);border-color:#F7D3D0}
.btn--lg{height:54px;padding:0 26px;font-size:16px;border-radius:14px}
.btn[disabled]{opacity:.5;pointer-events:none}
.linkbtn{border:0;background:none;color:var(--blue);font-weight:700;cursor:pointer;display:inline-flex;gap:8px;align-items:center;padding:8px}

/* шапка */
.bar{height:var(--bar-h);flex-shrink:0;display:flex;align-items:center;gap:14px;padding:0 16px;background:var(--navy);color:#fff}
.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-weight:800;font-size:17px}
.brand__logo{background:var(--blue);border-radius:9px;padding:5px 7px;font-size:13px;letter-spacing:.5px}
.bar__file{display:flex;align-items:baseline;gap:10px;min-width:0;padding-left:14px;border-left:1px solid rgba(255,255,255,.15)}
.bar__name{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:36vw}
.bar__meta{color:#9FB0D8;font-size:13px;white-space:nowrap}
.bar__spacer{flex:1}

/* инструменты */
.tools{height:var(--tools-h);flex-shrink:0;display:flex;align-items:center;gap:6px;padding:0 10px;background:#fff;border-bottom:1px solid var(--line);overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
.tools::-webkit-scrollbar{display:none}
.tools__group{display:flex;align-items:center;gap:2px;padding-right:8px;margin-right:4px;border-right:1px solid var(--line)}
.tools__group--end{margin-left:auto;border-right:0}
.tools__sep{width:1px;height:26px;background:var(--line);margin:0 4px}
.tool{position:relative;display:inline-flex;align-items:center;gap:7px;height:42px;padding:0 11px;border:0;border-radius:10px;background:none;cursor:pointer;font-size:13.5px;font-weight:600;color:var(--ink);white-space:nowrap}
.tool:hover{background:#F0F3FA}
.tool.is-active{background:#E6ECFF;color:var(--blue)}
.tool[disabled]{opacity:.35;pointer-events:none}
.tool--menu{padding:0;height:auto}
.tool__chev{width:14px;height:14px;margin-left:-2px;opacity:.6}
.zoomval{border:0;background:none;font-weight:700;font-size:13px;min-width:52px;height:42px;cursor:pointer;border-radius:10px}
.zoomval:hover{background:#F0F3FA}
.menu{position:fixed;z-index:50;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 20px 40px -12px rgba(10,19,48,.3);padding:6px;display:flex;flex-direction:column;min-width:200px}
.menu button{display:flex;align-items:center;gap:10px;border:0;background:none;padding:10px 12px;border-radius:8px;cursor:pointer;font-size:14px;font-weight:600;text-align:left}
.menu button:hover{background:#F0F3FA}

/* панель свойств */
.props{flex-shrink:0;display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 14px;background:#F8FAFF;border-bottom:1px solid var(--line);font-size:13px;min-height:52px}
.props__title{font-weight:800;color:var(--muted);text-transform:uppercase;font-size:11px;letter-spacing:.8px;margin-right:4px}
.props select,.props input[type=number]{height:34px;border:1px solid var(--line);border-radius:8px;padding:0 8px;background:#fff;font:inherit;font-size:13px}
.props input[type=number]{width:64px}
.props input[type=range]{width:110px;accent-color:var(--blue)}
.props label{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-weight:600}
.props .seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#fff}
.props .seg button{border:0;background:none;width:34px;height:32px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.props .seg button.is-on{background:#E6ECFF;color:var(--blue)}
.props .seg button + button{border-left:1px solid var(--line)}
.props .seg svg.i{width:16px;height:16px}
.swatches{display:inline-flex;gap:5px;align-items:center}
.sw{width:24px;height:24px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--line);cursor:pointer;padding:0}
.sw.is-on{box-shadow:0 0 0 2px var(--blue)}
.sw--pick{position:relative;overflow:hidden;background:conic-gradient(red,yellow,lime,cyan,blue,magenta,red)}
.sw--pick input{position:absolute;inset:-6px;opacity:0;cursor:pointer}
.props__hint{color:var(--muted)}
.props__sp{flex:1}

/* рабочая зона */
.work{flex:1;min-height:0;display:flex;position:relative}
.thumbs{width:var(--thumbs-w);flex-shrink:0;overflow-y:auto;background:#F7F9FD;border-right:1px solid var(--line);padding:14px 12px 40px;display:flex;flex-direction:column;gap:14px}
.th{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;border-radius:10px;padding:6px;user-select:none}
.th:hover{background:#EDF1FA}
.th.is-cur{background:#E6ECFF}
.th__img{position:relative;background:#fff;box-shadow:0 1px 3px rgba(10,19,48,.18);border-radius:3px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.th__img canvas{display:block;max-width:100%;height:auto}
.th__n{font-size:12px;font-weight:700;color:var(--muted)}
.th__acts{position:absolute;top:10px;right:10px;display:none;gap:3px}
.th:hover .th__acts,.th.is-cur .th__acts{display:flex}
.th__acts button{width:26px;height:26px;border-radius:7px;border:0;background:rgba(10,19,48,.78);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.th__acts svg.i{width:14px;height:14px}
.th.sortable-ghost{opacity:.35}
.viewer{flex:1;min-width:0;overflow:auto;position:relative;outline:none;overscroll-behavior:contain}
.pages{display:flex;flex-direction:column;align-items:center;gap:18px;padding:24px 24px 120px;min-width:min-content}
.page{position:relative;background:#fff;box-shadow:0 2px 10px -2px rgba(10,19,48,.22);flex-shrink:0}
.page__canvas{position:absolute;inset:0;width:100%;height:100%}
.page__label{position:absolute;left:-2px;top:-20px;font-size:11px;font-weight:700;color:var(--muted)}
.layer{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.layer--obj > .obj,.layer--obj .handles i,.layer--obj .handles .del{pointer-events:auto}
.layer--obj > .obj{touch-action:none}
.fld{pointer-events:auto}
#app:not(.tool-select):not(.tool-edittext) .fld{pointer-events:none}
.page{touch-action:pan-x pan-y}
.cur-crosshair .page,.cur-text .page{touch-action:none}
.cur-crosshair .page{cursor:crosshair}
.cur-text .page{cursor:text}

/* объекты */
.obj{position:absolute;transform-origin:0 0}
.obj--text{white-space:pre;line-height:1.2;outline:none;min-width:4px;cursor:move;padding:0}
.obj--text[data-w]{white-space:pre-wrap;word-break:break-word}
.obj--text.is-editing{cursor:text;outline:1.5px dashed var(--sel);outline-offset:1px}
.obj--text:empty::before{content:attr(data-ph);color:#9AA5C0}
.obj--img{user-select:none;-webkit-user-drag:none}
.obj--img img{width:100%;height:100%;display:block;pointer-events:none}
.obj svg{overflow:visible;display:block}
.obj--patch{pointer-events:auto}
.obj.is-sel{outline:1.5px solid var(--sel);outline-offset:2px}
.handles{position:absolute;pointer-events:none;border:1.5px solid var(--sel);z-index:5}
.handles i{position:absolute;width:12px;height:12px;background:#fff;border:2px solid var(--sel);border-radius:3px;pointer-events:auto;margin:-7px 0 0 -7px}
.handles i[data-h=nw]{left:0;top:0;cursor:nwse-resize}
.handles i[data-h=ne]{left:100%;top:0;cursor:nesw-resize}
.handles i[data-h=sw]{left:0;top:100%;cursor:nesw-resize}
.handles i[data-h=se]{left:100%;top:100%;cursor:nwse-resize}
.handles i[data-h=e]{left:100%;top:50%;cursor:ew-resize}
.handles i[data-h=w]{left:0;top:50%;cursor:ew-resize}
.handles i[data-h=p1],.handles i[data-h=p2]{border-radius:50%;cursor:move}
.handles .del{position:absolute;right:-12px;top:-40px;pointer-events:auto;width:30px;height:30px;border-radius:9px;border:0;background:var(--navy);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center}
.handles .del svg.i{width:16px;height:16px}
.handles.is-line{border:0}
.draft{position:absolute;border:1.5px dashed var(--sel);background:rgba(20,70,240,.06);pointer-events:none}

/* режим «изменить текст» */
.tline{position:absolute;pointer-events:auto;cursor:text;border-radius:2px;touch-action:manipulation}
.tline:hover{background:rgba(20,70,240,.10);box-shadow:0 0 0 1px rgba(20,70,240,.55)}
.tool-edittext .tline{background:rgba(20,70,240,.035)}
.search-hit{position:absolute;background:rgba(255,196,0,.4);pointer-events:none;border-radius:2px}
.search-hit.is-cur{background:rgba(255,120,0,.55)}

/* поля форм */
.fld{position:absolute;border:0;background:#EDF1FF;box-shadow:inset 0 -1.5px 0 rgba(20,70,240,.55);font-family:"E-Sans";color:#000;padding:0 3px;outline:none;pointer-events:auto}
.fld:focus{background:#E2E9FF;box-shadow:inset 0 0 0 1.5px var(--blue)}
.fld[type=checkbox],.fld[type=radio]{margin:0;accent-color:var(--blue);box-shadow:none;background:none}
textarea.fld{resize:none;line-height:1.2;padding-top:2px}

/* старт */
.start{flex:1;overflow:auto;background:radial-gradient(1200px 500px at 50% -10%,#DCE5FF,transparent),var(--bg)}
.start__inner{max-width:1040px;margin:0 auto;padding:48px 20px 60px;text-align:center}
.start h1{font-size:clamp(30px,5vw,54px);line-height:1.05;margin:0 0 16px;color:var(--navy);letter-spacing:-.02em}
.start h1 span{color:var(--blue)}
.start__lead{max-width:680px;margin:0 auto 28px;font-size:clamp(16px,2vw,19px);line-height:1.55;color:var(--muted)}
.drop{display:flex;flex-direction:column;align-items:center;gap:10px;max-width:640px;margin:0 auto;padding:40px 20px;border:2.5px dashed #B7C6F2;border-radius:24px;background:#fff;cursor:pointer;transition:border-color .15s,background .15s;box-shadow:0 30px 60px -30px rgba(20,70,240,.35)}
.drop:hover,.drop.is-over{border-color:var(--blue);background:#F6F8FF}
.drop__icon{width:64px;height:64px;border-radius:18px;background:#E6ECFF;color:var(--blue);display:flex;align-items:center;justify-content:center}
.drop__icon svg.i{width:32px;height:32px}
.drop b{font-size:20px}
.drop span{color:var(--muted)}
.drop .btn{color:#fff}
.drop small{color:#8C96B0}
.features{list-style:none;padding:0;margin:40px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;text-align:left}
.features li{background:#fff;border-radius:16px;padding:18px;display:grid;grid-template-columns:40px 1fr;column-gap:12px;row-gap:2px;border:1px solid var(--line)}
.features li svg.i{grid-row:span 2;width:40px;height:40px;padding:9px;border-radius:12px;background:#E6ECFF;color:var(--blue)}
.features li span{color:var(--muted);font-size:14px;line-height:1.45}
.foot{position:fixed;left:0;right:0;bottom:0;text-align:center;font-size:13px;color:var(--muted);padding:10px;background:linear-gradient(transparent,var(--bg) 40%)}
.foot a{color:var(--blue);font-weight:700}
body:not(.is-empty) .foot{display:none}

/* всплывашки */
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:90;background:var(--navy);color:#fff;padding:12px 18px;border-radius:12px;font-weight:600;font-size:14px;box-shadow:0 20px 40px -10px rgba(10,19,48,.5);max-width:calc(100% - 32px);text-align:center}
.toast.is-err{background:#B42318}
.loader{position:fixed;inset:0;z-index:95;background:rgba(238,242,250,.8);backdrop-filter:blur(2px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;font-size:16px}
.loader__spin{width:44px;height:44px;border:4px solid #C9D6FF;border-top-color:var(--blue);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.dropveil{position:fixed;inset:0;z-index:94;background:rgba(20,70,240,.12);border:4px dashed var(--blue);display:flex;align-items:center;justify-content:center;pointer-events:none}
.dropveil div{background:#fff;padding:24px 32px;border-radius:18px;display:flex;align-items:center;gap:12px;font-size:18px;box-shadow:0 20px 40px -10px rgba(10,19,48,.3)}

/* поиск */
.search{position:fixed;right:18px;top:calc(var(--bar-h) + var(--tools-h) + 10px);z-index:40;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 16px 40px -12px rgba(10,19,48,.35);display:flex;align-items:center;gap:4px;padding:4px 4px 4px 12px}
.search input{border:0;outline:none;height:36px;font:inherit;width:220px}
.search__count{font-size:12px;color:var(--muted);min-width:44px;text-align:right}

/* модалки */
.modal{position:fixed;inset:0;z-index:80;background:rgba(10,19,48,.55);display:flex;align-items:center;justify-content:center;padding:16px}
.modal__box{background:#fff;border-radius:20px;width:min(640px,100%);max-height:calc(100vh - 32px);display:flex;flex-direction:column;box-shadow:0 30px 80px -20px rgba(0,0,0,.5);overflow:hidden}
.modal__box--wide{width:min(1100px,100%);height:calc(100vh - 32px)}
.modal__head{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line)}
.modal__head h2{margin:0;font-size:18px;flex:1}
.modal__x{border:0;background:#F0F3FA;width:36px;height:36px;border-radius:10px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.modal__body{padding:20px;overflow:auto;flex:1}
.modal__foot{display:flex;gap:10px;justify-content:flex-end;padding:14px 20px;border-top:1px solid var(--line);flex-wrap:wrap}
.tabs{display:flex;gap:4px;background:#F0F3FA;border-radius:12px;padding:4px;margin-bottom:16px}
.tabs button{flex:1;border:0;background:none;height:38px;border-radius:9px;font-weight:700;cursor:pointer}
.tabs button.is-on{background:#fff;box-shadow:0 1px 3px rgba(10,19,48,.15);color:var(--blue)}
.sigpad{width:100%;height:220px;border:1.5px dashed #B7C6F2;border-radius:14px;touch-action:none;background:#FBFCFF;display:block;cursor:crosshair}
.sigrow{display:flex;gap:10px;align-items:center;margin-top:10px;flex-wrap:wrap}
.sigtype{width:100%;height:84px;border:1.5px solid var(--line);border-radius:14px;padding:0 16px;font:48px "E-Hand",cursive;outline:none}
.sigsaved{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.sigsaved button{position:relative;border:1.5px solid var(--line);background:#fff;border-radius:12px;padding:8px;cursor:pointer;height:70px;width:150px;display:flex;align-items:center;justify-content:center}
.sigsaved button:hover{border-color:var(--blue)}
.sigsaved img{max-width:100%;max-height:100%}
.sigsaved .x{position:absolute;top:-8px;right:-8px;width:22px;height:22px;border-radius:50%;background:var(--navy);color:#fff;font-size:12px;line-height:22px;padding:0;border:0}
.stamps{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
.stamps button{border:1.5px solid var(--line);background:#fff;border-radius:14px;padding:14px 8px;cursor:pointer;display:flex;align-items:center;justify-content:center;min-height:84px}
.stamps button:hover{border-color:var(--blue);background:#F7F9FF}
.upl{display:flex;flex-direction:column;align-items:center;gap:8px;padding:28px;border:2px dashed #B7C6F2;border-radius:16px;cursor:pointer;text-align:center;color:var(--muted)}
.upl:hover{border-color:var(--blue)}
.chk{display:flex;gap:10px;align-items:flex-start;margin:12px 0;font-size:14px;line-height:1.4}
.chk input{width:18px;height:18px;margin-top:1px;accent-color:var(--blue)}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;font-size:14px;font-weight:600}
.field input,.field select{height:42px;border:1px solid var(--line);border-radius:10px;padding:0 12px;font:inherit;font-weight:500}
.moregrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.moregrid button{display:grid;grid-template-columns:40px 1fr;column-gap:12px;text-align:left;border:1.5px solid var(--line);background:#fff;border-radius:14px;padding:14px;cursor:pointer}
.moregrid button:hover{border-color:var(--blue);background:#F7F9FF}
.moregrid svg.i{grid-row:span 2;width:40px;height:40px;padding:9px;border-radius:12px;background:#E6ECFF;color:var(--blue)}
.moregrid b{font-size:15px}
.moregrid span{color:var(--muted);font-size:13px;line-height:1.4}
.note{background:#FFF6E0;color:#6B4A00;border-radius:12px;padding:12px 14px;font-size:13.5px;line-height:1.45;margin-top:12px}

/* организатор страниц */
.org{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:18px;padding:4px}
.org .th{background:#fff;border:2px solid transparent}
.org .th.is-picked{border-color:var(--blue);background:#EEF3FF}
.org .th__chk{position:absolute;left:12px;top:12px;width:22px;height:22px;border-radius:6px;background:#fff;border:2px solid #B7C6F2;display:flex;align-items:center;justify-content:center}
.org .th.is-picked .th__chk{background:var(--blue);border-color:var(--blue);color:#fff}
.org .th__chk svg.i{width:14px;height:14px;opacity:0}
.org .th.is-picked .th__chk svg.i{opacity:1}
.orgbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.orgbar .sp{flex:1}

/* мобильная версия */
@media (max-width:900px){
  :root{--thumbs-w:0px;--bar-h:54px;--tools-h:56px}
  .thumbs{display:none}
  .tool span{display:none}
  .tool{padding:0 10px}
  .tool--menu .tool__chev{display:none}
  .bar__meta,.brand__name{display:none}
  .bar .btn span{display:none}
  .bar .btn{padding:0 12px}
  .pages{padding:14px 10px 120px;gap:12px}
  .features{grid-template-columns:1fr}
  .props{padding:8px 10px;gap:8px}
  .search{left:10px;right:10px}
  .search input{width:auto;flex:1}
}
@media (max-width:560px){
  .start__inner{padding-top:28px}
  .drop{padding:28px 16px}
  .modal{padding:0;align-items:flex-end}
  .modal__box{border-radius:20px 20px 0 0;max-height:94vh}
  .modal__box--wide{height:94vh}
}
@media (max-width:900px){
  .props{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;min-height:50px}
  .props::-webkit-scrollbar{display:none}
  .props > *{flex-shrink:0}
  .props .props__hint{white-space:nowrap}
  .props .btn span,.props .btn{font-size:13px}
}

.scanbtn{position:absolute;left:50%;top:24px;transform:translateX(-50%);pointer-events:auto;display:flex;align-items:center;gap:12px;text-align:left;border:0;border-radius:14px;padding:14px 18px;background:var(--blue);color:#fff;font-size:14px;line-height:1.35;cursor:pointer;box-shadow:0 16px 40px -12px rgba(20,70,240,.6);max-width:calc(100% - 24px)}
.scanbtn svg.i{width:28px;height:28px;flex-shrink:0}
.scanbtn:hover{background:var(--blue-d)}
.layerhint{position:absolute;outline:1.5px dashed rgba(20,70,240,.55);outline-offset:1px;border-radius:2px;pointer-events:none;background:rgba(20,70,240,.03)}