/* ── СБРОС ── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }

:root {
  --bg:#ffffff; --bg2:#f8f9fa; --bg3:#f1f3f5; --bg4:#e9ecef;
  --border:rgba(0,0,0,.07); --border2:rgba(0,0,0,.12);
  --accent:#7c5cfc; --accent2:#6040cc;
  --accent-g:linear-gradient(135deg,#7c5cfc,#9d7dfd);
  --text:#1a1a2e; --text2:#55557a; --text3:#9090aa;
  --red:#d93030; --r:14px; --r2:10px;
  --sb-w:240px; --hdr-h:58px;
}

:root {
  --ps0:#e85d3c; --ps1:#3c8ce8; --ps2:#3cbe6e; --ps3:#e8c43c;
  --ps4:#c43ce8; --ps5:#3ce8d4; --ps6:#e83c7a; --ps7:#8be83c;
}

html { height:100%; }
body { height:100%; width:100%; background:var(--bg); color:var(--text); font-family:'Sora',-apple-system,sans-serif; overflow:hidden; -webkit-font-smoothing:antialiased; display:flex; flex-direction:column; }

/* ══ ГЛАВНАЯ РАСКЛАДКА (PDF24-style) ══ */
#app { height:100vh; height:100dvh; display:flex; flex-direction:column; overflow:hidden; }

/* ── HEADER ── */
.app-header {
  flex-shrink:0; height:var(--hdr-h);
  background:var(--bg); border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:10px; padding:0 14px;
  position:relative; z-index:100;
}

.hdr-hamburger {
  width:36px; height:36px; border:none; background:transparent;
  color:var(--text2); font-size:20px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  border-radius:8px; flex-shrink:0; font-family:inherit;
  transition:background .15s,color .15s;
}
.hdr-hamburger:active { background:var(--bg3); color:var(--text); }
@media (min-width:1024px) { .hdr-hamburger { display:none; } }

.hdr-logo { display:flex; align-items:center; cursor:pointer; }
.header-logo-img { height:38px; width:auto; display:block; flex-shrink:0; object-fit:contain; filter:drop-shadow(0 2px 4px rgba(0,0,0,.1)); }

/* ── HEADER NAV (desktop) ── */
.hdr-nav { display:none; align-items:center; gap:2px; flex-shrink:0; }
@media (min-width:720px) { .hdr-nav { display:flex; } }

.hdr-nav-item { position:relative; }

/* Прозрачный мост заполняет зазор между кнопкой и дропдауном */
.hdr-nav-item::after {
  content:'';
  position:absolute;
  top:100%;
  left:-8px; right:-8px;
  height:10px;
}

.hdr-nav-btn {
  height:36px; padding:0 12px;
  background:transparent; border:none;
  color:var(--text2); font-size:12.5px; font-weight:600;
  cursor:pointer; font-family:inherit;
  display:flex; align-items:center; gap:5px;
  border-radius:8px;
  transition:background .12s, color .12s;
  white-space:nowrap;
}
.hdr-nav-btn:hover,
.hdr-nav-item.open .hdr-nav-btn { background:var(--bg3); color:var(--text); }

.nav-chevron { width:10px; height:6px; flex-shrink:0; transition:transform .2s; overflow:visible; }
.hdr-nav-item.open .nav-chevron { transform:rotate(180deg); }

.hdr-nav-drop {
  visibility:hidden; opacity:0; pointer-events:none;
  position:absolute; top:calc(100% + 8px); left:0;
  background:var(--bg); border:1px solid var(--border2);
  border-radius:16px; padding:12px;
  box-shadow:0 12px 40px rgba(0,0,0,.14);
  z-index:500; min-width:280px;
  transition:opacity .16s ease, visibility .16s ease;
}
.hdr-nav-item.open .hdr-nav-drop {
  visibility:visible; opacity:1; pointer-events:auto;
}

/* Hover для десктопа (открывает дропдаун при наведении мышью) */
@media (min-width:720px) {
  .hdr-nav-item:hover .hdr-nav-drop {
    visibility:visible; opacity:1; pointer-events:auto;
  }
  .hdr-nav-item:hover .nav-chevron {
    transform:rotate(180deg);
  }
}

@keyframes dropIn { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:translateY(0)} }

.hdr-drop-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:3px; }

.hdr-drop-item {
  display:flex; align-items:center; gap:9px;
  padding:7px 9px; border-radius:9px; cursor:pointer;
  transition:background .12s;
}
.hdr-drop-item:hover { background:var(--bg3); }
.hdr-drop-item.hdr-drop-soon { opacity:.45; cursor:default; }
.hdr-drop-item.hdr-drop-soon:hover { background:transparent; }

.hdr-drop-icon {
  width:30px; height:30px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  font-size:15px; flex-shrink:0;
}
.hdr-drop-name {
  font-size:11.5px; font-weight:600; color:var(--text);
  display:flex; align-items:center; gap:4px; flex-wrap:wrap; line-height:1.3;
}

/* ── CATEGORY TABS ── */
.cat-bar {
  display:flex; gap:7px; padding:18px 16px 0;
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  scrollbar-width:none; scroll-snap-type:x mandatory;
  border-bottom:1px solid var(--border); padding-bottom:14px;
}
.cat-bar::-webkit-scrollbar { display:none; }

.cat-tab {
  flex-shrink:0; scroll-snap-align:start;
  padding:8px 18px; background:transparent;
  border:1.5px solid var(--border2); border-radius:50px;
  color:var(--text2); font-size:12.5px; font-weight:700;
  cursor:pointer; font-family:inherit;
  transition:background .14s, border-color .14s, color .14s;
  white-space:nowrap;
}
.cat-tab:hover { background:var(--bg3); }
.cat-tab.active { background:var(--accent); border-color:var(--accent); color:#fff; }

/* ── TOOLS GRID (главная страница) ── */
.tools-grid-all {
  display:grid; grid-template-columns:repeat(2,1fr); gap:10px; padding:16px;
}
@media(min-width:480px){ .tools-grid-all{ grid-template-columns:repeat(3,1fr); gap:12px; } }
@media(min-width:700px){ .tools-grid-all{ grid-template-columns:repeat(4,1fr); } }
@media(min-width:960px){ .tools-grid-all{ grid-template-columns:repeat(5,1fr); } }
@media(min-width:1200px){ .tools-grid-all{ grid-template-columns:repeat(6,1fr); } }

.hdr-spacer { flex:1; }

.hdr-blog-link {
  height:36px; padding:0 12px;
  display:flex; align-items:center; gap:5px;
  background:transparent; border:none;
  color:var(--text2); font-size:13px; font-weight:500;
  border-radius:9px; cursor:pointer; text-decoration:none;
  transition:background .15s, color .15s;
  white-space:nowrap;
}
.hdr-blog-link:hover { background:var(--bg3); color:var(--text); }
@media (max-width:719px) { .hdr-blog-link { display:none; } }

.hdr-lang { display:flex; gap:3px; }
.lang-btn {
  padding:5px 9px; background:transparent;
  border:1px solid var(--border2); border-radius:6px;
  color:var(--text3); font-size:11px; font-weight:700;
  cursor:pointer; font-family:inherit;
  transition:background .12s,color .12s,border-color .12s;
}
.lang-btn:active { opacity:.7; }
.lang-btn.active { background:var(--accent); border-color:var(--accent); color:#fff; }

/* ── BODY ── */
.app-body { flex:1; min-height:0; display:flex; position:relative; overflow:hidden; }

/* ── SIDEBAR BACKDROP (mobile) ── */
.sidebar-backdrop {
  display:none; position:fixed; inset:0; z-index:200;
  background:rgba(0,0,0,.4); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
}
.sidebar-backdrop.on { display:block; }

/* ── SIDEBAR (mobile-only overlay) ── */
.app-sidebar {
  position:fixed; top:0; left:0; bottom:0; z-index:210;
  width:var(--sb-w);
  background:var(--bg2); border-right:1px solid var(--border);
  display:flex; flex-direction:column;
  overflow-y:auto; overflow-x:hidden;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
  transform:translateX(-100%); transition:transform .22s ease;
}
.app-sidebar::-webkit-scrollbar { display:none; }
.app-sidebar.open { transform:translateX(0); }
@media (min-width:1024px) { .app-sidebar { display:none; } }

.sidebar-nav { padding:10px 8px 20px; display:flex; flex-direction:column; gap:2px; }

.sb-section-title {
  font-size:10px; font-weight:700; color:var(--text3);
  letter-spacing:.7px; text-transform:uppercase;
  padding:10px 8px 4px; margin-top:2px;
}
.sb-sep { height:1px; background:var(--border); margin:6px 4px; }

.sb-btn {
  width:100%; padding:9px 12px;
  background:transparent; border:none; border-radius:9px;
  color:var(--text2); font-size:12.5px; font-weight:600;
  cursor:pointer; font-family:inherit;
  display:flex; align-items:center; gap:8px;
  transition:background .12s,color .12s; text-align:left;
  white-space:nowrap; overflow:hidden;
}
.sb-btn:active { background:rgba(124,92,252,.1); color:var(--accent); }
.sb-btn.sb-active { background:rgba(124,92,252,.1); color:var(--accent); }
.sb-btn-red { color:var(--red); }
.sb-btn-red:active { background:rgba(209,48,48,.09); color:var(--red); }

/* ── MAIN ── */
.app-main { flex:1; min-width:0; display:flex; flex-direction:column; overflow:hidden; }

/* ── HOME VIEW (до загрузки файлов) ── */
.home-view { flex:1; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; padding-bottom:40px; }

/* ── WORKSPACE (рабочая область с галереей) ── */
.workspace { flex:1; display:flex; flex-direction:column; overflow:hidden; }

.ws-upload-bar {
  flex-shrink:0; display:flex; align-items:center; gap:6px;
  padding:6px 14px; border-bottom:1px solid var(--border); background:var(--bg2);
  overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.ws-upload-bar::-webkit-scrollbar { display:none; }
.ws-upload-btn {
  width:34px; height:34px; border-radius:8px;
  border:1px solid var(--border2); background:var(--bg3);
  font-size:14px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .12s; flex-shrink:0;
}
.ws-upload-btn:active { background:var(--bg4); }

/* ── КНОПКА «НАЗАД К ИНСТРУМЕНТАМ» ── */
.ws-back-btn {
  flex-shrink:0;
  display:inline-flex; align-items:center; gap:4px;
  padding:7px 11px; border-radius:8px;
  border:1px solid var(--border2); background:var(--bg3);
  color:var(--text2); font-size:12px; font-weight:600;
  cursor:pointer; font-family:inherit;
  transition:background .12s,color .12s;
  white-space:nowrap;
}
.ws-back-btn:active { background:var(--bg4); color:var(--text); }

/* ── КНОПКА «УДАЛИТЬ ВСЕ ДОКУМЕНТЫ» ── */
.ws-del-all-btn {
  flex-shrink:0;
  display:inline-flex; align-items:center; gap:4px;
  padding:7px 11px; border-radius:8px;
  border:1px solid rgba(217,48,48,.3); background:rgba(217,48,48,.06);
  color:var(--red); font-size:12px; font-weight:600;
  cursor:pointer; font-family:inherit;
  transition:background .12s;
  white-space:nowrap;
}
.ws-del-all-btn:active { background:rgba(217,48,48,.14); }

/* ── КНОПКИ ДОБАВЛЕНИЯ ФАЙЛОВ (яркие) ── */
.ws-add-btn {
  flex-shrink:0;
  display:inline-flex; align-items:center; gap:3px;
  padding:7px 13px; border-radius:20px; border:none;
  font-size:12.5px; font-weight:700; cursor:pointer; font-family:inherit;
  transition:transform .12s,box-shadow .12s,opacity .12s;
  white-space:nowrap;
}
.ws-add-btn:active { transform:scale(.94); opacity:.85; }
.ws-add-photo { background:var(--accent-g); color:#fff; box-shadow:0 2px 10px rgba(124,92,252,.35); }
.ws-add-pdf   { background:linear-gradient(135deg,#e85d3c,#ff8c5a); color:#fff; box-shadow:0 2px 10px rgba(232,93,60,.35); }

/* ── БАННЕР ВОЗВРАТА В ГАЛЕРЕЮ ── */
.ws-hint-bar {
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:10px 16px; flex-shrink:0;
  background:rgba(124,92,252,.07); border-bottom:1px solid rgba(124,92,252,.15);
}
.ws-hint-text { font-size:12px; color:var(--text2); font-weight:600; }
.ws-hint-back {
  flex-shrink:0;
  display:inline-flex; align-items:center; gap:4px;
  padding:8px 14px; border-radius:8px; border:none;
  background:var(--accent); color:#fff;
  font-size:12px; font-weight:700; cursor:pointer; font-family:inherit;
  box-shadow:0 2px 10px rgba(124,92,252,.35);
  transition:opacity .12s,transform .12s;
}
.ws-hint-back:active { opacity:.8; transform:scale(.96); }
.ws-hint-actions { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.ws-hint-clear {
  flex-shrink:0;
  display:inline-flex; align-items:center; gap:4px;
  padding:7px 11px; border-radius:8px; border:none;
  background:rgba(217,48,48,.08); color:var(--red);
  font-size:12px; font-weight:600; font-family:inherit;
  cursor:pointer; white-space:nowrap; transition:background .12s;
}
.ws-hint-clear:active { background:rgba(217,48,48,.16); }

/* ── SCROLL AREA (в рабочей области) ── */
.scroll-area { flex:1; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; padding-bottom:40px; position:relative; }

/* ── ЗОНА ЗАГРУЗКИ ── */
.upload-zone { margin:16px 14px 0; background:var(--bg3); border:2px dashed var(--border2); border-radius:var(--r); padding:24px 16px 22px; text-align:center; transition:border-color .2s,background .2s; position:relative; overflow:hidden; }
.upload-zone::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 0%,rgba(124,92,252,.07) 0%,transparent 70%); pointer-events:none; }
.upload-zone.drag-over { border-color:var(--accent); background:rgba(124,92,252,.06); }
.u-icon { font-size:38px; line-height:1; margin-bottom:8px; display:block; }
.upload-zone h3   { font-size:14px; font-weight:700; margin-bottom:5px; }
.upload-zone .hint{ font-size:11.5px; color:var(--text2); line-height:1.6; }

.upload-btns { margin-top:15px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }

.btn-photos { display:inline-flex; align-items:center; gap:6px; padding:12px 20px; background:var(--accent-g); color:#fff; border:none; border-radius:50px; font-size:13px; font-weight:700; cursor:pointer; font-family:inherit; box-shadow:0 4px 18px rgba(124,92,252,.4); transition:transform .15s,box-shadow .15s; }
.btn-photos:active { transform:scale(.96); box-shadow:0 2px 10px rgba(124,92,252,.3); }

.btn-pdf { display:inline-flex; align-items:center; gap:6px; padding:11px 20px; background:transparent; color:#ff8c5a; border:2px solid rgba(232,93,60,.45); border-radius:50px; font-size:13px; font-weight:700; cursor:pointer; font-family:inherit; transition:background .15s,border-color .15s,transform .15s; }
.btn-pdf:active { background:rgba(232,93,60,.12); border-color:#e85d3c; transform:scale(.96); }

#inpImg,#inpPdf { display:none; }

/* ── ТУЛБАР ── */
.toolbar { display:flex; gap:6px; align-items:center; padding:10px 14px 8px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; flex-wrap:nowrap; scroll-snap-type:x mandatory; }
.toolbar::-webkit-scrollbar { display:none; }
.tbtn { display:inline-flex; align-items:center; gap:5px; padding:7px 11px; background:var(--bg3); border:1px solid var(--border2); border-radius:var(--r2); color:var(--text2); font-size:12px; font-weight:600; cursor:pointer; font-family:inherit; transition:background .15s,color .15s; white-space:nowrap; flex-shrink:0; scroll-snap-align:start; }
.tbtn:active   { background:var(--bg4); color:var(--text); }
.tbtn-red      { color:var(--red); }
.chip { margin-left:auto; flex-shrink:0; background:rgba(124,92,252,.15); border:1px solid rgba(124,92,252,.3); color:var(--accent2); font-size:11px; font-weight:700; padding:5px 11px; border-radius:20px; white-space:nowrap; }

/* ── ЛЕГЕНДА PDF ── */
.pdf-legend { display:flex; flex-wrap:wrap; gap:6px; padding:6px 14px 2px; }
.pdf-legend-item { display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:700; color:var(--text2); }
.pdf-legend-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }

/* ── СЕТКА (компактная, больше страниц на экране) ── */
.grid { display:grid; grid-template-columns:repeat(2,1fr); gap:7px; padding:4px 10px 0; }
@media(min-width:460px){ .grid{ grid-template-columns:repeat(3,1fr); } }
@media(min-width:700px){ .grid{ grid-template-columns:repeat(4,1fr); gap:8px; } }
@media(min-width:1000px){ .grid{ grid-template-columns:repeat(5,1fr); } }
@media(min-width:1300px){ .grid{ grid-template-columns:repeat(6,1fr); } }

/* ── КАРТОЧКА ── */
.card {
  position:relative; border-radius:12px; overflow:hidden;
  background:#fafafa; border:2px solid transparent;
  box-shadow:0 2px 14px rgba(0,0,0,.28),0 1px 4px rgba(0,0,0,.12);
  transition:border-color .15s,opacity .2s,transform .15s,box-shadow .15s;
  touch-action:none; cursor:grab; user-select:none; -webkit-user-select:none;
}
.card:active    { cursor:grabbing; }
.card.dragging  { opacity:.3; }
.card.drag-over { border-color:var(--accent); transform:scale(.97); box-shadow:0 4px 22px rgba(124,92,252,.4); }
.card img       { width:100%; height:auto; display:block; pointer-events:none; -webkit-user-drag:none; }
.shade          { position:absolute; bottom:0; left:0; right:0; height:60%; background:linear-gradient(to top,rgba(0,0,0,.75) 0%,transparent 100%); pointer-events:none; }
.card-bar       { position:absolute; bottom:0; left:0; right:0; padding:7px; display:flex; align-items:center; justify-content:space-between; }
.card-num       { font-size:11px; font-weight:800; color:rgba(255,255,255,.9); background:rgba(0,0,0,.45); padding:2px 7px; border-radius:6px; }
.card-acts      { display:flex; gap:5px; }
.cbtn           { width:32px; height:32px; border-radius:8px; border:none; background:rgba(255,255,255,.12); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); color:#fff; font-size:13px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .15s; }
.cbtn:active    { background:rgba(255,255,255,.3); }
.badge-edit { position:absolute; top:6px; left:6px; background:var(--accent); color:#fff; font-size:8px; font-weight:800; padding:2px 6px; border-radius:5px; letter-spacing:.4px; text-transform:uppercase; box-shadow:0 2px 6px rgba(124,92,252,.5); }
.badge-src  { position:absolute; top:6px; right:6px; color:#fff; font-size:8px; font-weight:800; padding:2px 7px; border-radius:5px; letter-spacing:.3px; text-transform:uppercase; box-shadow:0 2px 6px rgba(0,0,0,.4); }

/* ── БЛОК СОЗДАНИЯ PDF ── */
.pdf-block { margin:14px 14px 0; background:var(--bg3); border-radius:var(--r); padding:18px; border:1px solid var(--border); }
.pdf-block h3 { font-size:14px; font-weight:700; color:var(--text2); letter-spacing:.5px; text-transform:uppercase; margin-bottom:14px; }
.pdf-name-wrap { display:flex; align-items:center; background:var(--bg); border:1px solid var(--border2); border-radius:var(--r2); margin-bottom:13px; overflow:hidden; transition:border-color .2s; }
.pdf-name-wrap:focus-within { border-color:var(--accent); }
.pdf-pre  { padding:0 10px 0 14px; font-size:13px; color:var(--text2); user-select:none; }
#pdfName  { flex:1; padding:13px 4px; background:transparent; border:none; color:var(--text); font-size:14px; font-family:inherit; font-weight:600; outline:none; min-width:0; }
.pdf-suf  { padding:0 14px 0 4px; font-size:12px; color:var(--text3); }
.btn-make { width:100%; padding:16px; background:var(--accent-g); color:#fff; border:none; border-radius:12px; font-size:15px; font-weight:800; cursor:pointer; font-family:inherit; box-shadow:0 4px 24px rgba(124,92,252,.4); transition:transform .15s,box-shadow .15s,opacity .15s; letter-spacing:.2px; }
.btn-make:active   { transform:scale(.98); box-shadow:0 2px 12px rgba(124,92,252,.3); }
.btn-make:disabled { opacity:.4; cursor:not-allowed; transform:none; box-shadow:none; }
.pbox     { margin-top:14px; display:none; }
.pbox.on  { display:block; }
.pt  { height:5px; background:var(--bg); border-radius:10px; overflow:hidden; margin-bottom:9px; }
.pf  { height:100%; background:var(--accent-g); border-radius:10px; width:0%; transition:width .3s ease; }
.pl  { font-size:12px; color:var(--text2); text-align:center; }

/* ── ОВЕРЛЕЙ ИМПОРТА PDF ── */
.ov { position:fixed; inset:0; z-index:700; background:rgba(248,249,250,.97); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); display:none; flex-direction:column; align-items:center; justify-content:center; gap:16px; padding:32px; text-align:center; }
.ov.on     { display:flex; }
.ov-icon   { font-size:52px; line-height:1; }
.ov-title  { font-size:18px; font-weight:800; letter-spacing:-.3px; }
.ov-file   { font-size:12px; color:var(--text2); max-width:280px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ov-files  { font-size:11.5px; color:var(--text3); }
.ov-pbwrap { width:100%; max-width:300px; }
.ov-track  { height:6px; background:var(--bg3); border-radius:10px; overflow:hidden; margin-bottom:10px; }
.ov-fill   { height:100%; border-radius:10px; width:0%; transition:width .2s ease; }
.ov-lbl    { font-size:12px; color:var(--text2); }

/* ── BOTTOM SHEET ── */
.sheet { position:fixed; inset:0; z-index:800; background:rgba(0,0,0,.45); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); display:none; align-items:flex-end; justify-content:center; }
.sheet.on    { display:flex; }
.sheet-in    { width:100%; max-width:500px; background:var(--bg2); border-top:1px solid var(--border2); border-radius:20px 20px 0 0; padding:14px 18px 44px; animation:sheetUp .22s ease; }
@keyframes sheetUp { from{transform:translateY(100%)} to{transform:translateY(0)} }
.sh-handle { width:36px; height:4px; background:var(--border2); border-radius:2px; margin:0 auto 18px; }
.sh-title  { font-size:15px; font-weight:800; text-align:center; margin-bottom:5px; }
.sh-sub    { font-size:12px; color:var(--text2); text-align:center; line-height:1.6; margin-bottom:14px; }
.sh-info   { display:flex; flex-direction:column; align-items:center; gap:4px; margin-bottom:18px; }
.sh-badge  { display:inline-flex; align-items:center; gap:6px; background:rgba(232,93,60,.12); color:#ff8c5a; border:1px solid rgba(232,93,60,.3); font-size:11.5px; font-weight:700; padding:5px 12px; border-radius:8px; max-width:280px; overflow:hidden; }
.sh-badge-text { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sh-pages  { font-size:11px; color:var(--text3); }
.sh-btns   { display:flex; flex-direction:column; gap:10px; }
.sh-btn    { width:100%; padding:16px; border:none; border-radius:12px; font-size:14px; font-weight:700; cursor:pointer; font-family:inherit; display:flex; align-items:center; justify-content:center; gap:8px; transition:transform .12s,opacity .12s; }
.sh-btn:active  { transform:scale(.98); opacity:.85; }
.sh-end    { background:linear-gradient(135deg,#e85d3c,#ff8c5a); color:#fff; box-shadow:0 4px 20px rgba(232,93,60,.35); }
.sh-start  { background:var(--bg4); color:var(--text); border:1px solid var(--border2); }
.sh-cancel { background:transparent; color:var(--text2); font-size:13px; padding:12px; }

/* ── РЕДАКТОР CROPPER ── */
.modal     { position:fixed; inset:0; z-index:600; display:none; flex-direction:column; background:#000; }
.modal.on  { display:flex; }
.mod-head  { flex-shrink:0; background:var(--bg2); border-bottom:1px solid var(--border); padding:14px 16px; display:flex; align-items:center; justify-content:space-between; }
.mod-head h2{ font-size:15px; font-weight:700; }
.mod-hr    { display:flex; align-items:center; gap:8px; }
.mod-name  { font-size:11px; color:var(--text2); max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.btn-x     { width:34px; height:34px; background:var(--bg4); border:none; color:var(--text2); border-radius:50%; font-size:16px; cursor:pointer; display:flex; align-items:center; justify-content:center; font-family:inherit; }
.btn-x:active { background:var(--border); color:var(--text); }
.crop-wrap { flex:1; min-height:0; overflow:hidden; position:relative; background:#ebebf0; display:flex; align-items:center; justify-content:center; }
.crop-wrap img { display:block; max-width:100%; max-height:100%; }
.crop-hint { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; color:var(--text2); font-size:13px; pointer-events:none; transition:opacity .3s; }
.crop-hint.h { opacity:0; }
.spin { width:30px; height:30px; border:3px solid var(--border2); border-top-color:var(--accent); border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to{transform:rotate(360deg)} }
.mod-foot  { flex-shrink:0; background:var(--bg2); border-top:1px solid var(--border); padding:13px 14px; }
.rot-row   { display:flex; gap:10px; margin-bottom:11px; }
.rot-btn   { flex:1; padding:13px 8px; background:var(--bg4); border:1px solid var(--border2); border-radius:11px; color:var(--text); font-size:21px; font-weight:600; cursor:pointer; font-family:inherit; display:flex; align-items:center; justify-content:center; gap:6px; transition:background .15s; }
.rot-btn:active { background:var(--border); }
.rot-lbl   { font-size:11px; color:var(--text2); font-weight:700; }
.mod-acts  { display:flex; gap:10px; }
.btn-cancel{ flex:1; padding:14px; background:var(--bg4); border:1px solid var(--border2); border-radius:11px; color:var(--text2); font-size:14px; font-weight:600; cursor:pointer; font-family:inherit; transition:background .15s; }
.btn-cancel:active { background:var(--border); }
.btn-apply { flex:2; padding:14px; background:var(--accent-g); border:none; border-radius:11px; color:#fff; font-size:14px; font-weight:800; cursor:pointer; font-family:inherit; box-shadow:0 3px 14px rgba(124,92,252,.4); transition:transform .15s,box-shadow .15s; }
.btn-apply:active { transform:scale(.97); box-shadow:0 2px 8px rgba(124,92,252,.3); }

/* ── MOD EDITOR SIDEBAR ── */
.mod-body { flex:1; min-height:0; display:flex; overflow:hidden; }
.mod-main { flex:1; min-width:0; display:flex; flex-direction:column; }
.mod-sidebar {
  width:210px; flex-shrink:0; background:var(--bg2);
  border-right:1px solid var(--border); overflow-y:auto;
  padding:14px 12px; display:flex; flex-direction:column; gap:0;
}
.mod-sb-section { margin-bottom:14px; }
.mod-sb-section:last-child { margin-bottom:0; }
.mod-sb-label { font-size:10px; font-weight:700; color:var(--text3); text-transform:uppercase; letter-spacing:.06em; margin-bottom:6px; }
.mod-sb-sep { height:1px; background:var(--border); margin:10px 0 12px; }
.mod-rot-row { display:flex; gap:4px; }
.mod-sb-btn {
  flex:1; padding:7px 4px; background:var(--bg4);
  border:1px solid var(--border2); border-radius:8px;
  color:var(--text); font-size:11px; font-weight:600;
  cursor:pointer; font-family:inherit; white-space:nowrap;
  text-align:center; transition:background .12s;
}
.mod-sb-btn:hover  { background:var(--bg3); }
.mod-sb-btn:active { background:var(--border2); }
.mod-preset-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:4px; }
.mod-preset-btn {
  padding:7px 4px; background:var(--bg4); border:2px solid transparent;
  border-radius:8px; color:var(--text2); font-size:11px; font-weight:700;
  cursor:pointer; font-family:inherit; text-align:center;
  transition:background .12s, border-color .12s, color .12s;
}
.mod-preset-btn:hover  { background:var(--bg3); color:var(--text); }
.mod-preset-btn.active { border-color:var(--accent); background:rgba(124,92,252,.12); color:var(--text); }
.mod-preset-auto { grid-column:span 2; background:rgba(124,92,252,.07); color:var(--accent); font-weight:800; }
.mod-preset-auto:hover  { background:rgba(124,92,252,.15); color:var(--accent); }
.mod-preset-auto.active { background:rgba(124,92,252,.18); }
.mod-bg-color-row { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.mod-bg-color-wrap { position:relative; width:26px; height:26px; flex-shrink:0; }
.mod-bg-swatch { position:absolute; inset:0; border-radius:6px; border:2px solid var(--border2); pointer-events:none; }
.mod-bg-color-input { position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%; }
.mod-bg-label { font-size:11px; color:var(--text2); font-weight:600; }
.mod-bg-img-btn {
  width:100%; padding:7px; background:var(--bg4);
  border:1px dashed var(--border2); border-radius:8px;
  color:var(--text2); font-size:11px; font-weight:600;
  cursor:pointer; font-family:inherit; margin-bottom:8px;
  transition:border-color .12s, color .12s;
}
.mod-bg-img-btn:hover { border-color:var(--accent); color:var(--text); }
.mod-bg-thumb { width:100%; height:50px; background-size:cover; background-position:center; border-radius:7px; border:1px solid var(--border2); margin-bottom:7px; }
.mod-bg-img-ctrl { display:flex; align-items:center; gap:6px; }
.mod-bg-img-ctrl input[type=range] { flex:1; accent-color:var(--accent); }
.mod-bg-opc-val { font-size:10px; font-weight:700; color:var(--text2); min-width:28px; flex-shrink:0; }

/* Mobile sidebar → горизонтальная полоса */
@media (max-width:680px) {
  .mod-body { flex-direction:column; }
  .mod-sidebar {
    width:100%; flex-shrink:0; flex-direction:row;
    border-right:none; border-bottom:1px solid var(--border);
    overflow-x:auto; overflow-y:hidden;
    padding:10px; gap:0; max-height:128px; align-items:flex-start;
    -webkit-overflow-scrolling:touch;
  }
  .mod-sb-section { flex-shrink:0; min-width:108px; margin-bottom:0; padding-right:2px; }
  .mod-sb-sep { width:1px; height:auto; align-self:stretch; margin:0 8px; flex-shrink:0; }
  .mod-preset-grid { grid-template-columns:repeat(3,1fr); }
  .mod-preset-auto { grid-column:span 3; }
}

/* ── GHOST DRAG ── */
.ghost { position:fixed; pointer-events:none; z-index:9999; border-radius:12px; overflow:hidden; box-shadow:0 12px 40px rgba(0,0,0,.7); transform:scale(1.07) rotate(1.5deg); opacity:.9; border:2px solid var(--accent); }
.cropper-container { transition:opacity .2s; }

/* ── DUPLEX ── */
.duplex-sep { width:100%; margin:14px 0 0; border:none; border-top:1px solid var(--border2); }
.duplex-hint-text { font-size:10.5px; color:var(--text3); margin:9px 0 0; line-height:1.5; }
.btn-duplex { margin-top:12px; display:inline-flex; align-items:center; gap:8px; padding:13px 22px; background:linear-gradient(135deg,#1a6b4a,#1e9b6a); color:#fff; border:none; border-radius:50px; font-size:13px; font-weight:800; cursor:pointer; font-family:inherit; box-shadow:0 4px 18px rgba(30,155,106,.4); transition:transform .15s,box-shadow .15s; letter-spacing:.1px; }
.btn-duplex:active { transform:scale(.96); box-shadow:0 2px 10px rgba(30,155,106,.3); }

.dm-backdrop { position:fixed; inset:0; z-index:850; background:rgba(0,0,0,.45); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); display:none; align-items:flex-end; justify-content:center; }
.dm-backdrop.on { display:flex; }
.dm-sheet { width:100%; max-width:520px; background:var(--bg2); border-top:1px solid var(--border2); border-radius:22px 22px 0 0; padding:14px 18px 44px; animation:sheetUp .24s ease; max-height:90vh; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.dm-handle { width:36px; height:4px; background:var(--border2); border-radius:2px; margin:0 auto 16px; }
.dm-title  { font-size:16px; font-weight:800; text-align:center; letter-spacing:-.2px; }
.dm-sub    { font-size:12px; color:var(--text2); text-align:center; line-height:1.6; margin:6px 0 18px; max-width:300px; margin-left:auto; margin-right:auto; }
.dm-zones  { display:flex; flex-direction:column; gap:10px; margin-bottom:16px; }
.dm-zone { background:var(--bg3); border:2px dashed var(--border2); border-radius:12px; padding:14px 16px; display:flex; align-items:center; gap:12px; cursor:pointer; transition:border-color .2s,background .2s; position:relative; overflow:hidden; }
.dm-zone:active { background:var(--bg4); }
.dm-zone.filled { border-style:solid; }
.dm-zone.filled-front { border-color:#3cbe6e; background:rgba(60,190,110,.07); }
.dm-zone.filled-back  { border-color:#3c8ce8; background:rgba(60,140,232,.07); }
.dm-zone-icon { width:44px; height:44px; flex-shrink:0; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:20px; }
.dm-zone-icon-front { background:rgba(60,190,110,.18); }
.dm-zone-icon-back  { background:rgba(60,140,232,.18); }
.dm-zone-body { flex:1; min-width:0; }
.dm-zone-label { font-size:13px; font-weight:800; margin-bottom:2px; }
.dm-zone-label-front { color:#3cbe6e; }
.dm-zone-label-back  { color:#3c8ce8; }
.dm-zone-desc  { font-size:11px; color:var(--text2); }
.dm-zone-file  { font-size:11px; font-weight:700; margin-top:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
.dm-zone-file-front { color:#3cbe6e; }
.dm-zone-file-back  { color:#3c8ce8; }
.dm-zone-check { width:22px; height:22px; flex-shrink:0; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; color:#fff; }
.dm-zone-check-front { background:#3cbe6e; }
.dm-zone-check-back  { background:#3c8ce8; }
.dm-option { display:flex; align-items:center; gap:10px; padding:12px 14px; background:var(--bg3); border:1px solid var(--border2); border-radius:10px; margin-bottom:16px; cursor:pointer; }
.dm-option-check { width:20px; height:20px; flex-shrink:0; border:2px solid var(--border2); border-radius:5px; display:flex; align-items:center; justify-content:center; font-size:12px; color:#fff; transition:background .15s,border-color .15s; }
.dm-option-check.on { background:var(--accent); border-color:var(--accent); }
.dm-option-text { font-size:12px; font-weight:600; color:var(--text2); line-height:1.4; }
.dm-option-text strong { color:var(--text); font-weight:700; }
.dm-btns { display:flex; flex-direction:column; gap:10px; }
.dm-btn-merge { width:100%; padding:16px; background:linear-gradient(135deg,#1a6b4a,#1e9b6a); color:#fff; border:none; border-radius:12px; font-size:15px; font-weight:800; cursor:pointer; font-family:inherit; box-shadow:0 4px 22px rgba(30,155,106,.4); transition:transform .15s,box-shadow .15s,opacity .15s; display:flex; align-items:center; justify-content:center; gap:8px; }
.dm-btn-merge:active   { transform:scale(.98); }
.dm-btn-merge:disabled { opacity:.35; cursor:not-allowed; transform:none; box-shadow:none; }
.dm-btn-cancel { width:100%; padding:13px; background:transparent; color:var(--text2); border:none; font-size:13px; font-weight:600; cursor:pointer; font-family:inherit; }
.dm-btn-cancel:active { color:var(--text); }

/* ══ SPLIT SPREAD ══ */
.ss-dirs { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px; }
.ss-dir-btn { background:var(--bg3); border:2px solid var(--border2); border-radius:12px; padding:16px 12px; display:flex; flex-direction:column; align-items:center; gap:4px; cursor:pointer; font-family:inherit; transition:border-color .18s,background .18s; width:100%; }
.ss-dir-btn:active { background:var(--bg4); }
.ss-dir-active { border-color:var(--accent); background:rgba(128,89,232,.08); }
.ss-dir-icon { font-size:22px; line-height:1; }
.ss-dir-label { font-size:13px; font-weight:700; color:var(--text); }
.ss-dir-sub { font-size:11px; color:var(--text3); }
.ss-rot-row { display:flex; align-items:center; gap:10px; margin-bottom:16px; flex-wrap:wrap; }
.ss-rot-label { font-size:12px; font-weight:600; color:var(--text2); flex-shrink:0; }
.ss-rot-btns { display:flex; gap:6px; }
.ss-rot-btn { padding:8px 18px; background:var(--bg3); border:2px solid var(--border2); border-radius:8px; font-size:13px; font-weight:700; color:var(--text); cursor:pointer; font-family:inherit; transition:border-color .15s,background .15s,color .15s; }
.ss-rot-btn:active { background:var(--bg4); }
.ss-rot-active { border-color:var(--accent); background:rgba(128,89,232,.08); color:var(--accent); }
.ss-btn-apply { background:linear-gradient(135deg,#5c3adb,#8059e8) !important; box-shadow:0 4px 22px rgba(128,89,232,.4) !important; }

/* ══ FAB РЕДАКТОР ══ */
.fab-modal { position:fixed; inset:0; z-index:920; background:var(--bg); display:none; flex-direction:column; }
.fab-modal.on { display:flex; }
.fab-main { flex:1; min-width:0; min-height:0; display:flex; flex-direction:column; overflow:hidden; }

.fab-head { flex-shrink:0; height:48px; background:var(--bg2); border-bottom:1px solid var(--border); padding:0 12px; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.fab-head h2 { font-size:13px; font-weight:800; letter-spacing:-.2px; flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fab-head-r  { display:flex; align-items:center; gap:6px; }
.fab-head-btn { height:32px; padding:0 10px; background:var(--bg4); border:1px solid var(--border2); border-radius:7px; color:var(--text2); font-size:11px; font-weight:700; cursor:pointer; font-family:inherit; display:flex; align-items:center; gap:4px; transition:background .15s,color .15s; white-space:nowrap; }
.fab-head-btn:active { background:var(--border); color:var(--text); }
.fab-head-btn-del    { color:var(--red); }

.fab-wrap { flex:1; min-height:0; display:flex; align-items:center; justify-content:center; overflow:auto; background:#ebebf0; -webkit-overflow-scrolling:touch; position:relative; }
#FAB_CANVAS { display:block; }

.fab-foot { flex-shrink:0; background:var(--bg2); border-top:1px solid var(--border); padding:9px 10px 11px; display:flex; flex-direction:column; gap:7px; }
.fab-tools { display:flex; gap:5px; overflow-x:auto; padding-bottom:2px; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.fab-tools::-webkit-scrollbar { display:none; }

.fab-tool-btn { flex-shrink:0; min-width:44px; height:42px; padding:0 9px; background:var(--bg3); border:2px solid transparent; border-radius:9px; color:var(--text2); font-size:12px; font-weight:700; cursor:pointer; font-family:inherit; display:flex; align-items:center; justify-content:center; gap:4px; transition:background .12s,border-color .12s,color .12s; white-space:nowrap; }
.fab-tool-btn:active       { transform:scale(.94); }
.fab-tool-btn.active       { border-color:var(--accent); background:rgba(124,92,252,.15); color:var(--text); }
.fab-tool-btn.active-green { border-color:#3cbe6e; background:rgba(60,190,110,.13); color:#3cbe6e; }
.fab-tool-btn.active-amber { border-color:#e8c43c; background:rgba(232,196,60,.13); color:#e8c43c; }

.fab-actions  { display:flex; align-items:center; gap:7px; }
.fab-palette  { display:flex; gap:4px; align-items:center; flex:1; min-width:0; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.fab-palette::-webkit-scrollbar { display:none; }

.fab-color-dot { width:26px; height:26px; border-radius:50%; border:2px solid rgba(0,0,0,.12); cursor:pointer; flex-shrink:0; transition:transform .13s,border-color .13s,box-shadow .13s; }
.fab-color-dot:active     { transform:scale(.86); }
.fab-color-dot.active-dot { border-color:var(--accent) !important; border-width:3px; transform:scale(1.17); box-shadow:0 0 0 2px rgba(124,92,252,.3),0 2px 8px rgba(0,0,0,.2); }

.fab-color-pick   { position:relative; flex-shrink:0; }
.fab-color-swatch { width:26px; height:26px; border-radius:50%; border:2px solid rgba(0,0,0,.15); cursor:pointer; background:#fff; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:800; color:rgba(0,0,0,.5); overflow:hidden; transition:transform .13s,border-color .13s,box-shadow .13s; }
.fab-color-pick.active-pick .fab-color-swatch { border-color:var(--accent); border-width:3px; transform:scale(1.17); box-shadow:0 0 0 2px rgba(124,92,252,.3),0 2px 8px rgba(0,0,0,.2); }
.fab-color-input-el { position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%; border:none; padding:0; }

.fab-save-btn { flex:1; max-width:130px; margin-left:auto; padding:10px 14px; background:var(--accent-g); color:#fff; border:none; border-radius:9px; font-size:12px; font-weight:800; cursor:pointer; font-family:inherit; box-shadow:0 3px 12px rgba(124,92,252,.4); transition:transform .12s,box-shadow .12s; }
.fab-save-btn:active { transform:scale(.97); box-shadow:0 1px 6px rgba(124,92,252,.3); }

.cbtn-annot { background:rgba(124,92,252,.2) !important; }
.cbtn-annot:active { background:rgba(124,92,252,.45) !important; }
.cbtn-del   { background:rgba(209,48,48,.25) !important; }
.cbtn-del:active { background:rgba(209,48,48,.55) !important; }
.cbtn-crop svg { pointer-events:none; }

/* ── FAB SIDEBAR (desktop) ── */
.fab-sidebar { display:none; width:78px; flex-shrink:0; background:var(--bg2); border-right:1px solid var(--border); flex-direction:column; align-items:center; overflow-y:auto; overflow-x:hidden; padding:12px 0 14px; scrollbar-width:none; }
.fab-sidebar::-webkit-scrollbar { display:none; }
.fab-sb-logo { font-size:22px; line-height:1; margin-bottom:10px; opacity:.6; flex-shrink:0; }
.fab-sb-sep  { width:48px; height:1px; background:var(--border2); margin:7px 0; flex-shrink:0; }

.fab-tool-btn.fab-sb-t { width:64px; height:auto; min-width:unset; padding:7px 3px 6px; flex-direction:column; gap:3px; margin-bottom:2px; flex-shrink:0; }
.fab-tool-btn.fab-sb-t .sb-i { font-size:17px; line-height:1.1; }
.fab-tool-btn.fab-sb-t .sb-l { font-size:9px; font-weight:700; text-align:center; white-space:nowrap; max-width:62px; overflow:hidden; text-overflow:ellipsis; }

.fab-sb-palette { display:flex; flex-direction:column; align-items:center; gap:5px; }
.fab-sidebar .fab-color-dot   { width:24px; height:24px; }
.fab-sidebar .fab-color-swatch{ width:24px; height:24px; font-size:9px; }

.fab-sb-heal { display:none; flex-direction:column; align-items:center; gap:4px; width:100%; padding:0 8px; flex-shrink:0; }
.fab-sb-heal.on { display:flex; }

.fab-sb-actions { margin-top:auto; padding-top:8px; display:flex; flex-direction:column; align-items:center; gap:4px; flex-shrink:0; }
.fab-sb-btn { width:58px; height:auto; padding:5px 3px 4px; background:var(--bg4); border:1px solid var(--border2); border-radius:8px; color:var(--text2); font-size:14px; font-weight:700; cursor:pointer; font-family:inherit; display:flex; flex-direction:column; align-items:center; gap:2px; transition:background .15s; }
.fab-sb-btn:active       { background:var(--border); color:var(--text); }
.fab-sb-btn .sb-l        { font-size:8px; font-weight:700; color:var(--text2); white-space:nowrap; }
.fab-sb-btn-del          { color:var(--red); }
.fab-sb-btn-del .sb-l    { color:var(--red); }
.fab-sb-btn-save         { background:var(--accent-g); border-color:transparent; color:#fff; font-size:17px; box-shadow:0 2px 8px rgba(124,92,252,.4); }
.fab-sb-btn-save .sb-l   { color:#fff; }
.fab-sb-btn-save:active  { transform:scale(.95); }

/* ── FAB PANELS ── */
.fab-cutter-panel { display:none; position:absolute; top:10px; right:10px; z-index:30; flex-wrap:wrap; gap:6px; background:rgba(255,255,255,.93); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border:1px solid rgba(0,0,0,.1); border-radius:12px; padding:8px; box-shadow:0 4px 20px rgba(0,0,0,.18); }
.fab-cutter-panel.on { display:flex; }

.fab-act-btn { padding:8px 13px; border:none; border-radius:8px; font-size:12px; font-weight:700; cursor:pointer; font-family:inherit; color:var(--text); background:rgba(0,0,0,.07); transition:background .12s,transform .1s; white-space:nowrap; }
.fab-act-btn:active      { background:rgba(0,0,0,.15); transform:scale(.94); }
.fab-act-btn-red         { background:rgba(209,48,48,.12); color:#c02020; }
.fab-act-btn-red:active  { background:rgba(209,48,48,.25); }
.fab-act-btn-green       { background:rgba(30,155,106,.12); color:#1a6b4a; }
.fab-act-btn-green:active{ background:rgba(30,155,106,.25); }

.fab-heal-bar { display:none; flex-direction:column; align-items:flex-start; gap:6px; }
.fab-heal-bar.on { display:flex; }
.fab-fill-row { display:flex; gap:4px; margin-bottom:6px; }
.fab-fill-btn { flex:1; padding:5px 4px; border:1px solid var(--border); border-radius:6px; background:var(--bg2); color:var(--text); font-size:12px; cursor:pointer; }
.fab-fill-btn.active { background:var(--accent); color:#fff; border-color:var(--accent); }
.fab-text-color-wrap { position:relative; display:inline-flex; align-items:center; margin-left:4px; }
.fab-text-color-swatch { width:22px; height:22px; border-radius:50%; border:2px solid var(--border); cursor:pointer; }
.fab-text-color-wrap input[type=color] { position:absolute; opacity:0; width:22px; height:22px; cursor:pointer; }

/* Слайдер точности Magic Wand */
.fab-wand-tol-row { display:flex; align-items:center; gap:6px; width:100%; padding:2px 0; }
.fab-wand-tol-lbl { font-size:10px; font-weight:700; color:var(--text2); flex-shrink:0; white-space:nowrap; }
.fab-wand-tol-slider { flex:1; accent-color:var(--accent); cursor:pointer; min-width:0; }
.fab-wand-tol-val { font-size:10px; font-weight:700; color:var(--text2); min-width:22px; text-align:right; flex-shrink:0; }

.fab-ocr-area-bar { display:none; align-items:center; gap:6px; }
.fab-ocr-area-bar.on { display:flex; }

.fab-text-bar { display:none; flex-shrink:0; height:38px; background:var(--bg3); border-bottom:1px solid var(--border); padding:0 10px; align-items:center; gap:4px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.fab-text-bar::-webkit-scrollbar { display:none; }
.fab-text-bar.on { display:flex; }
.fab-text-bar-label { font-size:10px; color:var(--text3); white-space:nowrap; flex-shrink:0; }
.fab-text-fmt-btn { height:26px; padding:0 9px; flex-shrink:0; background:var(--bg4); border:1px solid var(--border2); border-radius:6px; color:var(--text2); font-size:12px; font-weight:800; cursor:pointer; font-family:inherit; transition:background .12s,color .12s,border-color .12s; display:flex; align-items:center; justify-content:center; }
.fab-text-fmt-btn.on { background:var(--accent); border-color:var(--accent); color:#fff; }
.fab-text-fmt-btn:active { transform:scale(.91); }
.fab-text-sep { width:1px; height:16px; background:var(--border2); flex-shrink:0; margin:0 2px; }
.fab-text-size-val { font-size:11px; font-weight:700; color:var(--text2); min-width:24px; text-align:center; flex-shrink:0; }

.fab-ocr-overlay { display:none; position:absolute; inset:0; z-index:40; background:rgba(248,249,250,.93); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); align-items:center; justify-content:center; flex-direction:column; gap:14px; color:var(--text); }
.fab-ocr-overlay.on   { display:flex; }
.fab-ocr-icon         { font-size:40px; line-height:1; }
.fab-ocr-status       { font-size:14px; font-weight:700; text-align:center; max-width:260px; }
.fab-ocr-bar          { width:220px; height:5px; background:rgba(0,0,0,.1); border-radius:5px; overflow:hidden; }
.fab-ocr-bar-fill     { height:100%; background:var(--accent-g); border-radius:5px; transition:width .25s ease; width:0%; }

/* Кнопка Сохранить в шапке — только на десктопе */
.fab-head-btn-save-desk { display:none; }

@media (min-width:1024px) {
  /* ── Основная раскладка FAB-редактора на десктопе ── */
  .fab-modal { flex-direction:row; }
  .fab-sidebar { display:flex; width:112px; padding:8px 0 10px; }
  .fab-foot    { display:none !important; }
  .fab-head    { height:44px; }

  /* Уменьшаем отступы внутри sidebar */
  .fab-sb-logo { font-size:20px; margin-bottom:6px; }
  .fab-sb-sep  { margin:5px 0; }

  /* ── Инструменты в 2 колонки ── */
  .fab-sb-tools {
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:3px;
    width:100%;
    padding:0 5px;
  }

  /* Компактный размер кнопок инструментов — заполняем ячейку grid */
  .fab-tool-btn.fab-sb-t {
    width:100%; margin-bottom:0; padding:5px 2px 4px; min-width:0;
  }
  .fab-tool-btn.fab-sb-t .sb-i { font-size:15px; line-height:1; }
  .fab-tool-btn.fab-sb-t .sb-l { font-size:8.5px; }

  /* ── Палитра цветов в 2 колонки ── */
  .fab-sb-palette {
    display:grid;
    grid-template-columns:repeat(2, 24px);
    gap:5px;
    justify-content:center;
    align-items:center;
    padding:0 5px;
  }

  /* ── Кнопки действий (Сохранить / Undo / Удалить) → в шапку ── */
  .fab-sb-actions { display:none !important; }
  /* Разделитель после палитры не нужен, если за ним только скрытые actions */
  .fab-sb-palette + .fab-sb-sep { display:none !important; }

  /* ── Кнопка Сохранить в шапке ── */
  .fab-head-btn-save-desk {
    display:flex !important;
    background:var(--accent-g); border-color:transparent; color:#fff;
    box-shadow:0 2px 8px rgba(124,92,252,.4);
  }
  .fab-head-btn-save-desk:active { opacity:.8; transform:scale(.96); }

  /* Кнопки heal/OCR в sidebar — немного компактнее */
  .fab-sb-btn { width:48px; padding:4px 2px; }
  .fab-sb-btn .sb-l { font-size:7.5px; }

  /* fab-head-btn-mobile больше не используется в HTML — оставляем как заглушку */
  .fab-head-btn-mobile { display:none !important; }
}

/* ── ZOOM GROUP ── */
.fab-zoom-group { display:flex; align-items:center; gap:2px; background:var(--bg4); border:1px solid var(--border2); border-radius:7px; padding:0 2px; height:32px; }
.fab-zoom-btn   { width:26px; height:26px; background:none; border:none; border-radius:5px; color:var(--text2); font-size:16px; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .15s; line-height:1; }
.fab-zoom-btn:active { background:var(--border); }
.fab-zoom-val   { min-width:38px; text-align:center; font-size:11px; font-weight:700; color:var(--text2); user-select:none; }

/* ── INSERT IMAGE PANEL ── */
.fab-insert-panel { display:none; position:absolute; bottom:10px; right:10px; z-index:30; flex-direction:column; gap:8px; background:rgba(255,255,255,.96); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border:1px solid rgba(0,0,0,.1); border-radius:12px; padding:11px 13px; box-shadow:0 4px 20px rgba(0,0,0,.2); min-width:215px; }
.fab-insert-panel.on { display:flex; }
.fab-insert-panel-title { font-size:9.5px; font-weight:700; color:var(--text3); text-transform:uppercase; letter-spacing:.5px; }
.fab-insert-slider-row { display:flex; align-items:center; gap:8px; }
.fab-insert-slider-row label { font-size:11px; font-weight:700; color:var(--text2); flex-shrink:0; min-width:54px; }
.fab-insert-slider-row input[type=range] { flex:1; accent-color:var(--accent); cursor:pointer; }
.fab-insert-slider-val { font-size:11px; font-weight:700; color:var(--text2); min-width:30px; text-align:right; flex-shrink:0; }
.fab-insert-actions { display:flex; gap:5px; flex-wrap:wrap; margin-top:1px; }

/* ── COMPRESS ── */
.pdf-btn-row { display:flex; gap:10px; }
.pdf-btn-row .btn-make { flex:2; }
.btn-compress { flex:1; padding:16px; border:none; border-radius:12px; background:linear-gradient(135deg,#1a6b4a,#1e9b6a); color:#fff; font-size:13px; font-weight:800; cursor:pointer; font-family:inherit; box-shadow:0 4px 20px rgba(30,155,106,.4); transition:transform .15s,box-shadow .15s,opacity .15s; letter-spacing:.1px; display:flex; align-items:center; justify-content:center; gap:6px; }
.btn-compress:disabled { opacity:.4; cursor:not-allowed; transform:none; box-shadow:none; }
.btn-compress:active   { transform:scale(.98); box-shadow:0 2px 10px rgba(30,155,106,.3); }
.cs-section { margin-bottom:14px; }
.cs-row-label { font-size:12px; font-weight:700; color:var(--text2); margin-bottom:7px; display:flex; justify-content:space-between; }
.cs-slider { width:100%; accent-color:var(--accent); cursor:pointer; }
.cs-opt { display:flex; align-items:center; gap:10px; padding:11px 14px; background:var(--bg3); border:1px solid var(--border2); border-radius:10px; cursor:pointer; margin-bottom:8px; transition:background .12s; }
.cs-opt:active { background:var(--bg4); }
.cs-opt-chk { width:20px; height:20px; flex-shrink:0; border:2px solid var(--border2); border-radius:5px; display:flex; align-items:center; justify-content:center; font-size:12px; color:#fff; transition:background .15s,border-color .15s; }
.cs-opt-chk.on { background:var(--accent); border-color:var(--accent); }
.cs-opt-text { font-size:12px; font-weight:600; color:var(--text2); line-height:1.4; }
.cs-opt-text strong { color:var(--text); font-weight:700; }

/* ── WATERMARK MODE TABS ── */
.wm-mode-tabs { display:flex; gap:6px; margin-bottom:10px; }
.wm-mode-btn {
  flex:1; padding:8px; border:2px solid var(--border2);
  border-radius:9px; background:var(--bg3); color:var(--text2);
  font-size:13px; font-weight:700; cursor:pointer; font-family:inherit;
  transition:border-color .12s, color .12s, background .12s;
}
.wm-mode-btn.active { border-color:var(--accent); background:rgba(124,92,252,.15); color:var(--text); }

/* Режим картинки */
.wm-img-pick-btn {
  width:100%; padding:10px; border:2px dashed var(--border2);
  border-radius:10px; background:var(--bg3); color:var(--text2);
  font-size:13px; font-weight:600; cursor:pointer; font-family:inherit;
  transition:border-color .12s;
}
.wm-img-pick-btn:hover { border-color:var(--accent); color:var(--text); }
.wm-img-thumb {
  width:100%; height:80px; margin-top:8px; border-radius:8px;
  background:var(--bg3) center/contain no-repeat;
  border:1px solid var(--border2);
}

/* ── WATERMARK ── */
.wm-text-inp { width:100%; padding:12px 14px; margin-bottom:8px; background:var(--bg); border:1px solid var(--border2); border-radius:var(--r2); color:var(--text); font-size:14px; font-family:inherit; font-weight:600; outline:none; transition:border-color .2s; }
.wm-text-inp:focus { border-color:var(--accent); }

/* Предпросмотр A4 */
.wm-preview-wrap { display:flex; justify-content:center; margin:4px 0 10px; }
.wm-preview-canvas { width:90px; height:127px; border:1px solid var(--border2); border-radius:4px; box-shadow:0 2px 10px rgba(0,0,0,.12); background:#fff; display:block; }
.wm-pos-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-bottom:12px; }
.wm-pos-btn { padding:9px 4px; background:var(--bg3); border:2px solid transparent; border-radius:9px; color:var(--text2); font-size:11px; font-weight:700; cursor:pointer; font-family:inherit; display:flex; flex-direction:column; align-items:center; gap:2px; transition:background .12s,border-color .12s,color .12s; }
.wm-pos-btn.active { border-color:var(--accent); background:rgba(124,92,252,.15); color:var(--text); }
.wm-pos-btn:active { transform:scale(.93); }
.wm-pos-i { font-size:15px; line-height:1.2; }
.wm-slider-row { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.wm-slider-row label { font-size:12px; font-weight:700; color:var(--text2); flex-shrink:0; }
.wm-slider-row input[type=range] { flex:1; accent-color:var(--accent); }
.wm-slider-val { font-size:12px; font-weight:700; color:var(--text2); min-width:34px; text-align:right; flex-shrink:0; }
.wm-color-row { display:flex; gap:6px; align-items:center; margin-bottom:12px; flex-wrap:wrap; }
.wm-cdot { width:26px; height:26px; border-radius:50%; border:2px solid rgba(0,0,0,.12); cursor:pointer; flex-shrink:0; transition:transform .12s,border-color .12s,box-shadow .12s; }
.wm-cdot.active-wm { border-color:var(--accent) !important; transform:scale(1.15); box-shadow:0 0 0 2px rgba(124,92,252,.3); }
.wm-cpick { position:relative; flex-shrink:0; }
.wm-cswatch { width:26px; height:26px; border-radius:50%; cursor:pointer; border:2px solid rgba(0,0,0,.15); display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:800; color:rgba(0,0,0,.5); overflow:hidden; transition:transform .12s,border-color .12s; }
.wm-cpick.active-wm .wm-cswatch { border-color:var(--accent); transform:scale(1.15); box-shadow:0 0 0 2px rgba(124,92,252,.3); }
.wm-badge { display:none; align-items:center; gap:7px; margin-top:10px; font-size:11.5px; font-weight:700; color:#3cbe6e; background:rgba(60,190,110,.1); border:1px solid rgba(60,190,110,.3); border-radius:9px; padding:8px 12px; }
.wm-badge.on { display:flex; }
.wm-badge-dot { width:6px; height:6px; border-radius:50%; background:#3cbe6e; flex-shrink:0; }
.wm-badge-rm { margin-left:auto; background:none; border:none; color:#3cbe6e; cursor:pointer; font-size:14px; font-family:inherit; }

/* Настройки шрифта водяного знака */
.wm-font-row { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.wm-font-select {
  flex:1; padding:6px 8px; background:var(--bg);
  border:1px solid var(--border2); border-radius:8px;
  color:var(--text); font-size:12px; font-family:inherit;
  outline:none; cursor:pointer;
  transition:border-color .15s;
}
.wm-font-select:focus { border-color:var(--accent); }
.wm-fmt-btn {
  width:30px; height:30px; background:var(--bg4);
  border:2px solid transparent; border-radius:7px;
  color:var(--text2); font-size:13px; cursor:pointer;
  font-family:inherit; display:flex; align-items:center;
  justify-content:center; flex-shrink:0;
  transition:background .12s, border-color .12s;
}
.wm-fmt-btn.active { border-color:var(--accent); background:rgba(124,92,252,.12); color:var(--text); }
.wm-fmt-btn:active { transform:scale(.9); }

/* ── PASSWORD ── */
.pwd-section { margin-top:13px; }
.pwd-toggle { display:flex; align-items:center; gap:10px; padding:11px 14px; background:var(--bg3); border:1px solid var(--border2); border-radius:10px; cursor:pointer; transition:background .12s; }
.pwd-toggle:active { background:var(--bg4); }
.pwd-chk { width:20px; height:20px; flex-shrink:0; border:2px solid var(--border2); border-radius:5px; display:flex; align-items:center; justify-content:center; font-size:12px; color:#fff; transition:background .15s,border-color .15s; }
.pwd-chk.on { background:var(--accent); border-color:var(--accent); }
.pwd-lbl { font-size:13px; font-weight:700; color:var(--text2); }
.pwd-fields { display:none; margin-top:10px; }
.pwd-fields.on { display:block; }
.pwd-inp { width:100%; padding:12px 14px; margin-bottom:8px; display:block; background:var(--bg); border:1px solid var(--border2); border-radius:var(--r2); color:var(--text); font-size:14px; font-family:inherit; outline:none; transition:border-color .2s; }
.pwd-inp:focus { border-color:var(--accent); }
.pwd-warn { font-size:11px; color:#b07000; line-height:1.5; padding:2px 0; }

/* ── ОНБОРДИНГ ── */
.onboarding { padding:16px 14px 4px; }
.onboarding-title { font-size:11.5px; font-weight:700; color:var(--text3); letter-spacing:.6px; text-transform:uppercase; margin-bottom:10px; }
.ob-cards { display:flex; gap:10px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; scroll-snap-type:x mandatory; padding-bottom:4px; }
.ob-cards::-webkit-scrollbar { display:none; }
.ob-card { flex-shrink:0; width:150px; scroll-snap-align:start; background:var(--bg3); border:1px solid var(--border); border-radius:var(--r); padding:13px 12px 11px; display:flex; flex-direction:column; gap:4px; cursor:pointer; transition:border-color .15s,background .15s; position:relative; overflow:hidden; }
.ob-card::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 0%,rgba(124,92,252,.06) 0%,transparent 70%); pointer-events:none; }
.ob-card:active { background:var(--bg4); border-color:var(--border2); }
.ob-card-icon  { font-size:22px; line-height:1; margin-bottom:3px; }
.ob-card-title { font-size:12px; font-weight:700; color:var(--text); line-height:1.3; }
.ob-card-desc  { font-size:10.5px; color:var(--text2); line-height:1.5; }
.ob-card-new   { display:inline-block; background:var(--accent); color:#fff; font-size:8px; font-weight:800; padding:2px 5px; border-radius:4px; letter-spacing:.3px; text-transform:uppercase; margin-top:2px; align-self:flex-start; }

/* ══ ГЛАВНАЯ СТРАНИЦА — PDF24 STYLE ══ */

/* ── HERO ZONE ── */
.hero-zone {
  text-align:center; padding:48px 20px 28px;
  background:linear-gradient(180deg,rgba(124,92,252,.055) 0%,transparent 100%);
  flex-shrink:0;
}
.hero-zone.drag-over { outline:3px dashed var(--accent); outline-offset:-4px; background:rgba(124,92,252,.06); }
.hero-title {
  font-size:clamp(22px,4vw,38px); font-weight:800;
  letter-spacing:-.5px; color:var(--text);
  line-height:1.15;
}
.hero-sub { font-size:clamp(13px,1.5vw,15px); color:var(--text2); letter-spacing:.1px; line-height:1.5; }
.hero-btns { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.hero-drop-hint { font-size:11px; color:var(--text3); margin-top:16px; opacity:.7; }

/* ── ЕДИНЫЕ КНОПКИ HERO ── */
.btn-hero {
  display:inline-flex; align-items:center; gap:6px;
  padding:12px 22px; border-radius:50px;
  font-size:13px; font-weight:700;
  cursor:pointer; font-family:inherit; border:2px solid transparent;
  transition:transform .15s,box-shadow .15s,opacity .15s;
}
.btn-hero:active { transform:scale(.96); opacity:.9; }
.btn-hero-photos {
  background:var(--accent-g); color:#fff; border-color:transparent;
  box-shadow:0 4px 18px rgba(124,92,252,.4);
}
.btn-hero-photos:active { box-shadow:0 2px 10px rgba(124,92,252,.3); }
.btn-hero-pdf {
  background:transparent; color:#e85d3c;
  border-color:rgba(232,93,60,.45);
}
.btn-hero-pdf:active { background:rgba(232,93,60,.1); border-color:#e85d3c; }
.btn-hero-duplex {
  background:linear-gradient(135deg,#1a6b4a,#1e9b6a); color:#fff; border-color:transparent;
  box-shadow:0 4px 18px rgba(30,155,106,.4);
}
.btn-hero-duplex:active { box-shadow:0 2px 10px rgba(30,155,106,.3); }

/* ── TOOLS PAGE ── */
.tools-page { padding:20px 16px 80px; }
.tools-cat  { margin-bottom:28px; }
.tools-cat-title {
  font-size:10px; font-weight:800; color:var(--text3);
  text-transform:uppercase; letter-spacing:1px;
  margin-bottom:10px; padding-left:1px;
}

/* ── TOOLS GRID ── */
.tools-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:8px;
}
@media(min-width:480px){ .tools-grid{ grid-template-columns:repeat(3,1fr); gap:10px; } }
@media(min-width:700px){ .tools-grid{ grid-template-columns:repeat(4,1fr); } }
@media(min-width:960px){ .tools-grid{ grid-template-columns:repeat(5,1fr); } }
@media(min-width:1200px){ .tools-grid{ grid-template-columns:repeat(6,1fr); } }

/* ── TOOL CARD ── */
.tool-card {
  background:var(--bg); border:1.5px solid var(--border);
  border-radius:14px; padding:14px 12px 13px;
  display:flex; flex-direction:column; gap:4px;
  cursor:pointer;
  transition:border-color .15s,box-shadow .15s,transform .12s;
  -webkit-tap-highlight-color:transparent;
}
.tool-card:hover {
  border-color:rgba(124,92,252,.45);
  box-shadow:0 4px 18px rgba(124,92,252,.11);
  transform:translateY(-2px);
}
.tool-card:active { transform:scale(.96); box-shadow:none; }

.tool-soon { opacity:.52; cursor:default !important; }
.tool-soon:hover { border-color:var(--border) !important; box-shadow:none !important; transform:none !important; }
.tool-soon:active { transform:none !important; }

/* ── TOOL ICON ── */
.tool-icon {
  width:46px; height:46px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-size:22px; margin-bottom:6px; flex-shrink:0;
}
.ti-orange { background:#fff3e0; }
.ti-blue   { background:#e3f2fd; }
.ti-green  { background:#e8f5e9; }
.ti-teal   { background:#e0f7fa; }
.ti-purple { background:#f3e5f5; }
.ti-indigo { background:#e8eaf6; }
.ti-amber  { background:#fff8e1; }
.ti-dark   { background:#eeeeee; }
.ti-grey   { background:#f5f5f5; }

/* ── TOOL NAME & DESC ── */
.tool-name {
  font-size:12.5px; font-weight:700; color:var(--text);
  line-height:1.3; display:flex; align-items:center;
  flex-wrap:wrap; gap:5px;
}
.tool-desc { font-size:10.5px; color:var(--text3); line-height:1.5; }

/* ── ПОПУЛЯРНЫЕ ИНСТРУМЕНТЫ ── */
.pop-tools { padding:32px 20px 8px; }
.pop-tools-title {
  font-size:11px; font-weight:800; color:var(--text3);
  text-transform:uppercase; letter-spacing:1px;
  margin-bottom:16px; text-align:center;
}
.pop-tools-grid {
  display:grid; grid-template-columns:repeat(2,1fr); gap:12px;
}
@media(min-width:640px) { .pop-tools-grid { grid-template-columns:repeat(4,1fr); } }

.pop-card {
  background:var(--bg); border:1.5px solid var(--border);
  border-radius:18px; padding:24px 14px 20px;
  display:flex; flex-direction:column; align-items:center;
  text-align:center; gap:8px; cursor:pointer;
  transition:border-color .18s, box-shadow .18s, transform .15s;
  -webkit-tap-highlight-color:transparent;
}
.pop-card:hover {
  border-color:rgba(124,92,252,.5);
  box-shadow:0 8px 28px rgba(124,92,252,.14);
  transform:translateY(-4px);
}
.pop-card:active { transform:scale(.96); box-shadow:none; }

.pop-card-icon {
  width:64px; height:64px; border-radius:18px;
  display:flex; align-items:center; justify-content:center;
  font-size:30px; margin-bottom:4px; flex-shrink:0;
}
.pop-icon-blue   { background:linear-gradient(135deg,#e3f2fd,#bbdefb); }
.pop-icon-purple { background:linear-gradient(135deg,#f3e5f5,#e1bee7); }
.pop-icon-green  { background:linear-gradient(135deg,#e8f5e9,#c8e6c9); }
.pop-icon-red    { background:linear-gradient(135deg,#fce4ec,#f8bbd0); }

.pop-card-title { font-size:13.5px; font-weight:800; color:var(--text); line-height:1.3; }
.pop-card-desc  { font-size:11px; color:var(--text3); line-height:1.5; }

/* ── НОВАЯ ГЛАВНАЯ — СЕКЦИИ ── */
.pop-tools-section { padding:32px 20px 8px; }
.all-tools-section { padding:24px 20px 80px; }
.all-tools-title {
  font-size:11px; font-weight:800; color:var(--text3);
  text-transform:uppercase; letter-spacing:1px;
  margin-bottom:16px;
}
.tools-grid-all {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:8px;
}
@media(min-width:480px){ .tools-grid-all{ grid-template-columns:repeat(3,1fr); gap:10px; } }
@media(min-width:700px){ .tools-grid-all{ grid-template-columns:repeat(4,1fr); } }
@media(min-width:960px){ .tools-grid-all{ grid-template-columns:repeat(5,1fr); } }
@media(min-width:1200px){ .tools-grid-all{ grid-template-columns:repeat(6,1fr); } }

/* ── HERO — КОМПОНОВКА ── */
.hero-zone { display:flex; flex-direction:column; align-items:center; gap:24px; }

/* Обёртка верхней части: заголовок + зона загрузки */
.hero-top {
  display:flex; flex-direction:column; align-items:center;
  gap:24px; width:100%; max-width:960px;
}
/* На широком экране — заголовок слева, зона загрузки справа */
@media(min-width:800px) {
  .hero-zone { padding:40px 40px 28px; }
  .hero-top  { flex-direction:row; justify-content:center; align-items:center; gap:56px; }
  .hero-meta { align-items:flex-start; text-align:left; flex:1; }
  .hero-title, .hero-sub { text-align:left; }
  /* Зафиксируем ширину зоны загрузки на десктопе */
  .hero-drop-area { flex-shrink:0; }
}

.hero-drop-area {
  display:flex; flex-direction:column; align-items:center;
  justify-content:center;
  width:min(480px, calc(100% - 20px)); height:220px; min-width:240px; min-height:200px;
  border:2.5px dashed rgba(124,92,252,.45);
  border-radius:24px; cursor:pointer;
  background:rgba(124,92,252,.04);
  transition:border-color .18s, background .18s, transform .15s;
  gap:10px;
}
.hero-drop-area:hover {
  border-color:var(--accent); background:rgba(124,92,252,.09);
  transform:scale(1.03);
}
.hero-plus { font-size:56px; line-height:1; color:var(--accent); font-weight:300; }
.hero-upload-title { font-size:13.5px; font-weight:700; color:var(--text); text-align:center; padding:0 14px; }
.hero-meta { display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px; }

/* ── ПОПУЛЯРНЫЕ ИНСТРУМЕНТЫ ВНУТРИ HERO ── */
.hero-pop-tools { width:100%; max-width:960px; }
.hero-tools-divider { height:1px; background:var(--border); margin:0 16px; flex-shrink:0; }

/* ── 8 ПОПУЛЯРНЫХ ИНСТРУМЕНТОВ (вертикальные карточки, 8 в ряд) ── */
.pop-tools-grid-8 {
  display:grid; grid-template-columns:repeat(4,1fr); gap:8px;
}
@media(min-width:960px) { .pop-tools-grid-8 { grid-template-columns:repeat(8,1fr); } }

.pop-card-h {
  display:flex; flex-direction:column; align-items:center;
  text-align:center; gap:6px;
  padding:14px 10px 12px; border-radius:14px;
  background:var(--bg); border:1.5px solid var(--border);
  cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:border-color .14s, transform .12s, box-shadow .14s;
}
.pop-card-h:hover {
  border-color:rgba(124,92,252,.45);
  box-shadow:0 4px 16px rgba(124,92,252,.1);
  transform:translateY(-2px);
}
.pop-card-h:active { transform:scale(.96); box-shadow:none; }

.pop-card-h-icon {
  width:44px; height:44px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-size:21px; flex-shrink:0;
}

.pop-card-h-name {
  font-size:11.5px; font-weight:700; color:var(--text); line-height:1.3;
}

.pop-card-h-desc {
  font-size:10px; color:var(--text3); line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* ── TOAST ── */
/* ── SELECT MODE ── */
.toolbar .tb-select { display:none; }
.toolbar.sel-mode .tb-normal { display:none; }
.toolbar.sel-mode .tb-select { display:inline-flex; }

.card-sel-overlay {
  display:none; position:absolute; inset:0; z-index:5;
  align-items:flex-start; justify-content:flex-end; padding:8px;
  cursor:pointer;
}
#GRID.select-mode .card-sel-overlay { display:flex; }
#GRID.select-mode .card-acts { display:none; }
#GRID.select-mode .card { cursor:pointer; }

.card-sel-check {
  width:26px; height:26px; border-radius:50%;
  border:2px solid rgba(255,255,255,.85);
  background:rgba(0,0,0,.35);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:15px; font-weight:700;
  transition:background .15s, border-color .15s;
}
.card.selected .card-sel-check { background:var(--accent); border-color:var(--accent); }
.card.selected { outline:3px solid var(--accent); outline-offset:-3px; border-radius:var(--r2); }

/* Кнопка скачать JPG на карточке */
.cbtn-dl { font-size:11px; flex-direction:column; gap:1px; height:34px; padding:3px 5px; }
.cbtn-jpg-lbl { font-size:7px; font-weight:800; color:rgba(255,255,255,.8); line-height:1; letter-spacing:.05em; }

/* ── SPLIT GALLERY MODE ── */
.toolbar .tb-sg { display:none; }
.toolbar.sg-mode .tb-normal { display:none; }
.toolbar.sg-mode .tb-sg { display:inline-flex; }

.grid.sg-mode { gap:7px; }

/* ── ВЕРТИКАЛЬНЫЙ РАЗДЕЛИТЕЛЬ между соседними карточками одного ряда ── */
.sg-slot {
  display:flex; flex-direction:column; align-items:center;
  cursor:pointer; user-select:none;
}
.sg-slot.no-cut .sg-add-line {
  flex:1; width:0; border-left:2px dashed rgba(0,0,0,.15);
  transition:border-color .15s;
}
.sg-slot.no-cut .sg-add-btn {
  flex-shrink:0; width:26px; height:26px;
  background:var(--bg); border:1.5px dashed rgba(0,0,0,.22);
  border-radius:50%; color:var(--text2); font-size:13px;
  cursor:pointer; font-family:inherit;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .15s;
}
.sg-slot.no-cut:hover .sg-add-btn { opacity:1; }
.sg-slot.no-cut:hover .sg-add-line { border-color:rgba(124,92,252,.55); }
.sg-slot.has-cut .sg-cut-line { flex:1; width:0; border-left:2.5px dashed #e85d3c; }
.sg-slot.has-cut .sg-cut-del {
  flex-shrink:0; width:22px; height:22px;
  background:rgba(232,93,60,.1); border:1px solid rgba(232,93,60,.4);
  border-radius:50%; color:#e85d3c; font-size:10px;
  cursor:pointer; font-family:inherit;
  display:flex; align-items:center; justify-content:center;
}
.sg-slot.has-cut .sg-cut-del:active { background:rgba(232,93,60,.25); }

/* ── SPLIT GALLERY PANEL ── */
#SG_PANEL {
  position:fixed; bottom:0; left:0; right:0;
  background:var(--bg); border-top:2px solid var(--border);
  z-index:500; padding:12px 14px 16px;
  transform:translateY(100%); transition:transform .25s ease;
  box-shadow:0 -4px 24px rgba(0,0,0,.15);
  max-height:70vh; overflow-y:auto;
}
#SG_PANEL.on { transform:translateY(0); }
.sg-panel-head {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:10px;
}
.sg-panel-title { font-size:15px; font-weight:700; color:var(--text); }
.sg-panel-close {
  background:var(--bg3); border:1px solid var(--border2);
  border-radius:8px; padding:5px 12px; cursor:pointer;
  color:var(--text2); font-size:13px; font-family:inherit;
}
.sg-parts-list {
  display:flex; flex-direction:column; gap:8px;
  max-height:160px; overflow-y:auto; margin-bottom:10px;
}
.sg-part-row {
  display:flex; align-items:center; gap:10px;
  background:var(--bg2); border-radius:10px; padding:8px 10px;
  flex-wrap:wrap;
}
.sg-part-info { min-width:90px; flex-shrink:0; }
.sg-part-range { font-size:12px; font-weight:700; color:var(--text); }
.sg-part-count { font-size:11px; color:var(--text3); }
.sg-part-name {
  flex:1; font-size:12px; font-family:inherit;
  padding:5px 8px; border:1px solid var(--border2);
  border-radius:7px; background:var(--bg); color:var(--text); min-width:80px;
}
.sg-dl-btn {
  background:var(--accent); color:#fff; border:none;
  border-radius:8px; padding:6px 12px; cursor:pointer;
  font-size:12px; font-weight:700; flex-shrink:0; font-family:inherit;
}
.sg-dl-btn:active { opacity:.8; }
.sg-del-cut-btn {
  background:rgba(232,93,60,.08); border:1px solid rgba(232,93,60,.3);
  border-radius:7px; color:#e85d3c; padding:5px 10px;
  cursor:pointer; font-size:11px; font-weight:600; font-family:inherit; flex-shrink:0;
}
.sg-del-cut-btn:active { background:rgba(232,93,60,.2); }
.sg-no-cuts {
  color:var(--text3); font-size:13px; text-align:center; padding:12px 0;
}
.sg-panel-foot { display:flex; gap:8px; flex-wrap:wrap; }
.sg-dl-all-btn {
  background:var(--accent); color:#fff; border:none;
  border-radius:10px; padding:10px 18px; cursor:pointer;
  font-size:13px; font-weight:700; font-family:inherit;
}
.sg-dl-all-btn:active { opacity:.85; }

/* ── SPLIT / EXTRACT VISUAL MODAL ── */
.sv-overlay {
  position:fixed; inset:0; z-index:955;
  background:rgba(0,0,0,.55);
  display:flex; align-items:center; justify-content:center;
  padding:12px;
}
.sv-box {
  background:var(--bg); border-radius:20px;
  width:min(96vw,860px); max-height:88vh;
  display:flex; flex-direction:column;
  overflow:hidden;
  box-shadow:0 24px 80px rgba(0,0,0,.35);
}
.sv-head {
  display:flex; align-items:center; gap:12px;
  padding:14px 18px; border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.sv-head-title {
  font-size:15px; font-weight:800; color:var(--text);
  white-space:nowrap; margin-right:auto;
}
.sv-tabs { display:flex; gap:6px; flex-shrink:0; }
.sv-tab {
  padding:6px 14px; border-radius:20px; border:none;
  background:var(--bg3); color:var(--text2);
  font-size:12px; font-weight:700; cursor:pointer;
  font-family:inherit; transition:background .15s,color .15s;
  white-space:nowrap;
}
.sv-tab.active { background:var(--accent); color:#fff; }
.sv-close-btn {
  width:32px; height:32px; border-radius:50%; border:none;
  background:var(--bg3); color:var(--text2); font-size:16px;
  cursor:pointer; font-family:inherit; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  transition:background .15s;
}
.sv-close-btn:hover { background:var(--bg4); color:var(--text); }
.sv-hint {
  padding:8px 18px; font-size:12px; color:var(--text3);
  border-bottom:1px solid var(--border); flex-shrink:0;
}
.sv-scroll {
  overflow-x:auto; overflow-y:auto;
  padding:20px 18px;
  flex:1; min-height:0;
  -webkit-overflow-scrolling:touch;
}
/* Горизонтальная лента (режим разрезания) */
.sv-strip-h {
  display:flex; align-items:flex-start; gap:0;
  min-width:min-content;
}
/* Сетка (режим извлечения) */
.sv-strip-g {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(100px,1fr));
  gap:10px;
}
/* Карточка страницы (оба режима) */
.sv-thumb-wrap, .sv-grid-item {
  flex-shrink:0; position:relative;
  cursor:pointer; border-radius:10px; overflow:hidden;
  border:2.5px solid var(--border);
  transition:border-color .15s, transform .12s;
  -webkit-tap-highlight-color:transparent;
}
.sv-thumb-wrap { width:90px; }
.sv-grid-item { border:2.5px solid var(--border); }
.sv-thumb-wrap:hover, .sv-grid-item:hover { border-color:rgba(124,92,252,.5); transform:scale(1.03); }
.sv-grid-item.sv-selected { border-color:var(--accent); }
.sv-thumb-img { width:100%; display:block; }
.sv-thumb-num {
  position:absolute; bottom:4px; left:50%;
  transform:translateX(-50%);
  background:rgba(0,0,0,.55); color:#fff;
  font-size:10px; font-weight:700;
  padding:2px 7px; border-radius:20px;
  pointer-events:none;
}
/* Чекбокс-оверлей (режим извлечения) */
.sv-check {
  position:absolute; top:5px; right:5px;
  width:20px; height:20px; border-radius:50%;
  background:var(--accent); color:#fff;
  font-size:12px; font-weight:800;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .15s;
  pointer-events:none;
}
.sv-grid-item.sv-selected .sv-check { opacity:1; }
/* Линия разреза (шов между страницами) */
.sv-seam {
  width:34px; height:110px; flex-shrink:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  cursor:pointer; gap:4px;
  position:relative;
}
.sv-seam-line {
  width:3px; height:60%; border-radius:2px;
  background:rgba(0,0,0,.12);
  transition:background .18s;
}
.sv-seam-icon {
  font-size:14px; color:var(--text3);
  line-height:1;
  transition:color .18s;
}
.sv-seam:hover .sv-seam-line { background:rgba(124,92,252,.4); }
.sv-seam:hover .sv-seam-icon { color:var(--accent); }
.sv-seam.sv-seam-on .sv-seam-line { background:#e53935; width:4px; height:70%; }
.sv-seam.sv-seam-on .sv-seam-icon { color:#e53935; }
.sv-foot {
  display:flex; gap:10px; align-items:center; justify-content:flex-end;
  padding:14px 18px; border-top:1px solid var(--border);
  flex-shrink:0;
}
.sv-run-btn {
  padding:10px 22px; border-radius:50px; border:none;
  background:var(--accent-g); color:#fff;
  font-size:13px; font-weight:700; cursor:pointer;
  font-family:inherit;
  transition:opacity .15s, transform .12s;
}
.sv-run-btn:hover { opacity:.9; }
.sv-run-btn:active { transform:scale(.97); }
.sv-run-btn:disabled { opacity:.4; cursor:default; }
.sv-cancel-btn {
  padding:10px 18px; border-radius:50px; border:1px solid var(--border2);
  background:transparent; color:var(--text2);
  font-size:13px; font-weight:600; cursor:pointer;
  font-family:inherit;
}
.sv-cancel-btn:hover { background:var(--bg3); }

/* Split modal textarea + hint */
.split-box { max-width:420px; }
.split-ta {
  width:100%; box-sizing:border-box;
  background:var(--bg2); border:1px solid var(--border2);
  border-radius:10px; color:var(--text); font-size:13px;
  padding:10px 12px; font-family:inherit; resize:vertical;
  outline:none;
}
.split-ta:focus { border-color:var(--accent); }
.split-info { font-size:12px; color:var(--text3); }
.split-status { font-size:13px; min-height:18px; }
.split-status.ok  { color:#3cbe6e; }
.split-status.err { color:var(--red); }
.html2pdf-hint {
  font-size:12px; color:var(--text2); line-height:1.5;
  background:var(--bg3); border-radius:8px; padding:10px 12px;
}

/* ── TOOL START DIALOG ── */
.tool-dlg-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.5);
  display:flex; align-items:center; justify-content:center;
  z-index:1050;
}
.tool-dlg-box {
  background:var(--bg); border-radius:var(--r);
  padding:28px 28px 24px; max-width:370px; width:90%;
  box-shadow:0 20px 60px rgba(0,0,0,.22);
  display:flex; flex-direction:column; gap:10px;
}
.tool-dlg-title { font-size:16px; font-weight:700; color:var(--text); }
.tool-dlg-sub   { font-size:13px; color:var(--text2); line-height:1.5; }
.tool-dlg-count { font-size:12px; color:var(--text3); }
.tool-dlg-btns  { display:flex; flex-direction:column; gap:8px; margin-top:6px; }
.tool-dlg-btn {
  padding:11px 16px; border-radius:10px; border:none;
  font-size:14px; font-weight:600; cursor:pointer;
  font-family:inherit; transition:background .12s;
  background:var(--bg3); color:var(--text);
}
.tool-dlg-btn:hover  { background:var(--bg4); }
.tool-dlg-btn.primary { background:var(--accent); color:#fff; }
.tool-dlg-btn.primary:hover { background:var(--accent2); }
.tool-dlg-btn.cancel { color:var(--text3); font-weight:500; }

.app-toast {
  position:fixed; bottom:28px; left:50%;
  transform:translateX(-50%);
  background:#1a1a2e; color:#fff;
  font-size:13px; font-weight:600;
  padding:12px 22px; border-radius:50px;
  box-shadow:0 6px 24px rgba(0,0,0,.35);
  z-index:10000; pointer-events:none;
  white-space:nowrap; opacity:1;
  transition:opacity .3s ease;
}
.app-toast.fade { opacity:0; }

/* ── SOON BADGE ── */
.soon-badge {
  font-size:7.5px; font-weight:800; padding:2px 5px;
  background:var(--bg3); color:var(--text3);
  border-radius:4px; letter-spacing:.4px;
  text-transform:uppercase; flex-shrink:0; white-space:nowrap;
}

/* ── OCR — модальное окно редактирования текста ── */
.fab-ocr-edit-modal {
  display:none; position:absolute; inset:0; z-index:60;
  background:rgba(0,0,0,.55); backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  align-items:center; justify-content:center;
}
.fab-ocr-edit-modal.on { display:flex; }
.fab-ocr-edit-box {
  background:var(--bg2); border-radius:var(--r);
  padding:20px 18px 16px;
  max-width:520px; width:calc(100% - 32px);
  max-height:80vh; display:flex; flex-direction:column; gap:12px;
  box-shadow:0 8px 32px rgba(0,0,0,.35);
}
.fab-ocr-edit-head {
  font-weight:700; font-size:14px; color:var(--text);
  padding-bottom:4px; border-bottom:1px solid var(--border);
}
.fab-ocr-edit-list {
  overflow-y:auto; flex:1; min-height:60px;
  display:flex; flex-direction:column; gap:7px;
}
.ocr-edit-row { display:flex; gap:8px; align-items:center; }
.ocr-edit-row-del .ocr-edit-input {
  opacity:.4; text-decoration:line-through; color:var(--text3);
}
.ocr-edit-input {
  flex:1; padding:7px 10px;
  border-radius:var(--r2); border:1px solid var(--border);
  background:var(--bg); color:var(--text); font-size:13px;
  font-family:inherit; outline:none;
  transition:border-color .15s;
}
.ocr-edit-input:focus { border-color:var(--accent); }
.ocr-edit-input:disabled {
  background:var(--bg3); cursor:not-allowed;
  border-color:var(--border);
}
.ocr-edit-del-btn {
  flex-shrink:0; padding:5px 10px;
  border-radius:var(--r2); border:1px solid var(--border);
  background:transparent; color:var(--text2);
  font-size:11px; font-weight:600; cursor:pointer;
  white-space:nowrap; transition:background .15s, color .15s, border-color .15s;
  font-family:inherit;
}
.ocr-edit-del-btn:hover { background:var(--bg3); }
.ocr-edit-del-btn-on {
  background:var(--red) !important; color:#fff !important;
  border-color:var(--red) !important;
}
.fab-ocr-edit-footer {
  display:flex; gap:8px; justify-content:flex-end;
  border-top:1px solid var(--border); padding-top:12px;
}

/* ── ПЛАВАЮЩАЯ КНОПКА ОБРАТНОЙ СВЯЗИ ── */
.feedback-fab {
  position:fixed; bottom:24px; right:20px; z-index:9901;
  width:52px; height:52px; border-radius:50%;
  background:var(--accent-g); color:#fff; border:none;
  font-size:22px; cursor:pointer;
  box-shadow:0 4px 20px rgba(124,92,252,.5);
  display:flex; align-items:center; justify-content:center;
  transition:transform .15s,box-shadow .15s,opacity .15s;
  -webkit-tap-highlight-color:transparent;
}
.feedback-fab:hover  { transform:scale(1.09); box-shadow:0 6px 28px rgba(124,92,252,.6); }
.feedback-fab:active { transform:scale(.9); }

/* ── ЧАТ-ПАНЕЛЬ ОБРАТНОЙ СВЯЗИ (неблокирующая) ── */
.feedback-chat {
  display:none; position:fixed; bottom:88px; right:20px; z-index:9900;
  width:320px; max-width:calc(100vw - 40px);
  background:var(--bg2); border:1px solid var(--border2);
  border-radius:18px; padding:18px 16px 14px;
  box-shadow:0 8px 40px rgba(0,0,0,.22);
  flex-direction:column; gap:10px;
  animation:dropIn .18s ease;
}
.feedback-chat.on { display:flex; }
.feedback-chat-head {
  display:flex; align-items:center; justify-content:space-between;
}
.feedback-title { font-size:15px; font-weight:800; color:var(--text); }
.feedback-close {
  width:28px; height:28px; border-radius:50%; border:none;
  background:var(--bg4); color:var(--text2); font-size:13px;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  font-family:inherit; transition:background .12s; flex-shrink:0;
}
.feedback-close:active { background:var(--border); }
.feedback-sub  { font-size:12px; color:var(--text2); line-height:1.5; margin:0; }
.feedback-ta {
  width:100%; padding:10px 12px; resize:vertical; min-height:90px;
  background:var(--bg); border:1px solid var(--border2); border-radius:var(--r2);
  color:var(--text); font-size:13px; font-family:inherit; outline:none;
  transition:border-color .2s;
}
.feedback-ta:focus { border-color:var(--accent); }
.feedback-status { font-size:11.5px; min-height:14px; color:var(--text3); }
.feedback-status.ok  { color:#3cbe6e; font-weight:700; }
.feedback-status.err { color:var(--red); }
.feedback-actions { display:flex; gap:8px; justify-content:flex-end; }
.feedback-send-btn {
  padding:10px 22px; background:var(--accent-g); border:none;
  border-radius:9px; color:#fff; font-size:13px; font-weight:700;
  cursor:pointer; font-family:inherit;
  box-shadow:0 3px 14px rgba(124,92,252,.4);
  transition:transform .12s,box-shadow .12s,opacity .12s;
}
.feedback-send-btn:active   { transform:scale(.96); }
.feedback-send-btn:disabled { opacity:.45; cursor:not-allowed; transform:none; box-shadow:none; }