/* Дизайн-система DataDoc (datadoc.ru): токены вытащены из их CSS-бандла. */
:root {
  /* Палитра */
  --primary-50:  #eef6ff;
  --primary-100: #d8ebff;
  --primary-200: #a1cfff;
  --primary-300: #2c95ff;
  --primary-400: #006edd;  /* основной акцент */
  --primary-450: #0565c6;
  --primary-500: #025ab2;  /* hover/active */
  --primary-700: #03386f;
  --primary-900: #001932;

  --black: #161616;
  --white: #ffffff;
  --grey-0: #555c61;
  --grey-1: #6e7072;
  --grey-2: #969c9e;
  --grey-3: #c6cbcd;
  --grey-4: #d3d7db;
  --grey-5: #dfe2e5;
  --grey-6: #ebeef1;
  --grey-7: #f3f5f6;

  --success: #1aa179;
  --success-bg: #d2f4ea;
  --attention: #d4aa1c;
  --attention-bg: #fdf0c5;
  --error: #f36578;
  --error-bg: #ffdada;

  /* Семантические */
  --bg: var(--grey-7);
  --panel: var(--white);
  --text: var(--black);
  --muted: var(--grey-1);
  --border: var(--grey-6);
  --accent: var(--primary-400);
  --accent-hover: var(--primary-500);

  /* Радиусы */
  --r-xxs: 4px;
  --r-xs: 6px;
  --r-s: 8px;
  --r-m: 12px;
  --r-l: 16px;
  --r-xl: 20px;

  /* Тени */
  --shadow-a: 0 0 4px rgba(0,0,0,.04), 0 6px 12px rgba(0,0,0,.08);
  --shadow-e: 0 0 20px rgba(0,0,0,.05), 0 6px 12px rgba(0,0,0,.1);

  --font: "Inter", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --transition: .2s ease;
}

* { box-sizing: border-box; }

html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 14px;
  color: var(--text);
  background: var(--bg);
  line-height: 1.5;
}

/* ---------- Шапка ---------- */
header {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 24px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}
.brand { display: flex; align-items: center; gap: 11px; }
.brand .mark {
  width: 32px; height: 32px;
  border-radius: var(--r-s);
  background: linear-gradient(135deg, var(--primary-300), var(--primary-400));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 17px;
  box-shadow: 0 4px 10px rgba(0,110,221,.35);
}
.brand .logo { height: 28px; width: auto; display: block; border-radius: 6px; }
header nav #btn-logout { margin-left: 8px; }

/* ---------- Страница входа ---------- */
.login-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.login-card { width: 360px; max-width: 92vw; padding: 28px; }
.login-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 20px; }
.login-brand .logo { height: 32px; width: auto; border-radius: 6px; }
.login-brand h1 { font-size: 16px; margin: 0; font-weight: 700; }
.login-brand h1 .sub { color: var(--accent); }
#login-form .field-row { margin-bottom: 12px; }
#login-form input { width: 100%; min-width: 0; }
#login-form button { width: 100%; }
#login-msg { margin-top: 12px; }
header h1 { font-size: 16px; margin: 0; font-weight: 700; letter-spacing: -.01em; }
header h1 .sub { color: var(--accent); }
header nav { display: flex; gap: 6px; margin-left: auto; }
header nav a {
  text-decoration: none;
  color: var(--grey-0);
  padding: 8px 16px;
  border-radius: var(--r-m);
  font-weight: 600;
  font-size: 13.5px;
  transition: var(--transition);
}
header nav a:hover { background: var(--grey-7); color: var(--text); }
header nav a.active { background: var(--primary-50); color: var(--accent); }

main { max-width: 1080px; margin: 24px auto; padding: 0 24px; }

/* ---------- Панели ---------- */
.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-l);
  padding: 22px;
  margin-bottom: 18px;
  box-shadow: var(--shadow-a);
}

/* ---------- Кнопки ---------- */
button {
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--grey-5);
  background: #fff;
  color: var(--text);
  padding: 11px 20px;
  border-radius: var(--r-m);
  transition: var(--transition);
}
button:hover { background: var(--grey-7); border-color: var(--grey-4); }
button.primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  box-shadow: 0 6px 14px rgba(0,110,221,.25);
}
button.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
button:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
button.small { padding: 7px 14px; font-size: 13px; border-radius: var(--r-s); }

/* ---------- Drop zone ---------- */
#drop {
  border: 2px dashed var(--grey-4);
  border-radius: var(--r-l);
  padding: 40px 28px;
  text-align: center;
  color: var(--muted);
  background: var(--grey-7);
  transition: var(--transition);
  cursor: pointer;
}
#drop:hover { border-color: var(--primary-200); background: var(--primary-50); }
#drop.over { border-color: var(--accent); background: var(--primary-50); color: var(--accent); }
#drop strong { color: var(--text); font-weight: 700; }
#drop p { margin: 6px 0; }
.toolbar { display: flex; gap: 10px; align-items: center; margin-top: 16px; flex-wrap: wrap; }
.toolbar .spacer { flex: 1; }

/* ---------- Список файлов ---------- */
.row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-m);
  margin-bottom: 10px;
  background: #fff;
  box-shadow: var(--shadow-a);
}
.row .name { font-weight: 600; flex: 1; min-width: 0; word-break: break-word; }
.row .status { font-size: 13px; white-space: nowrap; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; }
.row .status.pending { color: var(--grey-0); background: var(--grey-6); }
.row .status.running { color: var(--accent); background: var(--primary-50); }
.row .status.done { color: var(--success); background: var(--success-bg); }
.row .status.error { color: var(--error); background: var(--error-bg); }
.row .actions { display: flex; gap: 6px; flex-wrap: wrap; }
.spinner {
  display: inline-block; width: 12px; height: 12px; border: 2px solid var(--primary-200);
  border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

details.report-toggle summary, details.raw summary { cursor: pointer; color: var(--accent); padding: 10px 0 4px; font-size: 13px; font-weight: 600; }
.raw pre {
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--grey-7);
  border: 1px solid var(--border);
  border-radius: var(--r-s);
  padding: 12px 14px;
  font-size: 12.5px;
  max-height: 360px;
  overflow: auto;
  margin: 6px 0 0;
  font-family: "SF Mono", Menlo, Consolas, monospace;
}
.full-row { flex-direction: column; align-items: stretch; }
.full-row .head { display: flex; align-items: center; gap: 12px; }

/* Клиентский роутер: скрытая секция */
.hidden { display: none !important; }

/* Полоса над списком результатов */
.results-bar { display: flex; align-items: center; gap: 12px; margin: 20px 0 8px; }
.results-title { font-weight: 700; font-size: 14px; color: var(--text); }
.results-bar #btn-clear-results { margin-left: auto; }

/* Статус «идёт разметка»: длинный текст ротатора может переноситься */
.row .status.running { white-space: normal; max-width: 70%; }
.rotor { font-weight: 500; }

/* Строка метаданных (токены/стоимость) под именем файла */
.meta { font-size: 12.5px; color: var(--grey-0); margin-top: 6px; display: flex; gap: 6px; flex-wrap: wrap; align-items: baseline; }
.meta .cache { color: var(--grey-2); font-size: 12px; }
.meta.na { color: var(--grey-2); font-style: italic; }

/* Оформленный отчёт (секции-карточки) */
.report{font-size:14px;line-height:1.6;color:#222}
.report .rsection{border:1px solid #e5e7eb;border-radius:10px;padding:14px 16px;margin:10px 0;background:#fff}
.report .rsection h3{margin:0 0 8px;font-size:15px;display:flex;align-items:center;gap:8px}
.report .rsection.warn{background:#FFF7E6;border-color:#F0C36D}
.report .rsection.warn h3{color:#9a6700}
.report ul{margin:6px 0;padding-left:18px}
.report li{margin:3px 0}
.report code{background:#f3f4f6;padding:1px 5px;border-radius:4px;font-size:12px}
.report strong{color:#111}
.report .rsection.warn ul{list-style:none;padding-left:0}
.report .rsection.warn li{padding:6px 10px;border-left:3px solid #F0C36D;background:#fffdf7;border-radius:4px;margin:6px 0}
.report table{border-collapse:collapse;margin:8px 0;font-size:13px}
.report th,.report td{border:1px solid #e5e7eb;padding:5px 9px;text-align:left}
.report h3:first-child{margin-top:0}
.report p{margin:6px 0}

.hint { color: var(--muted); font-size: 13px; }
.notice { padding: 10px 14px; border-radius: var(--r-s); font-size: 13px; margin-bottom: 12px; font-weight: 500; }
.notice.ok { background: var(--success-bg); color: var(--success); }
.notice.err { background: var(--error-bg); color: var(--error); }
.notice.warn { background: var(--attention-bg); color: var(--attention); }

/* ---------- Настройки: вкладки ---------- */
.tabs { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.tabs button { border-radius: var(--r-m); }
.tabs button.active { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: 0 6px 14px rgba(0,110,221,.25); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }
textarea.editor {
  width: 100%;
  min-height: 460px;
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.55;
  border: 1px solid var(--grey-5);
  border-radius: var(--r-l);
  padding: 16px;
  resize: vertical;
  tab-size: 2;
  background: #fff;
  transition: var(--transition);
}
textarea.editor:focus, input[type=text]:focus, input[type=password]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0,110,221,.12);
}
input[type=text], input[type=password] {
  font: inherit;
  padding: 13px 16px;
  border: 1px solid var(--grey-5);
  border-radius: var(--r-l);
  min-width: 340px;
  background: #fff;
  transition: var(--transition);
}
.field-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.save-bar { display: flex; gap: 12px; align-items: center; margin-top: 14px; }
code.k { background: var(--primary-50); color: var(--primary-500); padding: 2px 7px; border-radius: var(--r-xxs); font-size: 12.5px; font-family: "SF Mono", Menlo, Consolas, monospace; }

/* ---------- Паспорт OCR ---------- */
#passport-drop {
  border: 2px dashed var(--grey-4);
  border-radius: var(--r-l);
  padding: 40px 28px;
  text-align: center;
  color: var(--muted);
  background: var(--grey-7);
  cursor: pointer;
  transition: var(--transition);
}
#passport-drop:hover { border-color: var(--primary-200); background: var(--primary-50); }
#passport-drop.over { border-color: var(--accent); background: var(--primary-50); color: var(--accent); }
#passport-drop strong { color: var(--text); font-weight: 700; }
#passport-drop p { margin: 6px 0; }
#passport-preview-img { max-height: 280px; max-width: 100%; border-radius: var(--r-s); border: 1px solid var(--border); display: block; }
.ocr-doctype { font-size: 15px; font-weight: 700; color: var(--accent); margin-bottom: 14px; }
.ocr-fields-table { width: 100%; border-collapse: collapse; margin-bottom: 16px; }
.ocr-fields-table tr { border-bottom: 1px solid var(--border); }
.ocr-fields-table tr:last-child { border-bottom: none; }
.ocr-field-name { padding: 8px 12px 8px 0; font-size: 13px; color: var(--muted); width: 200px; vertical-align: top; }
.ocr-field-value { padding: 8px 0; font-size: 14px; font-weight: 600; }
.ocr-quality { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 14px; border-top: 1px solid var(--border); }
.ocr-quality-item { display: flex; align-items: center; gap: 6px; border: 1px solid var(--border); border-radius: var(--r-xs); padding: 5px 12px; }
.ocr-quality-item.ok  { border-color: #B8E0B8; background: #F4FBF4; }
.ocr-quality-item.bad { border-color: #F0B8B8; background: #FFF1F1; }
.ocr-quality-item.warn{ border-color: #F0D2A0; background: #FFF8EE; }
.ocr-quality-label { font-size: 12px; color: var(--muted); }
.ocr-quality-val { font-size: 12.5px; font-weight: 700; }

/* ========== HTML → DOCX ========== */
.h2d-title { font-weight: 700; font-size: 15px; margin-bottom: 2px; }
.h2d-header { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
#h2d-drop {
  border: 2px dashed var(--grey-4); border-radius: var(--r-l);
  padding: 28px; text-align: center; color: var(--muted);
  background: var(--grey-7); cursor: pointer; transition: var(--transition);
}
#h2d-drop:hover { border-color: var(--primary-200); background: var(--primary-50); }
#h2d-drop.over { border-color: var(--accent); background: var(--primary-50); color: var(--accent); }
#h2d-drop strong { color: var(--text); }
#h2d-drop p { margin: 5px 0; }
#h2d-filename { font: inherit; font-size: 13px; padding: 10px 14px; border: 1px solid var(--grey-5); border-radius: var(--r-m); background: #fff; transition: var(--transition); }
#h2d-filename:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0,110,221,.12); }

.h2d-engine-toggle {
  display: flex;
  align-items: center;
  background: var(--grey-7);
  border: 1px solid var(--grey-5);
  border-radius: var(--r-m);
  padding: 3px;
  gap: 2px;
}
.h2d-engine-opt {
  display: flex;
  align-items: center;
  cursor: pointer;
}
.h2d-engine-opt input[type=radio] { display: none; }
.h2d-engine-opt span {
  display: block;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  border-radius: calc(var(--r-m) - 2px);
  transition: var(--transition);
  white-space: nowrap;
}
.h2d-engine-opt input[type=radio]:checked + span {
  background: #fff;
  color: var(--accent);
  box-shadow: 0 1px 3px rgba(0,0,0,.1);
}

/* ========== Демо-кабинет DataDoc ========== */
#view-demo { padding-bottom: 40px; }

.cab {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-l);
  overflow: hidden;
  box-shadow: var(--shadow-a);
}

/* Шапка */
/* ── Строка 1: шапка приложения ── */
.cab-appbar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  background: #fff; border-bottom: 1px solid var(--border);
}
.cab-appbar-title { font-size: 14px; font-weight: 700; flex: 1; }
.cab-appbar-nav { display: flex; align-items: center; gap: 6px; }
.cab-nav-btn {
  font: inherit; font-size: 12px; font-weight: 500;
  padding: 5px 11px; border-radius: var(--r-s);
  border: 1px solid var(--grey-5); background: #fff;
  color: var(--text); cursor: pointer; white-space: nowrap;
  transition: var(--transition);
}
.cab-nav-btn:hover { background: var(--grey-7); }
.cab-icon-btn {
  width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--grey-5); background: #fff;
  font: inherit; font-size: 12px; font-weight: 700; color: var(--muted);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: var(--transition);
}
.cab-icon-btn:hover { background: var(--grey-7); }

/* ── Строка 2: документ + действия ── */
.cab-docbar {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 16px;
  background: #fff; border-bottom: 1px solid var(--border);
}
.cab-docbar-left { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.cab-doc-icon {
  width: 34px; height: 38px; flex-shrink: 0;
  background: var(--primary-50); border-radius: var(--r-s);
  display: flex; align-items: center; justify-content: center;
}
.cab-doc-name {
  font-size: 13.5px; font-weight: 700; color: var(--text);
  display: flex; align-items: center; gap: 5px; white-space: nowrap;
}
.cab-edit-btn {
  border: none; background: none; cursor: pointer; padding: 2px;
  color: var(--muted); display: flex; align-items: center;
  transition: var(--transition);
}
.cab-edit-btn:hover { color: var(--accent); }
.cab-doc-link {
  font-size: 12px; color: var(--accent); text-decoration: none; display: block; margin-top: 2px;
}
.cab-doc-link:hover { text-decoration: underline; }
.cab-docbar-actions { display: flex; gap: 6px; flex-shrink: 0; }
.cab-action-btn {
  font: inherit; font-size: 12px; font-weight: 500;
  padding: 6px 11px; border-radius: var(--r-s);
  border: 1px solid var(--grey-5); background: #fff;
  color: var(--text); cursor: pointer; white-space: nowrap;
  display: flex; align-items: center; gap: 5px;
  transition: var(--transition);
}
.cab-action-btn:hover { background: var(--grey-7); }

/* ── Строка 3: вкладки + скачать ── */
.cab-tabbar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 16px;
  background: #fff; border-bottom: 1px solid var(--border);
}
.cab-partabs { display: flex; gap: 6px; }
.cab-partab {
  font: inherit; font-size: 12.5px; font-weight: 600;
  padding: 4px 12px; border-radius: 999px;
  border: 1.5px solid var(--grey-5);
  background: #fff; color: var(--muted);
  cursor: pointer; white-space: nowrap;
  display: flex; align-items: center; gap: 6px;
  transition: var(--transition);
}
.cab-partab--active { background: var(--accent); border-color: var(--accent); color: #fff; }
.cab-partab-badge { font-size: 11px; font-weight: 700; }
.cab-tabbar-sep { flex: 1; }
.cab-fill-count { font-size: 12px; color: var(--muted); white-space: nowrap; }
.cab-dl-btn {
  font: inherit; font-size: 12px; font-weight: 600;
  padding: 5px 11px; border-radius: var(--r-s);
  border: 1px solid var(--primary-200);
  background: var(--primary-50); color: var(--accent);
  cursor: pointer; white-space: nowrap;
  display: flex; align-items: center; gap: 5px;
  transition: var(--transition);
}
.cab-dl-btn:hover { background: var(--primary-100); }
.cab-dl-btn:disabled { opacity: 0.45; cursor: default; pointer-events: none; }

/* ── Строка 4: панель действий ── */
.cab-actionbar {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 16px;
  background: var(--grey-7); border-bottom: 1px solid var(--border);
}
.cab-actionbar-btn {
  font: inherit; font-size: 12.5px; font-weight: 500;
  padding: 6px 12px; border-radius: var(--r-s);
  border: 1px solid var(--grey-5); background: #fff;
  color: var(--text); cursor: pointer; white-space: nowrap;
  display: flex; align-items: center; gap: 6px;
  transition: var(--transition);
}
.cab-actionbar-btn:hover { background: var(--grey-6); }
.cab-actionbar-btn--scan { color: var(--accent); border-color: var(--primary-200); background: var(--primary-50); }
.cab-actionbar-btn--scan:hover { background: var(--primary-100); }
.cab-actionbar-sep { flex: 1; }

/* ── Форма ── */
.cab-form {
  padding: 16px;
  background: var(--grey-7);
  display: flex; flex-direction: column; gap: 12px;
}

/* ── Карточки ── */
.cab-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-l);
  padding: 18px 20px;
}
.cab-drop { border-style: dashed; border-color: var(--grey-4); }
.cab-drop.over { border-color: var(--accent); background: var(--primary-50); }
.cab-card-hdr {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.cab-card-title { font-weight: 700; font-size: 13.5px; }
.cab-card-counter { font-size: 12px; color: var(--muted); }

/* ── Баннер загрузки ── */
.cab-drop-hint {
  display: flex; gap: 10px; align-items: center;
  background: #F0FAF4; border-radius: var(--r-s);
  padding: 11px 13px; margin-bottom: 16px;
  font-size: 13px; color: var(--grey-0); line-height: 1.5;
}
.cab-upload-btn {
  font: inherit; font-size: 12.5px; font-weight: 500;
  padding: 6px 13px; border-radius: var(--r-s);
  border: 1px solid var(--grey-5); background: #fff;
  color: var(--text); cursor: pointer; white-space: nowrap;
  display: flex; align-items: center; gap: 6px; flex-shrink: 0;
  transition: var(--transition);
}
.cab-upload-btn:hover { background: var(--grey-7); }

/* ── Поля ── */
.cab-fields { display: flex; flex-wrap: wrap; gap: 10px; }
.cab-field { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 130px; }
.cab-field--full { flex-basis: 100%; flex-shrink: 0; }
.cab-field--wide { flex: 2; min-width: 180px; }
.cab-field--sm { flex: 0 0 110px; min-width: 0; }
.cab-label {
  font-size: 11.5px; color: var(--muted); font-weight: 500;
  display: flex; align-items: center; gap: 4px;
}
.cab-help {
  width: 14px; height: 14px; border-radius: 50%;
  border: 1.5px solid var(--grey-4); color: var(--grey-3);
  font-size: 9px; font-weight: 700; font-style: normal;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: help; flex-shrink: 0; line-height: 1;
}
.cab-input {
  font: inherit; font-size: 13px;
  padding: 8px 11px;
  border: 1.5px solid transparent; border-radius: var(--r-s);
  background: #EEF5FF; color: var(--text);
  transition: var(--transition); min-width: 0;
}
.cab-input:focus {
  outline: none;
  background: #fff;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0,110,221,.12);
}
.cab-input.filled {
  background: #daeaff;
  border-color: var(--primary-200);
}
.cab-card:not(.cab-drop) .cab-input {
  background: var(--grey-7);
  border-color: var(--grey-5);
}
.cab-card:not(.cab-drop) .cab-input:focus {
  background: #fff;
  border-color: var(--accent);
}

/* ── 5-колоночный grid ── */
.cpg {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}
.cpg-c2 { grid-column: span 2; }
.cpg-c3 { grid-column: span 3; }
.cpg .cab-field { min-width: 0; flex: unset; }

/* Сбрасываем глобальный min-width на input внутри кабинета и морфера */
.cab-card input[type=text],
.morpher-input-pane input[type=text],
.morpher-input-pane input[type=number],
.morpher-input-pane input[type=date],
.morpher-input-pane textarea {
  min-width: 0;
  width: 100%;
  border-radius: var(--r-s);
  padding: 8px 11px;
  box-sizing: border-box;
}

/* ── Статус OCR ── */
.cab-ocr-status {
  margin-top: 14px; padding: 9px 14px;
  border-radius: var(--r-s); font-size: 13px; font-weight: 500;
}

/* ── Морфер ── */
#view-morpher { padding: 0; margin: 0 -24px; }

.morpher-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  height: calc(100vh - 57px); /* под шапкой */
}

/* Левая панель — результат */
.morpher-results {
  overflow-y: auto;
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  border-right: 1px solid var(--border);
}

.morpher-empty {
  margin: auto;
  text-align: center;
  color: var(--grey-3);
  padding: 60px 0;
  user-select: none;
}
.morpher-empty-icon {
  font-size: 28px;
  font-weight: 800;
  color: var(--grey-4);
  margin-bottom: 10px;
  letter-spacing: -.02em;
}
.morpher-empty p { font-size: 13px; color: var(--grey-2); line-height: 1.7; }

.morpher-block { display: flex; flex-direction: column; gap: 7px; }

.morpher-block-title {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--grey-1);
  display: flex;
  align-items: center;
  gap: 8px;
}

.morpher-tag {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: var(--r-xxs);
  background: var(--primary-50);
  color: var(--accent);
  text-transform: none;
  letter-spacing: 0;
}

.morpher-table {
  border: 1px solid var(--border);
  border-radius: var(--r-m);
  overflow: hidden;
  background: var(--panel);
  box-shadow: var(--shadow-a);
}

.morpher-row {
  display: grid;
  grid-template-columns: 152px 1fr;
  border-bottom: 1px solid var(--border);
}
.morpher-row:last-child { border-bottom: none; }
.morpher-row:hover { background: var(--primary-50); }

.morpher-row-label {
  padding: 8px 12px;
  font-size: 12px;
  color: var(--grey-1);
  font-weight: 500;
  background: var(--grey-7);
  border-right: 1px solid var(--border);
  display: flex;
  align-items: center;
}

.morpher-row-value {
  padding: 8px 13px;
  font-size: 13.5px;
  font-family: 'SF Mono', ui-monospace, Menlo, Consolas, monospace;
  font-weight: 500;
  display: flex;
  align-items: center;
  word-break: break-word;
}

.morpher-row--nom .morpher-row-value {
  color: var(--accent);
  font-weight: 600;
}

/* Правая панель — ввод */
.morpher-input-pane {
  background: var(--panel);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.morpher-mode-bar {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.morpher-select {
  width: 100%;
  padding: 8px 32px 8px 10px;
  border: 1px solid var(--grey-5);
  border-radius: var(--r-s);
  font: inherit;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text);
  background: var(--grey-7);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%236e7072' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  cursor: pointer;
  outline: none;
  transition: border-color var(--transition);
}
.morpher-select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--primary-50); }

.morpher-form-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.morpher-field { display: flex; flex-direction: column; gap: 5px; }

.morpher-field-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--grey-1);
}

.morpher-field input[type=text],
.morpher-field input[type=number],
.morpher-field input[type=date],
.morpher-field textarea {
  width: 100%;
  padding: 8px 11px;
  border: 1px solid var(--grey-5);
  border-radius: var(--r-s);
  font: inherit;
  font-size: 14px;
  color: var(--text);
  background: var(--panel);
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
  resize: vertical;
}
.morpher-field input::placeholder,
.morpher-field textarea::placeholder { color: var(--grey-3); }
.morpher-field input:focus,
.morpher-field textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--primary-50);
}

.morpher-divider { height: 1px; background: var(--border); }

.morpher-flags { display: flex; flex-direction: column; gap: 9px; }

.morpher-flag {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  cursor: pointer;
  color: var(--text);
}
.morpher-flag input[type=checkbox] {
  width: 15px; height: 15px;
  accent-color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
}

.morpher-status {
  padding: 10px 16px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--grey-2);
  min-height: 38px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.morpher-status--loading { color: var(--accent); }
.morpher-status--error   { color: var(--error); }

/* ===================== Росреестр ===================== */

.rr-panel { display: flex; flex-direction: column; gap: 12px; }

.rr-apikey-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.rr-apikey-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--grey-0);
  white-space: nowrap;
  min-width: 160px;
}
.rr-apikey-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
}
.rr-apikey-input {
  flex: 1;
  min-width: 0;
  height: 34px;
  padding: 0 10px;
  font-size: 13px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-s);
  background: var(--grey-7);
  color: var(--text);
  font-family: monospace;
}
.rr-apikey-input:focus { outline: none; border-color: var(--accent); background: #fff; }
.rr-toggle-btn { height: 34px; white-space: nowrap; }

.rr-search-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.rr-address-input {
  flex: 1;
  min-width: 0;
  height: 38px;
  padding: 0 12px;
  font-size: 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-s);
  background: #EEF5FF;
  color: var(--text);
}
.rr-address-input:focus { outline: none; border-color: var(--accent); background: #fff; }
.rr-search-btn { height: 38px; padding: 0 20px; white-space: nowrap; }

.rr-status {
  margin: 8px 0 4px;
  font-size: 12px;
  color: var(--grey-1);
  min-height: 18px;
}

.rr-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-m);
  overflow: hidden;
  margin-bottom: 12px;
}
.rr-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 600;
  background: var(--grey-7);
  border-bottom: 1px solid var(--border);
}
.rr-table { padding: 0 16px; }
.rr-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid var(--grey-6);
  font-size: 13px;
}
.rr-row:last-child { border-bottom: none; }
.rr-row-label {
  color: var(--grey-1);
  white-space: nowrap;
  min-width: 200px;
}
.rr-row-value { color: var(--text); font-weight: 500; word-break: break-word; }

.rr-section-title {
  padding: 8px 16px 4px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--grey-1);
  border-top: 1px solid var(--grey-6);
  margin-top: 4px;
}
.rr-list { padding: 4px 16px 10px; display: flex; flex-direction: column; gap: 4px; }
.rr-list-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text);
  flex-wrap: wrap;
}
.rr-list-empty { font-size: 13px; color: var(--grey-2); font-style: italic; }
.rr-num { font-family: monospace; font-size: 12px; color: var(--grey-1); }
.rr-num-type { color: var(--grey-1); }

.rr-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.rr-badge--ok   { background: var(--success-bg); color: var(--success); }
.rr-badge--warn { background: var(--attention-bg); color: var(--attention); }
.rr-badge--off  { background: var(--grey-6); color: var(--grey-1); }

.rr-empty {
  padding: 32px;
  text-align: center;
  color: var(--grey-1);
  font-size: 14px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-m);
}

.rr-hist-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 24px 0 8px;
}
.rr-hist-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--grey-0);
}
.rr-hist-list {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-m);
  overflow: hidden;
}
.rr-hist-row {
  padding: 10px 14px;
  border-bottom: 1px solid var(--grey-6);
  cursor: pointer;
  transition: background .12s;
}
.rr-hist-row:last-child { border-bottom: none; }
.rr-hist-row:hover { background: var(--grey-7); }
.rr-hist-addr {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rr-hist-meta {
  font-size: 12px;
  color: var(--grey-2);
  margin-top: 2px;
}

/* Строка поиска внутри карточки демо (Росреестр) */
.drr-search-hint { gap: 8px; }
.drr-query-input {
  flex: 1;
  min-width: 0;
  height: 32px;
  font-size: 13px;
  background: #fff !important;
  border-color: var(--border) !important;
}
.drr-query-input:focus { border-color: var(--accent) !important; }

/* Лог внешнего API */
.log-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.btn-link {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-s);
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  background: #fff;
  cursor: pointer;
  transition: background .12s;
}
.btn-link:hover { background: var(--grey-7); }
.log-scroll { overflow-x: auto; }
.log-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  min-width: 700px;
}
.log-table th {
  text-align: left;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--grey-1);
  border-bottom: 2px solid var(--border);
  white-space: nowrap;
}
.log-table td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--grey-6);
  color: var(--text);
  vertical-align: middle;
  white-space: nowrap;
}
.log-table tbody tr:hover td { background: var(--grey-7); }
.log-table td a { color: var(--accent); text-decoration: none; }
.log-table td a:hover { text-decoration: underline; }
.log-file-cell { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.log-table .mono { font-family: monospace; font-size: 11px; color: var(--grey-0); }
.log-badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
}
.log-badge--api { background: #e0edff; color: #0054b0; }
.log-badge--web { background: #d2f4ea; color: #0d7a56; }
.log-nofile { color: var(--grey-2); }