:root {
  --accent: #d21f2b;
  --ink: #1a1a1a;
  --muted: #6b7280;
  --line: #e5e7eb;
  --bg: #f7f7f8;
  --panel: #ffffff;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  font-size: 15px;
  line-height: 1.5;
}
a { color: inherit; text-decoration: none; }

/* --- Shell --- */
.shell { min-height: 100vh; display: flex; flex-direction: column; }
.topbar {
  height: 56px; background: var(--panel); border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; padding: 0 20px;
}
.brand { font-weight: 700; letter-spacing: .3px; color: var(--accent); }
.userbox { display: flex; align-items: center; gap: 14px; font-size: 14px; }
.user-fio { color: var(--ink); }
.role-badge {
  background: #f1f2f4; color: var(--muted); border: 1px solid var(--line);
  border-radius: 999px; padding: 2px 10px; font-size: 12px;
}
.logout { color: var(--muted); }
.logout:hover { color: var(--accent); }

.body { flex: 1; display: flex; }
.sidenav {
  width: 220px; background: var(--panel); border-right: 1px solid var(--line);
  padding: 14px 10px; display: flex; flex-direction: column; gap: 2px;
}
.navlink {
  padding: 9px 12px; border-radius: 8px; color: var(--ink); font-size: 14px;
}
.navlink:hover { background: #f1f2f4; }
.navlink.is-active { background: #fbe7e8; color: var(--accent); font-weight: 600; }

.content { flex: 1; padding: 28px 32px; }
.screen-title { margin: 0 0 16px; font-size: 22px; }
.stub-note {
  background: var(--panel); border: 1px dashed var(--line); border-radius: 10px;
  padding: 16px; color: var(--muted);
}

/* --- Login --- */
.login-body {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--bg);
}
.login-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  padding: 32px; width: 380px; text-align: center;
  box-shadow: 0 6px 24px rgba(0,0,0,.05);
}
.login-logo { font-size: 22px; font-weight: 700; color: var(--accent); margin-bottom: 20px; }
.login-hint { color: var(--muted); font-size: 13px; margin-top: 14px; }
.login-form { display: flex; flex-direction: column; gap: 12px; text-align: left; }
.login-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
.login-form input {
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px;
  font-size: 15px; color: var(--ink); background: #fff;
}
.login-form .btn-primary { margin-top: 4px; }

/* --- Rich-редактор тела письма (текст + вставленные таблицы) --- */
.rich-editor {
  min-height: 180px; border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px;
  font-size: 15px; color: var(--ink); background: #fff; overflow: auto; line-height: 1.4;
}
.rich-toolbar { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; flex-wrap: wrap; }
.rt-btn {
  min-width: 34px; padding: 5px 9px; border: 1px solid var(--line); border-radius: 7px;
  background: var(--panel); color: var(--ink); cursor: pointer; font-size: 13px;
}
.rt-btn:hover { background: #f1f2f4; }
.rt-sep { width: 1px; height: 20px; background: var(--line); margin: 0 4px; }
.rich-editor:empty:before { content: attr(data-ph); color: var(--muted); }
.rich-editor:focus { outline: none; border-color: var(--accent); }
.rich-editor table { border-collapse: collapse; margin: 8px 0; max-width: 100%; }
.rich-editor td, .rich-editor th { border: 1px solid var(--line); padding: 4px 8px; }
.rich-editor th { font-weight: 600; background: #fafafa; }

.btn {
  display: inline-block; padding: 10px 16px; border-radius: 9px; cursor: pointer;
  border: 1px solid var(--line); background: var(--panel); color: var(--ink); font-size: 14px;
}
.btn:hover { background: #f1f2f4; }
/* Главная (красная) кнопка — по ширине ТЕКСТА (как остальные .btn), не на всю страницу. */
.btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-primary:hover { background: #b91b26; }
/* Исключение: кнопка входа на узкой карточке логина остаётся на всю ширину. */
.btn-google { width: 100%; }

.banner { border-radius: 9px; padding: 10px 12px; font-size: 14px; margin-bottom: 16px; text-align: left; }
.banner-error { background: #fdecec; color: #a11; border: 1px solid #f4c9c9; }
.banner-info { background: #eef2ff; color: #3742a3; border: 1px solid #d4dbff; }

/* --- Dev block (визуально выделен, чтобы не спутать с продом) --- */
.dev-block { margin-top: 24px; border-top: 1px dashed var(--line); padding-top: 16px; }
.dev-tag {
  font-size: 11px; letter-spacing: .4px; color: #92400e; background: #fff7ed;
  border: 1px solid #fed7aa; border-radius: 6px; padding: 4px 8px; margin-bottom: 10px;
}
.dev-form { display: flex; flex-direction: column; gap: 10px; }
.dev-form select { padding: 8px; border: 1px solid var(--line); border-radius: 8px; width: 100%; }

/* --- Формы --- */
.form { max-width: 680px; display: flex; flex-direction: column; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.field > span { color: var(--muted); }
.field input, .field select, .field textarea, .filters input, .filters select {
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font: inherit; width: 100%;
}
.row { display: flex; gap: 14px; }
.row .field { flex: 1; }
.toggle { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.actions { display: flex; gap: 10px; align-items: center; margin-top: 8px; }

.banner-ok { background: #eafaef; color: #17663a; border: 1px solid #bfe6cd; }
.banner code { background: #fff; padding: 0 4px; border-radius: 4px; }

/* --- Только номер --- */
.number-result { display: flex; align-items: center; gap: 14px; margin: 12px 0 24px; }
.number-big { font-size: 30px; font-weight: 700; letter-spacing: .5px; }

/* --- Предпросмотр (fit-to-page: письмо целиком + кнопки видны) --- */
.preview-screen { display: flex; flex-direction: column; height: calc(100vh - 112px); }
.preview-head { flex: 0 0 auto; }
.preview-head .screen-title { margin: 0 0 4px; font-size: 18px; }
.preview-note { color: var(--muted); font-size: 12px; margin-bottom: 8px; }
.preview-frame {
  flex: 1 1 auto; min-height: 0; margin: 0;
  /* safe center: центрируем, пока помещается; при зуме (переполнении) выравниваем к началу,
     чтобы можно было проскроллить письмо ЦЕЛИКОМ сверху донизу и слева направо. */
  display: flex; align-items: safe center; justify-content: safe center;
  overflow: auto; border: 1px solid var(--line); border-radius: 10px;
  background: #f3f4f6; padding: 10px;
}
.preview-actions { flex: 0 0 auto; padding-top: 12px; }

/* --- Таблицы реестра --- */
.filters { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.filters input, .filters select { width: auto; }
.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; }
.reg-table { border-collapse: collapse; width: 100%; font-size: 13px; white-space: nowrap; }
.reg-table th, .reg-table td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; }
.reg-table th { background: #fafafa; color: var(--muted); font-weight: 600; }
.reg-table .nowrap { white-space: nowrap; }
.row-cancelled { color: #9aa0a6; background: #fbfbfb; }
.actions-cell { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.actions-cell input[type=date] { padding: 4px; border: 1px solid var(--line); border-radius: 6px; }
.inline { display: inline-flex; gap: 4px; align-items: center; margin: 0; }
.link { background: none; border: 0; color: var(--accent); cursor: pointer; padding: 2px 4px; font: inherit; }
.link:hover { text-decoration: underline; }
.link-danger { color: #b91b26; }
.muted { color: var(--muted); }

/* --- Админ: добавить пользователя --- */
.add-user { margin-bottom: 16px; }
.add-user summary { display: inline-block; list-style: none; }
.add-form { margin-top: 12px; max-width: 420px; }

/* --- Версии бланков --- */
.versions-company { font-size: 17px; margin: 22px 0 8px; }
.versions-company .muted { font-weight: 400; font-size: 14px; }

.toolbar { margin-bottom: 14px; display: flex; gap: 10px; }

.chk { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.filters .btn { white-space: nowrap; }

.preview-img {
  /* размер задаёт JS (зум = % высоты области); auto по ширине сохраняет пропорции A4 */
  height: 100%; width: auto; display: block; background: #fff; flex: 0 0 auto;
  box-shadow: 0 1px 6px rgba(0,0,0,.12);
}

/* --- Предпросмотр: тулбар зума + индикаторы (E1/E2) --- */
.preview-toolbar { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.btn-sm { padding: 4px 10px; font-size: 14px; }
.zoom-label { color: var(--muted); font-size: 13px; min-width: 90px; }
.preview-loading { color: var(--muted); font-size: 14px; padding: 24px; }
.prep-overlay { position: fixed; inset: 0; background: rgba(255,255,255,.7); z-index: 50;
  display: flex; align-items: center; justify-content: center; }
.prep-box { background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: 18px 26px; box-shadow: 0 6px 24px rgba(0,0,0,.12); display: flex; align-items: center; gap: 12px; }
.spinner { width: 18px; height: 18px; border: 3px solid #e5e7eb; border-top-color: var(--accent);
  border-radius: 50%; display: inline-block; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }