/* ============================================================
   style.css — «Замеры и перерасход»
   Mobile-first. Брейкпоинт ≤768px — мобайл, >768px — десктоп.
   ============================================================ */

/* --- CSS-переменные: цвета, отступы, шрифты, размеры --- */
:root {
  /* Цвета */
  --bg:            #f4f5f7;
  --surface:       #ffffff;
  --border:        #e2e5ea;
  --text:          #1c1f25;
  --text-muted:    #6b7280;
  --primary:       #2563eb;
  --primary-dark:  #1d4ed8;
  --danger:        #dc3545;   /* цвет перерасхода */
  --success:       #16a34a;
  --warning:       #f97316;

  /* Отступы */
  --gap-xs: 4px;
  --gap-sm: 8px;
  --gap-md: 16px;
  --gap-lg: 24px;

  /* Типографика */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-sm: 13px;
  --fs-base: 15px;
  --fs-lg: 18px;
  --fs-title: 22px;

  /* Скругления и размеры */
  --radius: 10px;
  --header-h: 56px;
  --bottom-nav-h: 60px;
}

/* --- Сброс и базовые стили --- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
}

body {
  font-family: var(--font);
  font-size: var(--fs-base);
  color: var(--text);
  background: var(--bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ============================================================
   ШАПКА
   ============================================================ */
.app-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 0 var(--gap-md);
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  gap: var(--gap-lg);
}

.app-title {
  font-size: var(--fs-lg);
  font-weight: 600;
  white-space: nowrap;
}

/* --- Вкладки (десктоп): по умолчанию скрыты (mobile-first) --- */
.tabs {
  display: none;
  gap: var(--gap-xs);
}

.tab {
  border: none;
  background: transparent;
  font: inherit;
  font-size: var(--fs-base);
  color: var(--text-muted);
  padding: var(--gap-sm) var(--gap-md);
  border-radius: var(--radius);
  cursor: pointer;
  border-bottom: 2px solid transparent;
}

.tab:hover {
  color: var(--text);
  background: var(--bg);
}

.tab.is-active {
  color: var(--primary);
  border-bottom-color: var(--primary);
  font-weight: 600;
}

/* ============================================================
   ОСНОВНОЙ КОНТЕНТ + ЭКРАНЫ
   ============================================================ */
.app-main {
  /* Отступ снизу под нижнюю панель (мобайл) */
  padding-bottom: calc(var(--bottom-nav-h) + var(--gap-md));
}

.screen {
  display: none;
}

.screen.is-active {
  display: block;
}

.screen-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: var(--gap-lg) var(--gap-md);
}

.screen-title {
  font-size: var(--fs-title);
  font-weight: 700;
  margin-bottom: var(--gap-md);
}

.placeholder {
  color: var(--text-muted);
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: var(--gap-lg);
}

/* ============================================================
   НИЖНЯЯ ПАНЕЛЬ (мобайл): видна по умолчанию (mobile-first)
   ============================================================ */
.bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  height: var(--bottom-nav-h);
  background: var(--surface);
  border-top: 1px solid var(--border);
  display: flex;
}

.nav-btn {
  flex: 1;
  border: none;
  background: transparent;
  font: inherit;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: var(--gap-xs);
}

.nav-icon {
  font-size: 20px;
  line-height: 1;
}

.nav-label {
  font-size: var(--fs-sm);
}

.nav-btn.is-active {
  color: var(--primary);
  font-weight: 600;
}

/* ============================================================
   ДЕСКТОП (>768px): вкладки сверху, нижняя панель скрыта
   ============================================================ */
@media (min-width: 769px) {
  .tabs {
    display: flex;
  }

  .bottom-nav {
    display: none;
  }

  .app-main {
    padding-bottom: var(--gap-lg);
  }
}

/* ============================================================
   Ф3 — ФОРМЫ И CRUD (экраны 1–2)
   ============================================================ */

/* --- Общие контролы --- */
.field { display: flex; flex-direction: column; gap: var(--gap-xs); margin-bottom: var(--gap-sm); }
.field-label { font-size: var(--fs-sm); color: var(--text-muted); }

.txt, .sel {
  font: inherit;
  font-size: var(--fs-base);
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--gap-sm) var(--gap-md);
  width: 100%;
}
.txt:focus, .sel:focus { outline: none; border-color: var(--primary); }
.txt-sm, .sel-sm { padding: 6px var(--gap-sm); font-size: var(--fs-sm); }

/* Read-only авторасчётные поля ст.2 — визуально отличаются. */
.txt.auto, .txt[readonly] {
  background: var(--bg);
  color: var(--text-muted);
  border-style: dashed;
}
.unit-note { font-size: var(--fs-sm); color: var(--text-muted); }

/* --- Кнопки --- */
.btn {
  font: inherit;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: var(--radius);
  padding: var(--gap-sm) var(--gap-md);
  cursor: pointer;
}
.btn:hover { background: var(--bg); }
.btn-sm { font-size: var(--fs-sm); padding: 6px var(--gap-sm); }
.btn-primary { background: var(--primary); color: #fff; border-color: var(--primary); }
.btn-primary:hover { background: var(--primary-dark); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--primary); }
.btn-add-floor { margin-top: var(--gap-md); width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn-icon {
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: var(--fs-lg);
  line-height: 1;
  padding: 4px 8px;
  border-radius: var(--radius);
}
.btn-icon.btn-danger:hover { color: var(--danger); background: rgba(220,53,69,.08); }

.hint { color: var(--text-muted); padding: var(--gap-md) 0; }
.hint-sm { font-size: var(--fs-sm); padding: var(--gap-sm) 0; }

/* --- Экран 1: этажи и помещения --- */
.project-name .txt { font-size: var(--fs-lg); font-weight: 600; }

.floor-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--gap-md);
  margin-bottom: var(--gap-md);
}
.floor-head { display: flex; align-items: center; gap: var(--gap-sm); }
.floor-name { font-weight: 600; }

.room-list { list-style: none; margin: var(--gap-sm) 0; }
.room-row {
  display: flex; align-items: center; gap: var(--gap-sm);
  border-top: 1px solid var(--border);
}
.room-row.is-selected { background: rgba(37,99,235,.06); }
.room-open {
  flex: 1;
  display: flex; align-items: center; justify-content: space-between; gap: var(--gap-sm);
  background: transparent; border: none; font: inherit; text-align: left;
  padding: var(--gap-sm) var(--gap-xs); cursor: pointer; color: var(--text);
}
.room-open:hover { color: var(--primary); }
.room-open-name { font-weight: 500; }
.room-badges { display: flex; gap: var(--gap-sm); }
.badge { font-size: var(--fs-sm); color: var(--text-muted); white-space: nowrap; }

/* --- Экран 2: форма замера --- */
.measure-top {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-sm);
  margin-bottom: var(--gap-md);
}
.room-title { flex: 1 1 200px; font-size: var(--fs-lg); font-weight: 600; }

.stage-switch { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.stage-btn {
  font: inherit; border: none; background: var(--surface); color: var(--text-muted);
  padding: var(--gap-sm) var(--gap-md); cursor: pointer;
}
.stage-btn.is-active { background: var(--primary); color: #fff; font-weight: 600; }

.block {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: var(--gap-md);
  margin-bottom: var(--gap-md);
}
.block > legend { font-weight: 600; padding: 0 var(--gap-xs); color: var(--text); }
.block-muted { opacity: .7; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-md); }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--gap-md); }
@media (max-width: 560px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
}

.radio-row { display: flex; flex-wrap: wrap; gap: var(--gap-md); }
.radio { display: inline-flex; align-items: center; gap: var(--gap-xs); font-size: var(--fs-base); cursor: pointer; }

/* Стены (details) */
.wall { border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: var(--gap-sm); }
.wall > summary { padding: var(--gap-sm) var(--gap-md); cursor: pointer; font-weight: 500; }
.wall-body { padding: 0 var(--gap-md) var(--gap-md); }
.openings-head { font-size: var(--fs-sm); color: var(--text-muted); margin: var(--gap-sm) 0 var(--gap-xs); }
.opening-row, .line-item {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-sm);
  margin-bottom: var(--gap-sm);
}
.opening-row .txt-sm, .opening-row .sel-sm,
.line-item .txt-sm, .line-item .sel-sm { flex: 1 1 90px; width: auto; }

/* ============================================================
   Ф4 — ЭКРАН 3 «Сравнение»
   ============================================================ */

/* --- Оффлайн/онлайн-баннер (sticky сверху экрана) --- */
.cmp-banner {
  position: sticky;
  top: var(--header-h);
  z-index: 5;
  font-size: var(--fs-sm);
  font-weight: 600;
  padding: var(--gap-xs) var(--gap-md);
  border-radius: var(--radius);
  margin-bottom: var(--gap-md);
}
.cmp-banner.is-online  { color: #fff; background: var(--success); }
.cmp-banner.is-offline { color: #fff; background: var(--warning); }

.cmp-project-name {
  font-size: var(--fs-lg);
  font-weight: 700;
  margin-bottom: var(--gap-md);
}

/* --- Общая таблица сравнения --- */
.cmp-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  font-size: var(--fs-base);
}
.cmp-table th, .cmp-table td {
  padding: var(--gap-sm) var(--gap-md);
  text-align: left;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.cmp-table th {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  font-weight: 600;
  background: var(--bg);
}
.cmp-table td.num, .cmp-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.cmp-table tbody tr:last-child td { border-bottom: none; }

/* Перерасход: красный текст на дельта-ячейках + мягкий фон строки. */
.cmp-overrun { color: var(--danger); font-weight: 600; }
.row-overrun { background: rgba(220, 53, 69, .06); }

/* Зоны отклонения по порогу (пункт «порог %»):
   alert  — значимый перерасход  → красный;
   under  — значимый недорасход  → жёлтый «проверить». */
.cmp-alert { color: var(--danger); font-weight: 600; }
.row-alert { background: rgba(220, 53, 69, .06); }
.cmp-under { color: #9a3412; font-weight: 600; }
.row-under { background: rgba(249, 115, 22, .10); }

/* Итоговая строка. */
.cmp-total td { font-weight: 700; border-top: 2px solid var(--border); background: var(--bg); }

/* Таблица «помещения × поверхности» (пункт 14). */
.cmp-rooms { margin-top: var(--gap-lg); }
.cmp-section-title { font-weight: 600; margin-bottom: var(--gap-sm); }
.cmp-rooms-scroll { overflow-x: auto; }
.cmp-rooms-table { min-width: 520px; }
.cmp-floor-tag { font-size: var(--fs-sm); color: var(--text-muted); font-weight: 400; }

/* --- Таблица разбивки (вложенная) --- */
.cmp-table-sub { font-size: var(--fs-sm); margin: var(--gap-sm) 0; }
.cmp-table-sub th, .cmp-table-sub td { padding: 6px var(--gap-sm); }

/* --- Аккордеон-разбивка --- */
.cmp-breakdown { margin-top: var(--gap-lg); }
.acc { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); margin-bottom: var(--gap-sm); }
.acc > summary {
  padding: var(--gap-sm) var(--gap-md);
  cursor: pointer;
  font-weight: 600;
  list-style-position: inside;
}
.acc > summary:hover { color: var(--primary); }
.acc-floor, .acc-room, .acc-surface-wrap { margin: var(--gap-sm) var(--gap-md); }
.acc-floor > summary { font-weight: 600; }
.acc-room > summary { font-weight: 500; }
.acc-surface-wrap > summary { font-weight: 400; font-size: var(--fs-sm); color: var(--text-muted); }
.acc-resp { font-size: var(--fs-sm); color: var(--text-muted); font-weight: 400; }
.acc .cmp-table-sub { margin-left: var(--gap-md); margin-right: var(--gap-md); width: auto; }

/* --- Вкладки (мобайл) --- */
.cmp-tabs { display: flex; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-bottom: var(--gap-md); }
.cmp-tab {
  flex: 1; font: inherit; font-size: var(--fs-sm);
  border: none; background: var(--surface); color: var(--text-muted);
  padding: var(--gap-sm); cursor: pointer;
  border-right: 1px solid var(--border);
}
.cmp-tab:last-child { border-right: none; }
.cmp-tab.is-active { background: var(--primary); color: #fff; font-weight: 600; }

/* --- Кнопка «Сформировать отчёт» (всегда видна внизу) --- */
.cmp-report {
  margin-top: var(--gap-lg);
  display: flex; flex-direction: column; align-items: center; gap: var(--gap-xs);
}
.btn-report { width: 100%; font-size: var(--fs-base); padding: var(--gap-md); }

/* --- Переключение мобайл/десктоп (mobile-first) --- */
.cmp-desktop { display: none; }              /* десктоп-таблица скрыта на мобайле */
.cmp-mobile  { display: block; }             /* вкладки видны на мобайле */

@media (min-width: 769px) {
  .cmp-desktop { display: block; overflow-x: auto; }
  .cmp-mobile  { display: none; }            /* на десктопе — полная таблица */
}

/* ============================================================
   Ф5 — AI-отчёт: модалка, спиннер, уведомления, отправка в TG
   ============================================================ */

/* Блокируем прокрутку фона, пока открыта модалка. */
body.ai-modal-open { overflow: hidden; }

/* Оверлей поверх всего. hidden скрывает через [hidden]. */
.ai-modal-overlay {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: var(--gap-md);
  background: rgba(15, 18, 25, .55);
}
.ai-modal-overlay[hidden] { display: none; }

/* Окно модалки. */
.ai-modal {
  background: var(--surface);
  border-radius: var(--radius);
  width: 100%; max-width: 640px;
  max-height: 88vh;
  display: flex; flex-direction: column;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .25);
  overflow: hidden;
}

.ai-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--gap-md);
  border-bottom: 1px solid var(--border);
}
.ai-modal-title { font-size: var(--fs-lg); font-weight: 600; }
.ai-modal-close {
  border: none; background: transparent; cursor: pointer;
  font-size: 20px; line-height: 1; color: var(--text-muted);
  padding: var(--gap-xs) var(--gap-sm); border-radius: var(--radius);
}
.ai-modal-close:hover { color: var(--danger); background: rgba(220, 53, 69, .08); }

.ai-modal-body {
  padding: var(--gap-md);
  overflow-y: auto;
  flex: 1 1 auto;
}

.ai-modal-footer {
  display: flex; flex-wrap: wrap; gap: var(--gap-sm);
  padding: var(--gap-md);
  border-top: 1px solid var(--border);
  align-items: center;
}

/* Текст отчёта — моноширинный блок, сохраняем переносы. */
.ai-report-text {
  white-space: pre-wrap; word-wrap: break-word;
  font-family: var(--font);
  font-size: var(--fs-base); line-height: 1.5;
  margin: 0; color: var(--text);
}

/* Уведомления (ошибка LLM / резервный отчёт / статус). */
.ai-notice {
  padding: var(--gap-sm) var(--gap-md);
  border-radius: var(--radius);
  margin-bottom: var(--gap-md);
  font-size: var(--fs-sm);
  background: rgba(37, 99, 235, .08);
  color: var(--primary-dark);
  border: 1px solid rgba(37, 99, 235, .25);
}
.ai-notice-warn {
  background: rgba(249, 115, 22, .1);
  color: #9a3412;
  border-color: rgba(249, 115, 22, .35);
}

/* Сообщение об ошибке (когда отчёта нет). */
.ai-error { padding: var(--gap-md) 0; }
.ai-error-msg {
  margin: 0; font-size: var(--fs-base); color: var(--danger); font-weight: 500;
}

/* Спиннер генерации. */
.ai-spinner-wrap {
  display: flex; flex-direction: column; align-items: center; gap: var(--gap-md);
  padding: var(--gap-lg) 0;
}
.ai-spinner {
  width: 40px; height: 40px;
  border: 4px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: ai-spin .8s linear infinite;
}
@keyframes ai-spin { to { transform: rotate(360deg); } }
.ai-spinner-msg { margin: 0; color: var(--text-muted); font-size: var(--fs-base); }

/* Блок отправки в Telegram (внутри футера, во всю ширину). */
.ai-tg {
  flex-basis: 100%;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-sm);
  margin-top: var(--gap-xs);
  padding-top: var(--gap-sm);
  border-top: 1px dashed var(--border);
}
.ai-tg-status { font-size: var(--fs-sm); color: var(--text-muted); }
.ai-tg-ok { color: var(--success); }
.ai-tg-warn { color: var(--warning); }

/* Сплошная красная кнопка (на случай использования kind='danger'). */
.btn-danger-solid { background: var(--danger); color: #fff; border-color: var(--danger); }
.btn-danger-solid:hover { filter: brightness(.95); }

/* ============================================================
   ДОРАБОТКИ: блокировка ст.1, маркеры, откосы, справочник
   ============================================================ */

/* Оболочка полей замера. Нативный [disabled] на fieldset гасит все поля ст.1. */
.measure-fields { border: 0; padding: 0; margin: 0; min-width: 0; }
.measure-fields[disabled] { opacity: .55; }

/* Цветной кружок-маркер норма/перерасход (пункт 6). */
.thick-marker {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  vertical-align: middle;
  background: var(--border);
}
.thick-marker.mk-norm    { background: var(--success); }
.thick-marker.mk-over    { background: var(--danger); }
.thick-marker.mk-under   { background: var(--warning); }
.thick-marker.mk-neutral { background: var(--border); }

/* Карточка откоса (двухстадийный замер, пункт 3). */
.slope-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--gap-sm) var(--gap-md);
  margin-bottom: var(--gap-sm);
}
.slope-head { display: flex; align-items: center; justify-content: space-between; }
.slope-title { font-size: var(--fs-sm); font-weight: 600; color: var(--text-muted); }
.slope-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-sm) var(--gap-md); }
@media (max-width: 560px) { .slope-grid { grid-template-columns: 1fr; } }
/* Поле во всю ширину сетки проёма (галочка «общий проём»). */
.slope-grid .field-wide { grid-column: 1 / -1; }

/* Панель действий на экране «Сравнение» (кнопка справочника, пункт 2). */
.cmp-toolbar { display: flex; justify-content: flex-end; margin-bottom: var(--gap-md); }

/* Таблица справочника материалов в модалке (пункт 2). */
.mat-table td { vertical-align: middle; }
.mat-table input { width: 100%; }
.mat-table .mat-num { text-align: right; }

/* ============================================================
   Ф8 — навигация 5 разделов, индикатор стадии, экран «Итоги ст.1»
   ============================================================ */

/* Индикатор текущей стадии в шапке экрана «Замер». */
.stage-indicator {
  font-size: var(--fs-sm); font-weight: 600;
  padding: 4px 10px; border-radius: var(--radius); white-space: nowrap;
}
.stage-indicator.st1 { background: rgba(37, 99, 235, .1); color: var(--primary-dark); }
.stage-indicator.st2 { background: rgba(249, 115, 22, .12); color: #9a3412; }

/* Нижняя панель на 5 пунктов — компактнее подписи/иконки. */
.bottom-nav .nav-btn { padding: 2px; }
.bottom-nav .nav-icon { font-size: 18px; }
.bottom-nav .nav-label { font-size: 10px; white-space: nowrap; }

/* Валидация и фиксация стадии (Ф10). */
.field-missing { border-color: var(--danger) !important; background: rgba(220, 53, 69, .06); }
.measure-validation { margin-top: var(--gap-md); }
.valid-warn {
  background: rgba(249, 115, 22, .1); border: 1px solid rgba(249, 115, 22, .35);
  color: #9a3412; border-radius: var(--radius); padding: var(--gap-sm) var(--gap-md); font-size: var(--fs-sm);
}
.valid-warn ul { margin: var(--gap-xs) 0 0 var(--gap-lg); }
.valid-warn li { margin: 2px 0; }
.btn-fixate { width: 100%; font-size: var(--fs-base); padding: var(--gap-md); }

/* Экран «Итоги замеров 1 стадии» (только просмотр). */
.sum-room { font-size: var(--fs-lg); font-weight: 700; margin-bottom: var(--gap-xs); }
.sum-block { }
.sum-row {
  display: flex; justify-content: space-between; gap: var(--gap-md);
  padding: 5px 0; border-bottom: 1px solid var(--border);
}
.sum-row:last-child { border-bottom: none; }
.sum-k { color: var(--text-muted); }
.sum-v { font-weight: 500; text-align: right; }
.sum-subhead { font-weight: 600; margin: var(--gap-sm) 0 var(--gap-xs); }
.sum-line { padding: 4px 0; }
.sum-op {
  font-size: var(--fs-sm); padding: 5px 0 5px var(--gap-md);
  border-left: 2px solid var(--border); margin: var(--gap-xs) 0;
}

/* ============================================================================
   Ф12 — экран входа и индикатор синхронизации (серверный режим)
   ============================================================================ */
.login-overlay {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg); padding: 16px;
}
.login-box {
  width: 100%; max-width: 340px;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 24px 20px; box-shadow: 0 6px 24px rgba(0,0,0,.08);
  display: flex; flex-direction: column; gap: 14px;
}
.login-title { margin: 0; font-size: 20px; color: var(--text); }
.login-sub { margin: -8px 0 4px; font-size: var(--fs-sm); color: var(--text-muted); }
.login-field { display: flex; flex-direction: column; gap: 4px; }
.login-field span { font-size: var(--fs-sm); color: var(--text-muted); }
.login-field input {
  padding: 10px 12px; font-size: 16px; color: var(--text);
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
}
.login-field input:focus { outline: none; border-color: var(--primary); }
.login-error {
  font-size: var(--fs-sm); color: #dc3545;
  background: #fdecee; border: 1px solid #f5c2c7; border-radius: var(--radius);
  padding: 8px 10px;
}
.login-submit { margin-top: 4px; padding: 11px; font-size: 15px; }

.sync-status {
  position: fixed; bottom: 12px; right: 12px; z-index: 900;
  font-size: var(--fs-sm); padding: 7px 12px; border-radius: var(--radius);
  box-shadow: 0 2px 10px rgba(0,0,0,.12);
}
.sync-status.sync-ok   { background: #e7f6ec; color: #1a7f37; border: 1px solid #b7e4c7; }
.sync-status.sync-warn { background: #fff4e5; color: #a15c00; border: 1px solid #ffe0b2; }