/* Скин «ru2» — новый дизайн RuPDF по макету Figma (приёмка 17.08.2026).
   Подключается ВМЕСТО ru.css, когда включена настройка «Новый дизайн»
   (админка → Настройки) или личный предпросмотр ?design=new.
   Палитра из UI-кита: Primary #2563EB, Text #0F172A, Surface #F8FAFC,
   Border #E2E8F0, Success #16A34A, Warning #CA8A04, Error #DC2626.
   Тёмная тема макета: фон #0C1B33, карточки остаются белыми. */

:root{
  --accent:#2563eb; --accent-dark:#1d4ed8; --accent-soft:#e4edff;
  --ink:#0f172a; --muted:#64748b; --line:#e2e8f0;
  --bg:#f8fafc; --card:#ffffff; --ok:#16a34a; --radius:16px;
  --shadow:0 2px 6px rgba(15,23,42,.04),0 10px 26px rgba(15,23,42,.07);
}

/* страница: сплошной светло-голубой фон НА HTML. Обязательно сплошной цвет
   и обязательно на html: фон-градиент (и фон body) не красят жёлоб
   scrollbar-gutter, и у правого края появляется вертикальная полоса
   другого цвета — проверено в Chromium и Safari */
/* scrollbar-gutter:auto + постоянный overflow-y:scroll вместо базового
   scrollbar-gutter:stable: Safari резервирует жёлоб даже при накладных
   скроллбарах и подкрашивает его (вертикальная линия у правого края).
   Постоянная полоса прокрутки решает и «прыжок ширины»: в Windows видна
   обычная серая полоса, в Safari/iOS накладная и места не занимает */
html{background:#ecf2fd;scrollbar-gutter:auto;overflow-y:scroll}

/* Inter — шрифт макета (вариативный, кириллица включена; лицензия OFL,
   файл лежит у нас — static/fonts, внешних запросов нет) */
@font-face{
  font-family:'Inter';
  src:url('/static/fonts/InterVariable.woff2') format('woff2-variations');
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}
body{
  background:none;
  font-family:'Inter','Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif;
}
h1,h2,h3,.logo{letter-spacing:-.3px}

/* ---------- шапка ---------- */
header.site{background:#fff;border-bottom:1px solid var(--line)}
.nav{height:62px;gap:22px}
.logo{font-size:21px;gap:10px}
.logo .dot{display:none}
.logo::before{
  content:"Ru";display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border:2.5px solid var(--accent);border-radius:9px;
  color:var(--accent);background:#fff;font-size:14.5px;font-weight:800;flex-shrink:0;
}
.nav a.nl{font-size:15px}
.theme-btn{
  background:#0f172a;color:#fff;border:none;border-radius:999px;
  padding:7px 15px;font-size:15px;
}
.theme-btn:hover{background:#1e293b}
.btn{border-radius:10px}
.btn.big{border-radius:12px;padding:14px 36px}
.reg-btn{padding:8px 18px;font-size:14px;border-radius:10px}

/* ---------- герой и секции ---------- */
/* margin:0 auto обязателен: .hero стоит на одном элементе с .container,
   и margin без auto отключил бы центрирование всего блока на широких экранах */
.hero{background:none;border-radius:0;margin:0 auto;padding:64px 0 26px}
.hero h1{font-size:clamp(30px,4.6vw,48px);letter-spacing:-1px}
.hero p{color:#475569;font-size:17px}
.section-title{font-size:clamp(22px,2.6vw,30px);margin:44px 0 18px}

/* ---------- карточки инструментов ---------- */
.card{
  border:none;border-left:none;border-radius:16px;padding:20px;
  box-shadow:var(--shadow);
}
.card:hover{
  transform:translateY(-3px);border:none;border-left:none;
  box-shadow:0 4px 10px rgba(37,99,235,.10),0 18px 38px rgba(37,99,235,.14);
}
.card .ic{font-size:32px;margin-bottom:12px;filter:none}
.card .ic img{width:34px;height:34px;display:block}
img.ic-svg{width:20px;height:20px;vertical-align:-5px}
.card h3{font-size:17px;font-weight:700}
.card p{font-size:13.5px;line-height:1.45}

/* ---------- страница инструмента ---------- */
.tool-head{padding:44px 0 8px}
.tool-head h1{font-size:clamp(26px,3.8vw,40px);font-weight:800}
.drop{border:2px dashed #cbd5e1;border-radius:16px;background:#fff}
.drop.drag{background:var(--accent-soft);border-color:var(--accent)}
.panel{border-radius:16px}
.fitem{border-radius:12px}
.fitem .rm{color:#dc2626}
.field input[type=text],.field input[type=number],.field input[type=password],
.field input[type=url],.field select,.field textarea{border-radius:10px}
.field label{color:#334155}
.rgroup{border-color:#cbd5e1;border-radius:12px}
.result .okmark{background:var(--accent)}
.note-banner{border-radius:14px}
.authbox{border-radius:16px;padding:32px}
table.list{border-radius:16px}
table.list th{background:#f1f5f9;color:#475569}

/* ---------- редакторы ---------- */
.editor-canvas-zone{background:#e7edfb;border-radius:16px}
.editor-side{border-radius:16px}
#cropBox{border-color:var(--accent)}
.handle{border-color:var(--accent)}
.tl-item:hover{outline-color:rgba(37,99,235,.7);background:rgba(37,99,235,.06)}
.tl-item.edited{outline-color:rgba(37,99,235,.85)}
.edit-input{border-color:var(--accent)}

/* ---------- экран обработки (по макету: без карточки, крупно) ---------- */
.panel.progress{background:none;box-shadow:none;padding:46px 20px}
.progress .spinner{width:86px;height:86px;border-width:6px;
  border-color:#dce4f5;border-top-color:var(--accent);margin:0 auto 26px}
.progress > div{font-size:clamp(22px,3vw,30px);font-weight:800;color:var(--ink)}
.progress .pbar{height:42px;max-width:640px;background:#fff;
  border:1.5px solid #d5deef;border-radius:999px;margin:22px auto 10px}
.progress .pbar-fill{border-radius:999px}
.progress .pct{font-size:14px;font-weight:500;color:var(--muted)}
.progress .eta{font-size:18px;font-weight:800;margin-top:8px;color:var(--ink)}

/* ---------- зум-панель ---------- */
.zoombar{border-radius:999px;padding:6px 10px;box-shadow:0 6px 22px rgba(15,23,42,.18)}
.zoombar button{border:none;border-radius:999px}
.zoombar button:hover{background:var(--accent-soft)}

/* ---------- подвал ---------- */
footer.site{background:transparent;border-top:1px solid var(--line)}
footer.site a{color:var(--accent)}

/* ---------- мобильное меню ---------- */
.mobile-menu .mm-link{border-bottom:1px solid var(--line)}
.mobile-menu .mm-accent{display:block;background:var(--accent);color:#fff;
  border-radius:10px;text-align:center;padding:12px;margin:10px 0;
  border-bottom:none;font-weight:700}

/* ============================================================
   ТЁМНАЯ ТЕМА (макет: тёмно-синий фон, карточки остаются белыми)
   ============================================================ */
html[data-theme=dark]{
  --accent:#2f6df0; --accent-dark:#1d4ed8; --accent-soft:#e4edff;
  --line:#22355a; --bg:#0c1b33; --card:#ffffff;
  --ink:#e8eef9; --muted:#93a5c6; --ok:#16a34a;
  --shadow:0 2px 6px rgba(2,8,23,.35),0 12px 30px rgba(2,8,23,.45);
}
html[data-theme=dark]{background:#0c1b33}
html[data-theme=dark] body{background:none}

/* шапка тёмная */
html[data-theme=dark] header.site{background:#0a1730;border-bottom:1px solid #22355a}
html[data-theme=dark] .nav a.nl{color:#e6ecf8}
html[data-theme=dark] .nav a.nl:hover{color:#7ea4f5}
html[data-theme=dark] .logo{color:#fff}
html[data-theme=dark] .theme-btn{background:#fff;color:#0f172a}
html[data-theme=dark] .burger span{background:#e6ecf8}

/* тексты, лежащие прямо на тёмном фоне */
html[data-theme=dark] .hero h1,
html[data-theme=dark] .section-title,
html[data-theme=dark] .tool-head h1{color:#fff}
html[data-theme=dark] .hero p,
html[data-theme=dark] .tool-head p{color:#b6c2dd}
html[data-theme=dark] .seotext{color:#b6c2dd}
html[data-theme=dark] .seotext h2,html[data-theme=dark] .seotext h3{color:#fff}

/* белые поверхности: внутри — тёмный текст (как в макете) */
html[data-theme=dark] .card,
html[data-theme=dark] .panel,
html[data-theme=dark] .authbox,
html[data-theme=dark] .fitem,
html[data-theme=dark] .editor-side,
html[data-theme=dark] .drop,
html[data-theme=dark] table.list{color:#0f172a}
html[data-theme=dark] .card p{color:#64748b}
html[data-theme=dark] .fitem .sz,
html[data-theme=dark] .mini-hint,
html[data-theme=dark] .drop .hint,
html[data-theme=dark] .result .note{color:#64748b}
html[data-theme=dark] .field label{color:#334155}
html[data-theme=dark] .drop{background:#fff;border-color:#cbd5e1}
html[data-theme=dark] .drop.drag{background:var(--accent-soft);border-color:var(--accent)}
html[data-theme=dark] .fitem{background:#fff;border-color:#e2e8f0}
html[data-theme=dark] .field input[type=text],html[data-theme=dark] .field input[type=number],
html[data-theme=dark] .field input[type=password],html[data-theme=dark] .field input[type=url],
html[data-theme=dark] .field select,html[data-theme=dark] .field textarea{
  background:#fff;color:#0f172a;border-color:#e2e8f0}
html[data-theme=dark] .rgroup{border-color:#cbd5e1}
html[data-theme=dark] table.list{background:#fff}
html[data-theme=dark] table.list th{background:#f1f5f9;color:#475569}
html[data-theme=dark] table.list td{border-top-color:#e2e8f0}
html[data-theme=dark] .thumb{background:#fff}
html[data-theme=dark] .thumb .num{color:#64748b}

/* кнопки-«чипсы» и пагинация: белые с тёмным текстом */
html[data-theme=dark] .btn.ghost{background:#fff;color:#0f172a;border-color:#e2e8f0}
html[data-theme=dark] .btn.ghost:hover{border-color:var(--accent);color:var(--accent)}
html[data-theme=dark] .pagenav button{background:#fff;color:#0f172a;border-color:#e2e8f0}
html[data-theme=dark] .pagenav span{color:#64748b}
html[data-theme=dark] .ep-tool{background:#fff;color:#0f172a}
html[data-theme=dark] .ep-tool i{color:#64748b}
html[data-theme=dark] .ep-tool.active{background:var(--accent-soft)}

/* экран обработки в тёмной теме: белый текст, светлое кольцо спиннера */
html[data-theme=dark] .panel.progress{background:none;box-shadow:none;color:#fff}
html[data-theme=dark] .progress > div{color:#fff}
html[data-theme=dark] .progress .spinner{border-color:rgba(255,255,255,.85);
  border-top-color:var(--accent)}
html[data-theme=dark] .progress .pbar{background:#fff;border-color:#3a5586}
html[data-theme=dark] .progress .pct{color:#9fb0d0}
html[data-theme=dark] .progress .eta{color:#fff}

/* зона канвы и зум-панель */
html[data-theme=dark] .editor-canvas-zone{background:#0a1526}
html[data-theme=dark] .zoombar{background:#0f1e38;border-color:#2c4472}
html[data-theme=dark] .zoombar button{background:transparent;color:#e6ecf8}
html[data-theme=dark] .zoombar button:hover{background:#1c3157;color:#fff}

/* подвал и мобильное меню */
html[data-theme=dark] footer.site{background:transparent;border-top:1px solid #22355a;color:#93a5c6}
html[data-theme=dark] footer.site a{color:#7ea4f5}
html[data-theme=dark] .mobile-menu{background:#0c1b33}
html[data-theme=dark] .mm-link{color:#e6ecf8;border-bottom-color:#22355a}
html[data-theme=dark] .mm-cat{color:#93a5c6}
html[data-theme=dark] .note-banner{background:#2a2410;border-color:#4a3d14;color:#e8c56b}