:root {
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-heading: var(--font-body);

  --brand-deep: #0d2a52;
  --brand-primary: #14509e;
  --brand-accent: #2f7de1;
  --brand-accent-hover: #1f66c4;
  --text-on-brand: #ffffff;

  --bg: #f4f7fb;
  --surface: #ffffff;
  --surface-alt: #eef2f8;
  --border: #e2e8f0;
  --border-strong: #c7d2e0;

  --text-primary: #1a2433;
  --text-secondary: #4b5768;
  --text-muted: #8592a6;

  --accent-soft: rgba(47, 125, 225, 0.12);
  --accent-soft-border: rgba(47, 125, 225, 0.35);

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.12);
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;

  --danger: #b91c1c; --danger-bg: #fee2e2; --danger-border: #fecaca;
  --success: #15803d; --success-bg: #dcfce7; --success-border: #bbf7d0;
  --warning: #b45309; --warning-bg: #fef3c7; --warning-border: #fde68a;
  --business: #7c3aed; --business-bg: #ede9fe; --business-border: #ddd6fe;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b1220;
    --surface: #131b2c;
    --surface-alt: #1a2540;
    --border: #253150;
    --border-strong: #34426a;

    --text-primary: #e6ebf5;
    --text-secondary: #a8b3c7;
    --text-muted: #6b7690;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
  }
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--brand-deep);
  margin: 0 0 0.5em;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) h1,
  :root:not([data-theme="light"]) h2,
  :root:not([data-theme="light"]) h3,
  :root:not([data-theme="light"]) h4,
  :root:not([data-theme="light"]) .login-card .brand-text { color: var(--text-primary); }
}
h1 { font-size: 1.6rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; }
p { margin: 0 0 0.75em; color: var(--text-secondary); }
a { color: var(--brand-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.layout { min-height: 100%; display: flex; flex-direction: column; }


.topbar {
  background: linear-gradient(135deg, var(--brand-deep), var(--brand-primary) 60%, var(--brand-accent));
  color: var(--text-on-brand);
  box-shadow: var(--shadow-sm);
}
.topbar-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0.85rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.brand { display: flex; align-items: center; gap: 0.65rem; }
.brand img { height: 34px; width: auto; border-radius: 6px; background: #fff; padding: 3px; }
.brand-text { font-family: var(--font-heading); font-weight: 700; font-size: 1.05rem; letter-spacing: -0.01em; }
.brand-text small { display: block; font-weight: 400; font-size: 0.68rem; letter-spacing: 0.04em; opacity: 0.75; text-transform: uppercase; }

.nav-links { display: flex; gap: 0.25rem; margin-left: auto; }
.nav-links a {
  color: rgba(255,255,255,0.82);
  padding: 0.5rem 0.9rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.92rem;
}
.nav-links a:hover { background: rgba(255,255,255,0.12); text-decoration: none; color: #fff; }
.nav-links a.active { background: rgba(255,255,255,0.18); color: #fff; }
.nav-badge {
  display: inline-block; min-width: 1.2em; padding: 0.05em 0.4em; margin-left: 0.2em;
  border-radius: 999px; background: var(--success); color: #fff;
  font-size: 0.72rem; font-weight: 700; text-align: center; line-height: 1.5;
}

.user-chip { display: flex; align-items: center; gap: 0.6rem; font-size: 0.85rem; color: rgba(255,255,255,0.85); }
.user-chip .avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(255,255,255,0.18); display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.8rem;
}
.user-chip a { color: rgba(255,255,255,0.7); font-size: 0.8rem; }


main.container { max-width: 1180px; margin: 0 auto; padding: 2rem 1.5rem 4rem; width: 100%; flex: 1; }
.page-head { margin-bottom: 1.5rem; }
.page-head p { max-width: 62ch; }


.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}
.card + .card { margin-top: 1.5rem; }


.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem 1.25rem; }
.field { display: flex; flex-direction: column; gap: 0.35rem; }
.field label { font-weight: 600; font-size: 0.85rem; color: var(--text-secondary); }
.field .hint { font-size: 0.78rem; color: var(--text-muted); margin-top: 0.15rem; }
input[type="text"], input[type="date"], input[type="password"], input[type="number"], select {
  font: inherit;
  padding: 0.55rem 0.7rem;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-primary);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input:focus, select:focus {
  outline: none;
  border-color: var(--brand-accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.checkbox-row { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; color: var(--text-secondary); }
.checkbox-row input { width: 16px; height: 16px; }
.radio-group { display: flex; flex-direction: column; gap: 0.5rem; }
.radio-option { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; }


.city-pair-row { display: flex; align-items: flex-end; gap: 0.75rem; }
.city-pair-row .field { flex: 1 1 0; min-width: 0; }
.swap-cities-btn {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--border-strong);
  border-radius: 50%;
  background: var(--surface);
  color: var(--brand-accent);
  font-size: 1.15rem; line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.swap-cities-btn:hover { background: var(--accent-soft); border-color: var(--brand-accent); }
.swap-cities-btn:active { transform: rotate(180deg); }
.swap-cities-btn:focus-visible { outline: none; border-color: var(--brand-accent); box-shadow: 0 0 0 3px var(--accent-soft); }
@media (max-width: 640px) {
  .city-pair-row { flex-wrap: wrap; }
  .city-pair-row .field { flex: 1 1 100%; }
  .swap-cities-btn { align-self: center; margin: 0.15rem 0; }
}

.form-actions { display: flex; align-items: center; gap: 0.75rem; margin-top: 1.25rem; flex-wrap: wrap; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  font: inherit; font-weight: 600; font-size: 0.9rem;
  padding: 0.65rem 1.3rem;
  border-radius: var(--radius-sm);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform 0.05s ease, background 0.15s ease, border-color 0.15s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--brand-primary); color: #fff; }
.btn-primary:hover { background: var(--brand-accent-hover); text-decoration: none; }
.btn-primary:disabled { background: var(--brand-primary); opacity: 0.75; cursor: progress; }
.btn-secondary { background: var(--surface); border-color: var(--border-strong); color: var(--text-primary); }
.btn-secondary:hover { border-color: var(--brand-accent); text-decoration: none; }
.btn-sm { padding: 0.4rem 0.85rem; font-size: 0.82rem; }


.spinner {
  display: inline-block;
  width: 13px; height: 13px;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  vertical-align: -2px;
}
@keyframes spin { to { transform: rotate(360deg); } }


.alert { padding: 0.85rem 1rem; border-radius: var(--radius-md); font-size: 0.9rem; margin-bottom: 1.25rem; border: 1px solid; }
.alert-error { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger); }
.alert-info { background: var(--accent-soft); border-color: var(--accent-soft-border); color: var(--brand-primary); }
.alert-success { background: var(--success-bg); border-color: var(--success-border); color: var(--success); }
.alert-warning { background: var(--warning-bg); border-color: var(--warning-border); color: var(--warning); }

.empty-state {
  text-align: center; padding: 3rem 1.5rem; color: var(--text-muted);
  border: 1.5px dashed var(--border-strong); border-radius: var(--radius-lg);
}
.empty-state .icon { font-size: 2.2rem; margin-bottom: 0.75rem; opacity: 0.6; }


.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-md); }
table { width: 100%; border-collapse: collapse; font-size: 0.88rem; min-width: 640px; }
thead th {
  text-align: left; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-muted); background: var(--surface-alt);
  padding: 0.65rem 0.85rem; border-bottom: 1px solid var(--border); white-space: nowrap;
}
tbody td { padding: 0.65rem 0.85rem; border-bottom: 1px solid var(--border); vertical-align: middle; color: var(--text-primary); }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--surface-alt); }
.price-cell { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--brand-deep); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .price-cell { color: var(--text-primary); } }

.badge {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.15rem 0.55rem; border-radius: 999px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.01em;
  border: 1px solid;
}
.badge-business { background: var(--business-bg); border-color: var(--business-border); color: var(--business); }
.badge-estimate { background: var(--warning-bg); border-color: var(--warning-border); color: var(--warning); }
.badge-real { background: var(--success-bg); border-color: var(--success-border); color: var(--success); }
.badge-cache { background: var(--accent-soft); border-color: var(--accent-soft-border); color: var(--brand-accent); }
.badge-muted { background: var(--surface-alt); border-color: var(--border); color: var(--text-muted); }

.site-tag { font-size: 0.78rem; color: var(--text-secondary); }
.route-tag { font-weight: 600; color: var(--text-secondary); font-size: 0.82rem; }


.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2rem; background: var(--bg); }
.login-card { width: 100%; max-width: 380px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 2.25rem 2rem; }
.login-card .brand { justify-content: center; margin-bottom: 1.5rem; flex-direction: column; text-align: center; }
.login-card .brand img { height: 56px; padding: 6px; }
.login-card .brand-text { color: var(--brand-deep); font-size: 1.15rem; }
.login-card .brand-text small { color: var(--text-muted); }
.login-card form { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.25rem; }
.login-card .btn { width: 100%; margin-top: 0.25rem; }


.report-text {
  white-space: pre-wrap;
  font-family: "Cascadia Mono", "Consolas", "SFMono-Regular", Menlo, monospace;
  font-size: 0.86rem;
  line-height: 1.6;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  max-height: 70vh;
  overflow: auto;
}


.status-pill { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; font-size: 0.9rem; }
.dot { width: 9px; height: 9px; border-radius: 50%; }
.dot-running { background: var(--warning); animation: pulse 1.4s ease-in-out infinite; }
.dot-done { background: var(--success); }
.dot-error { background: var(--danger); }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ── AI-ассистент рассылки — Бэтмен с книгой (см. assistant.js) ───────
   Эмоция = какое фото показано (форма глаз/рот, см. setPhaseClass) +
   лёгкое, «дышащее» движение через transform/opacity (по указанию
   пользователя добавить движение к реакциям) — без тряски камеры/кадра,
   это правило сохранено с прошлой версии виджета. */
.assistant-widget {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--accent-soft-border);
}

.assistant-frame {
  position: relative;
  width: 150px;
  height: 220px;
  flex: 0 0 auto;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: linear-gradient(180deg, #4a3a2a 0%, #2a2018 60%, #1c150f 100%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .assistant-frame { background: linear-gradient(180deg, #241c15 0%, #14100c 60%, #0c0a08 100%); }
}

/* Один и тот же цикл (assistant-breathe) крутится непрерывно всегда —
   смена фазы (idle/running/captcha) меняет только CSS-переменные
   (скорость/амплитуду/наклон), а не имя анимации. Если бы каждая фаза
   переключала на свою @keyframes, браузер обрывал бы текущий цикл и
   дёргал элемент на 0% новой анимации и движение выглядело рваным.
   Переключение фаз не рвёт цикл, а плавно меняет его параметры на лету. */
.assistant-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: top center;
  transition: opacity 0.18s ease;
  --breathe-duration: 4s;
  --breathe-scale: 1.012;
  --breathe-y: -2px;
  --breathe-rotate: 0deg;
  animation: assistant-breathe var(--breathe-duration) ease-in-out infinite;
}
.assistant-photo.is-swapping { opacity: 0; }

@keyframes assistant-breathe {
  0%, 100% { transform: scale(1) translateY(0) rotate(0deg); }
  50% { transform: scale(var(--breathe-scale)) translateY(var(--breathe-y)) rotate(var(--breathe-rotate)); }
}

/* running: чуть более "живой" темп + блик, будто перелистывает страницы —
   заменяет прежнюю анимацию самолётика, смысл тот же ("идёт работа") */
.assistant-running .assistant-photo {
  --breathe-duration: 1.3s;
  --breathe-scale: 1.02;
  --breathe-y: -3px;
}
.assistant-running .assistant-frame::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.16) 50%, transparent 60%);
  background-size: 250% 250%;
  animation: assistant-shine 2.2s linear infinite;
  pointer-events: none;
}
@keyframes assistant-shine {
  0% { background-position: 130% 130%; }
  100% { background-position: -30% -30%; }
}

/* captcha: тревожная рамка + красная вспышка + лёгкая "просевшая" поза,
   без тряски. */
.assistant-captcha .assistant-photo {
  --breathe-duration: 5s;
  --breathe-scale: 0.99;
  --breathe-y: 2px;
  --breathe-rotate: -0.6deg;
}
.assistant-captcha .assistant-frame { box-shadow: inset 0 0 0 2px var(--warning-border); }
.assistant-captcha .assistant-frame::before {
  content: "";
  position: absolute; inset: 0;
  background: rgba(220, 38, 38, 0.28);
  animation: assistant-alert-flash 0.6s ease-in-out 2;
  pointer-events: none;
  z-index: 2;
}
@keyframes assistant-alert-flash { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }

/* success: одноразовая реакция на "нашёл маршрут" (см. assistant.js
   triggerSuccess) — довольное лицо (улыбка, светящиеся глаза) + попап +
   искры вместо тряски. */
#assistant-widget.assistant-success .assistant-photo {
  animation: assistant-pop 0.7s cubic-bezier(.34, 1.56, .64, 1) 1;
}
@keyframes assistant-pop {
  0% { transform: scale(1) rotate(0deg); }
  35% { transform: scale(1.09) rotate(-2deg); }
  65% { transform: scale(0.98) rotate(1.5deg); }
  100% { transform: scale(1) rotate(0deg); }
}
.assistant-spark {
  position: absolute;
  width: 6px; height: 6px;
  top: 50%; left: 50%;
  margin: -3px 0 0 -3px;
  background: var(--brand-accent);
  border-radius: 999px;
  opacity: 0;
  animation: assistant-spark 0.9s ease-out 1;
  pointer-events: none;
}
@keyframes assistant-spark {
  0% { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--sx), var(--sy)) scale(0); }
}

@media (prefers-reduced-motion: reduce) {
  .assistant-photo, .assistant-frame::after, .assistant-frame::before, .assistant-spark {
    animation: none !important;
  }
}

.assistant-bubble { flex: 1 1 260px; min-width: 220px; }
.assistant-bubble p { margin: 0; }
#assistant-text { font-weight: 600; }
.assistant-captcha #assistant-text { color: var(--warning); }

.chat-form { display: flex; gap: 0.5rem; flex: 1 1 100%; order: 3; }
.chat-form input[type="text"] {
  flex: 1;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 8px);
  padding: 0.5rem 0.75rem;
  font: inherit;
  background: var(--surface);
}
.chat-form input[type="text"]:focus { outline: none; border-color: var(--brand-accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.chat-log { flex: 1 1 100%; order: 4; display: flex; flex-direction: column; gap: 0.35rem; max-height: 160px; overflow-y: auto; }
.chat-log:empty { display: none; }
.chat-msg { font-size: 0.85rem; padding: 0.4rem 0.65rem; border-radius: 10px; max-width: 90%; }
.chat-msg-user { align-self: flex-end; background: var(--accent-soft); color: var(--brand-primary); }
.chat-msg-bot { align-self: flex-start; background: var(--surface-alt); border: 1px solid var(--border); }
.chat-msg-bot.chat-msg-error { border-color: var(--danger-border); color: var(--danger); }

.route-flight { display: inline-flex; align-items: center; gap: 0.35rem; }
.route-flight .flight-dots { color: var(--text-muted); letter-spacing: 1px; }


.site-footer { text-align: center; padding: 1.5rem; color: var(--text-muted); font-size: 0.78rem; }


.stack { display: flex; flex-direction: column; gap: 0.5rem; }
.row { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.spread { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.muted { color: var(--text-muted); }
.small { font-size: 0.82rem; }

.row-actions { display: flex; align-items: center; gap: 0.75rem; }
.inline-form { display: inline; margin: 0; }
.link-danger {
  background: none; border: none; padding: 0; cursor: pointer;
  font: inherit; font-size: 0.82rem; color: var(--danger); text-decoration: underline;
}
.link-danger:hover { opacity: 0.8; }
.link-plain {
  background: none; border: none; padding: 0; cursor: pointer;
  font: inherit; font-size: 0.82rem; color: var(--brand-accent); text-decoration: underline;
}
.link-plain:hover { opacity: 0.8; }

@media (max-width: 640px) {
  .topbar-inner { flex-wrap: wrap; }
  .nav-links { order: 3; width: 100%; justify-content: flex-start; }
}