*{box-sizing:border-box}body{margin:0;font-family:Inter,Arial,sans-serif;background:#f4f5f7;color:#202124}header{height:64px;background:white;border-bottom:1px solid #ddd;display:flex;align-items:center;gap:28px;padding:0 24px;font-size:18px}header b{font-size:21px}header span{color:#777;font-size:14px}main{padding:18px;max-width:1700px;margin:auto}.toolbar,.bottom{display:flex;gap:10px;align-items:center;background:white;padding:12px;border-radius:12px;margin-bottom:14px}.toolbar button,.upload,.bottom button,.actions button,.mode button,.sizes button{border:1px solid #d0d4da;background:white;border-radius:9px;padding:9px 13px;cursor:pointer}.toolbar button:disabled,.bottom button:disabled{opacity:.45}.upload{display:inline-block}.upload input{display:none}.workspace{display:grid;grid-template-columns:270px minmax(500px,1fr) 330px;gap:14px;align-items:start}aside,.sheetWrap{background:white;border-radius:12px;padding:14px}.sheetWrap{min-height:650px}.sheetTitle{text-align:center;color:#777;margin-bottom:10px}.sheet{width:min(100%,900px);aspect-ratio:297/210;margin:auto;background:#fff;border:1px solid #ddd;position:relative;overflow:hidden;box-shadow:0 8px 25px #00000010}.empty{position:absolute;inset:0;display:grid;place-items:center;color:#aaa}.el{padding:8px;border-bottom:1px solid #eee}.thumb{width:100%;height:110px;object-fit:contain;background:linear-gradient(45deg,#f2f2f2 25%,transparent 25%),linear-gradient(-45deg,#f2f2f2 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#f2f2f2 75%),linear-gradient(-45deg,transparent 75%,#f2f2f2 75%);background-size:14px 14px;background-position:0 0,0 7px,7px -7px,-7px 0}.row{display:flex;justify-content:space-between;align-items:center;gap:6px}.editBtn{padding:5px 8px;border:1px solid #ddd;border-radius:7px;background:white}.sizes{margin-top:18px;border-top:1px solid #eee;padding-top:10px}.sizes input{width:100%;padding:9px;border:1px solid #ccc;border-radius:8px;margin:5px 0}.sizes p{font-size:12px;color:#777}.editor canvas{width:100%;max-height:450px;display:block;background:#eee;cursor:crosshair}.mode{display:flex;gap:6px;margin-bottom:10px}.mode button.active{outline:2px solid #888}.actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}.bottom{margin-top:14px}.bottom #status{margin-left:auto;color:#666}.sheetItem{position:absolute;transform-origin:top left}.sheetItem img{display:block;max-width:none}.sheetLabel{position:absolute;left:0;top:-22px;font-size:11px;background:#fff;padding:1px 3px;white-space:nowrap}@media(max-width:1100px){.workspace{grid-template-columns:220px 1fr}.editor{grid-column:1/-1}}@media(max-width:750px){.workspace{grid-template-columns:1fr}.sheetWrap{order:-1}.toolbar{flex-wrap:wrap}}

/* Processing modal */
.processing-modal{
  position:fixed;
  inset:0;
  z-index:9999;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(20,24,30,.58);
  backdrop-filter:blur(3px);
}

.processing-modal.show{
  display:flex;
}

.processing-box{
  width:min(430px,calc(100vw - 40px));
  padding:34px 30px 30px;
  background:#fff;
  border-radius:20px;
  box-shadow:0 25px 80px rgba(0,0,0,.25);
  text-align:center;
}

.processing-spinner{
  width:52px;
  height:52px;
  margin:0 auto 22px;
  border:5px solid #e7e7e7;
  border-top-color:#555;
  border-radius:50%;
  animation:processingSpin .8s linear infinite;
}

.processing-title{
  font-size:21px;
  font-weight:700;
  color:#202124;
  margin-bottom:9px;
}

.processing-text{
  font-size:15px;
  color:#777;
  min-height:22px;
}

.processing-dots{
  margin-top:18px;
  display:flex;
  justify-content:center;
  gap:6px;
}

.processing-dots span{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#999;
  animation:processingDots 1.2s infinite ease-in-out;
}

.processing-dots span:nth-child(2){animation-delay:.15s}
.processing-dots span:nth-child(3){animation-delay:.3s}

@keyframes processingSpin{
  to{transform:rotate(360deg)}
}

@keyframes processingDots{
  0%,80%,100%{opacity:.25;transform:scale(.75)}
  40%{opacity:1;transform:scale(1)}
}

/* Interactive A4 layout editor */
.layoutControls{
  margin-top:14px;
  padding:14px;
  border:1px solid #e2e4e8;
  border-radius:12px;
  background:#fafafa;
}

.layoutMode{display:flex;align-items:center;gap:6px;margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid #e2e4e8}
.layoutMode span{font-size:12px;color:#666;margin-right:4px}
.layoutMode button{border:1px solid #d0d4da;background:white;border-radius:8px;padding:7px 10px;cursor:pointer;font-size:12px}
.layoutMode button.active{background:#202124;color:white;border-color:#202124}

.layoutControlsTitle{
  font-size:14px;
  margin-bottom:12px;
}

.layoutControlRow{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-bottom:8px;
}

.layoutControls label{
  display:flex;
  flex-direction:column;
  gap:4px;
  font-size:12px;
  color:#666;
}

.layoutControls input{
  width:100%;
  padding:8px;
  border:1px solid #ccc;
  border-radius:7px;
  background:white;
  font-size:14px;
}

.layoutControlButtons{
  display:flex;
  gap:8px;
  margin-top:10px;
}

.layoutControlButtons button{
  border:1px solid #d0d4da;
  background:white;
  border-radius:8px;
  padding:8px 12px;
  cursor:pointer;
}

.layoutControlButtons .danger{
  color:#b42318;
}

.layoutHint{
  margin-top:10px;
  font-size:11px;
  color:#888;
}

.sheet{
  user-select:none;
  touch-action:none;
}

.sheetItem{
  position:absolute;
  transform-origin:center center;
  cursor:grab;
  user-select:none;
  touch-action:none;
}

.sheetItem:active{
  cursor:grabbing;
}

.sheetItem.selected{
  outline:2px solid #555;
  outline-offset:3px;
}

.sheetItem img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  pointer-events:none;
}

.sheetItem .sheetNumber{
  position:absolute;
  left:-5px;
  top:-5px;
  min-width:22px;
  height:22px;
  padding:0 5px;
  border-radius:11px;
  background:#202124;
  color:white;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:700;
  z-index:5;
  pointer-events:none;
  box-shadow:0 2px 5px #0003;
}

.sheetItem .rotateHandle{
  position:absolute;
  right:-9px;
  top:-9px;
  width:18px;
  height:18px;
  border-radius:50%;
  background:white;
  border:2px solid #555;
  cursor:crosshair;
  z-index:6;
}


/* ===== RESULT SCREEN ===== */

.resultScreen{
  min-height:70vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px 20px 70px;
}

.resultCard{
  width:min(620px,100%);
  background:#fff;
  border:1px solid #e4e7eb;
  border-radius:24px;
  padding:42px;
  text-align:center;
  box-shadow:0 18px 55px rgba(0,0,0,.10);
}

.resultIcon{
  font-size:58px;
  line-height:1;
  margin-bottom:18px;
}

.resultCard h2{
  margin:0;
  font-size:32px;
  line-height:1.2;
}

.resultSubtitle{
  margin:12px 0 28px;
  color:#68707a;
  font-size:16px;
}

.resultInfo{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-bottom:26px;
}

.resultInfo > div{
  background:#f6f7f9;
  border-radius:14px;
  padding:16px 12px;
}

.resultInfo span{
  display:block;
  color:#747b84;
  font-size:13px;
  margin-bottom:6px;
}

.resultInfo b{
  display:block;
  font-size:17px;
}

.resultFiles{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:10px;
}

.resultFilesTitle{
  font-weight:700;
  font-size:17px;
  margin-bottom:4px;
}

.resultDownload{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:50px;
  padding:12px 18px;
  border-radius:12px;
  background:#f1f3f5;
  color:#202124;
  text-decoration:none;
  font-weight:600;
  transition:.15s ease;
}

.resultDownload:hover{
  transform:translateY(-1px);
  background:#e7eaee;
}

.resultDownload.resultPdf{
  background:#202124;
  color:#fff;
}

.resultDownload.resultPdf:hover{
  background:#111;
}

.resultActions{
  display:flex;
  justify-content:center;
  gap:10px;
  margin-top:28px;
  flex-wrap:wrap;
}

.resultActions button{
  min-height:46px;
  padding:10px 18px;
  border-radius:11px;
  border:1px solid #d5d9de;
  background:#fff;
  cursor:pointer;
  font-weight:600;
}

.resultActions button.primary{
  background:#202124;
  color:#fff;
  border-color:#202124;
}

.resultActions button:hover{
  opacity:.9;
}

@media(max-width:600px){
  .resultCard{
    padding:28px 18px;
    border-radius:18px;
  }

  .resultCard h2{
    font-size:26px;
  }

  .resultInfo{
    grid-template-columns:1fr;
  }
}


/* ===== RESULT MODAL FIX ===== */

.resultScreen[hidden]{
  display:none !important;
}

.resultScreen{
  position:fixed;
  inset:0;
  z-index:9999;
  min-height:100vh;
  box-sizing:border-box;
  padding:30px 20px;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(4px);
  overflow:auto;
}

.resultCard{
  margin:auto;
  position:relative;
}


/* ===== PROTECTED PREVIEW ===== */

.previewScreen[hidden]{
  display:none !important;
}

.previewScreen{
  position:fixed;
  inset:0;
  z-index:10000;
  min-height:100vh;
  box-sizing:border-box;
  padding:24px;
  background:rgba(0,0,0,.72);
  backdrop-filter:blur(5px);
  overflow:auto;
}

.previewCard{
  width:min(1200px,100%);
  min-height:calc(100vh - 48px);
  margin:0 auto;
  box-sizing:border-box;
  padding:24px;
  border-radius:20px;
  background:#f7f7f7;
  box-shadow:0 25px 80px rgba(0,0,0,.35);
}

.previewHeader{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  margin-bottom:18px;
}

.previewHeader h2{
  margin:0 0 6px;
}

.previewHeader p{
  margin:0;
  color:#666;
}

.previewIcon{
  font-size:30px;
  margin-bottom:4px;
}

.previewClose{
  width:42px;
  height:42px;
  border:0;
  border-radius:12px;
  background:#e9e9e9;
  font-size:20px;
  cursor:pointer;
}

.previewClose:hover{
  background:#ddd;
}

.previewPages{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:24px;
  padding:10px 0 20px;
}

.previewPageWrap{
  width:min(100%,1000px);
}

.previewPageTitle{
  text-align:center;
  margin-bottom:8px;
  font-weight:600;
  color:#555;
}

.previewPage{
  position:relative;
  width:100%;
  aspect-ratio:297 / 210;
  background:white;
  overflow:hidden;
  border-radius:4px;
  box-shadow:0 8px 30px rgba(0,0,0,.18);
}

.previewPage canvas{
  display:block;
  width:100%;
  height:100%;
  user-select:none;
  -webkit-user-select:none;
  -webkit-user-drag:none;
  pointer-events:none;
}

.previewWatermarkNote{
  margin:4px 0 18px;
  padding:12px 16px;
  border-radius:12px;
  background:#fff4d6;
  color:#765b18;
  font-size:14px;
  text-align:center;
}

.previewActions{
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
  padding-top:4px;
}

.previewActions button{
  min-height:46px;
  padding:0 22px;
  border-radius:12px;
  cursor:pointer;
}

.previewActions .primary{
  font-weight:600;
}

.previewScreen,
.previewScreen *{
  -webkit-touch-callout:none;
}

@media(max-width:700px){
  .previewScreen{
    padding:10px;
  }

  .previewCard{
    min-height:calc(100vh - 20px);
    padding:16px;
    border-radius:16px;
  }

  .previewHeader{
    gap:10px;
  }

  .previewHeader h2{
    font-size:21px;
  }

  .previewActions{
    flex-direction:column;
  }

  .previewActions button{
    width:100%;
  }
}


.elementActions{
  display:flex;
  gap:6px;
  align-items:center;
}

.deleteBtn{
  border:1px solid #e2b8b8;
  background:#fff5f5;
  color:#b42318;
  border-radius:8px;
  padding:6px 9px;
  cursor:pointer;
}

.deleteBtn:hover{
  background:#ffe7e7;
}


#editCanvas{
  cursor:none !important;
}

#brushCursor{
  mix-blend-mode:normal;
}


.brandLogo{
  width:40px !important;
  height:40px !important;
}

@media (max-width:700px){
  .brandLogo{
    width:34px !important;
    height:34px !important;
  }

  .brandName{
    font-size:20px !important;
  }

  .brandTagline{
    font-size:10px !important;
  }
}


.siteHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:12px 20px;
}

.brandLogo{
  display:block;
  width:220px !important;
  height:auto !important;
  max-height:70px;
  object-fit:contain;
}

.headerSubtitle{
  font-size:14px;
  opacity:.7;
}

@media (max-width:700px){
  .siteHeader{
    padding:10px 14px;
  }

  .brandLogo{
    width:165px !important;
    max-height:55px;
  }

  .headerSubtitle{
    display:none;
  }
}


.siteHeader{
  min-height:72px;
  padding:8px 28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  box-sizing:border-box;
}

.brandLogo{
  display:block;
  width:280px !important;
  height:auto !important;
  max-height:62px;
  object-fit:contain;
}

.headerSubtitle{
  font-size:14px;
  color:#777;
  white-space:nowrap;
}

@media (max-width:700px){
  .siteHeader{
    min-height:58px;
    padding:6px 14px;
  }

  .brandLogo{
    width:190px !important;
    max-height:48px;
  }

  .headerSubtitle{
    display:none;
  }
}


.siteHeader{
  min-height:86px;
  padding:10px 28px;
}

.brandLogo{
  width:180px !important;
  height:auto !important;
  max-height:none !important;
}

@media (max-width:700px){
  .siteHeader{
    min-height:68px;
    padding:8px 14px;
  }

  .brandLogo{
    width:145px !important;
    max-height:none !important;
  }
}


/* =========================================================
   TOPPIO BRAND STYLE
========================================================= */

:root{
  --toppio-brown:#4a241b;
  --toppio-brown-dark:#341710;
  --toppio-pink:#f47aa4;
  --toppio-pink-dark:#df5f8e;
  --toppio-cream:#fffaf7;
  --toppio-border:#eadfd9;
  --toppio-muted:#7d726d;
  --toppio-shadow:0 8px 30px rgba(74,36,27,.07);
}

/* Основной фон */
body{
  background:
    linear-gradient(
      180deg,
      #fffaf7 0,
      #f8f5f3 210px,
      #f4f5f7 100%
    );
  color:var(--toppio-brown);
}

/* Шапка */
.siteHeader{
  background:rgba(255,255,255,.96);
  border-bottom:1px solid var(--toppio-border);
  box-shadow:0 2px 12px rgba(74,36,27,.04);
}

.headerSubtitle{
  color:var(--toppio-muted) !important;
}

/* Верхняя панель */
.toolbar{
  background:rgba(255,255,255,.94);
  border:1px solid var(--toppio-border);
  box-shadow:var(--toppio-shadow);
}

/* Общие кнопки */
.toolbar button,
.upload,
.bottom button,
.actions button,
.mode button,
.sizes button,
.layoutMode button,
.layoutControlButtons button{
  border-color:#dfd2cc;
  color:var(--toppio-brown);
  background:white;
  transition:
    transform .15s ease,
    box-shadow .15s ease,
    border-color .15s ease,
    background .15s ease;
}

.toolbar button:hover,
.upload:hover,
.bottom button:hover,
.actions button:hover,
.mode button:hover,
.layoutMode button:hover,
.layoutControlButtons button:hover{
  border-color:#e9a2ba;
  box-shadow:0 4px 14px rgba(244,122,164,.14);
  transform:translateY(-1px);
}

/* Главная кнопка оптимизации */
#packBtn{
  background:linear-gradient(
    135deg,
    var(--toppio-pink),
    #f18bb0
  );
  border-color:var(--toppio-pink);
  color:white;
  font-weight:700;
  box-shadow:0 5px 16px rgba(244,122,164,.25);
}

#packBtn:hover:not(:disabled){
  background:linear-gradient(
    135deg,
    var(--toppio-pink-dark),
    var(--toppio-pink)
  );
  box-shadow:0 7px 20px rgba(244,122,164,.3);
}

/* Рабочие карточки */
aside,
.sheetWrap{
  background:rgba(255,255,255,.96);
  border:1px solid var(--toppio-border);
  box-shadow:var(--toppio-shadow);
}

/* Заголовки */
aside h3{
  color:var(--toppio-brown);
  letter-spacing:.1px;
}

.sheetTitle{
  color:#8c817b;
  font-weight:600;
}

/* Карточки элементов */
.el{
  border-bottom-color:#f0e7e2;
}

.el:hover{
  background:#fffaf8;
}

/* Номер элемента */
.sheetItem .sheetNumber{
  background:var(--toppio-brown);
}

/* Выбранный элемент */
.sheetItem.selected{
  outline-color:var(--toppio-pink);
  box-shadow:0 0 0 3px rgba(244,122,164,.12);
}

/* Кнопка редактирования */
.editBtn{
  border-color:#eadfd9;
  color:var(--toppio-brown);
  background:#fffaf8;
}

.editBtn:hover{
  border-color:#e9a2ba;
  background:#fff3f7;
}

/* Удаление */
.deleteBtn{
  border-color:#efc2ca !important;
  background:#fff7f8 !important;
  color:#b42318 !important;
}

/* Поля размеров */
.sizeInput,
.layoutControls input{
  border-color:#dfd2cc !important;
  color:var(--toppio-brown);
}

.sizeInput:focus,
.layoutControls input:focus{
  outline:none;
  border-color:var(--toppio-pink) !important;
  box-shadow:0 0 0 3px rgba(244,122,164,.13);
}

/* Редактор вырезки */
.editor{
  background:rgba(255,255,255,.96);
}

.editor canvas{
  background:#f5f2ef;
  border:1px solid #eadfd9;
  border-radius:10px;
}

/* Режимы редактора */
.mode button.active{
  outline:none;
  border-color:var(--toppio-pink);
  background:#fff1f6;
  color:var(--toppio-brown);
  box-shadow:0 0 0 2px rgba(244,122,164,.12);
}

/* Layout controls */
.layoutControls{
  background:#fffaf8;
  border-color:var(--toppio-border);
}

.layoutMode{
  border-bottom-color:#eee1db;
}

.layoutMode button.active{
  background:var(--toppio-brown);
  border-color:var(--toppio-brown);
  color:white;
}

/* Основная кнопка создания результата */
#finalBtn{
  background:linear-gradient(
    135deg,
    var(--toppio-brown),
    #663326
  );
  color:white;
  border-color:var(--toppio-brown);
  font-weight:700;
  box-shadow:0 5px 16px rgba(74,36,27,.2);
}

#finalBtn:hover:not(:disabled){
  background:var(--toppio-brown-dark);
  box-shadow:0 7px 20px rgba(74,36,27,.26);
}

/* Предпросмотр */
#previewBtn{
  border-color:#ead0dc;
  background:#fff7fa;
  color:var(--toppio-brown);
}

/* Статус */
#status{
  color:var(--toppio-muted) !important;
}

/* Пустое состояние */
.empty{
  color:#b3a7a1;
}

/* Карточка результата */
.resultCard{
  border:1px solid var(--toppio-border);
  box-shadow:0 15px 45px rgba(74,36,27,.08);
}

.resultIcon,
.previewIcon{
  filter:saturate(1.1);
}

/* Лист A4 */
.sheet{
  border-color:#dfd5d0;
  box-shadow:0 12px 35px rgba(74,36,27,.08);
}

/* Страница предпросмотра */
.previewCard{
  border-color:var(--toppio-border) !important;
  box-shadow:0 18px 55px rgba(74,36,27,.12) !important;
}

/* Модальное окно обработки */
.processing-box{
  border:1px solid var(--toppio-border);
  box-shadow:0 25px 80px rgba(74,36,27,.18);
}

.processing-spinner{
  border-top-color:var(--toppio-pink);
}

.processing-dots span{
  background:var(--toppio-pink);
}

/* Ссылки скачивания */
.resultDownload{
  border-color:#eadfd9 !important;
  background:#fffaf8 !important;
  color:var(--toppio-brown) !important;
}

.resultDownload:hover{
  border-color:#e9a2ba !important;
  background:#fff2f6 !important;
}

/* Мобильная версия */
@media(max-width:750px){

  main{
    padding:12px;
  }

  .toolbar,
  .bottom{
    border-radius:14px;
  }

  .workspace{
    gap:12px;
  }

  .sheetWrap,
  aside{
    border-radius:14px;
  }
}


.siteHeader{
  min-height:118px !important;
  height:auto !important;
  padding:8px 28px !important;
  overflow:hidden;
}

.brandLogo{
  width:150px !important;
  height:auto !important;
  max-height:none !important;
  display:block;
}

@media (max-width:700px){
  .siteHeader{
    min-height:86px !important;
    padding:6px 14px !important;
  }

  .brandLogo{
    width:110px !important;
  }

  .headerSubtitle{
    display:none;
  }
}


.siteHeader{
  min-height:96px !important;
  padding:6px 28px !important;
}

.brandLogo{
  width:150px !important;
}

@media (max-width:700px){
  .siteHeader{
    min-height:72px !important;
    padding:5px 14px !important;
  }

  .brandLogo{
    width:110px !important;
  }
}