/* ── base.css — общие стили bot-web ──────────────────────────────────
   Подключается во всех шаблонах: <link rel="stylesheet" href="/static/base.css">
   ------------------------------------------------------------------ */

/* ── Шрифты ── */
@font-face { font-family:'Onest'; src:url('/static/fonts/onest-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Onest'; src:url('/static/fonts/onest-500.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Onest'; src:url('/static/fonts/onest-600.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Onest'; src:url('/static/fonts/onest-700.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }

/* ── Reset ── */
*, *::before, *::after {
  margin: 0; padding: 0; box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

/* ── CSS-переменные (светлая тема) ── */
:root {
  --bg:          #f0f4f4;
  --surface:     #ffffff;
  --accent:      #00978E;
  --accent-t:    rgba(0,151,142,.10);
  --accent-text: #007a73;
  --text:        #1a2e2c;
  --muted:       #6b8f8d;
  --border:      #e4eceb;
  --border-s:    #cddedd;
  --shadow-sm:   0 1px 3px rgba(0,40,35,.06);
  --shadow:      0 2px 8px rgba(0,40,35,.08);
  --radius:      10px;
  --tabbar-h:    64px;
  --error:       #e05c5c;
}

/* ── Тёмная тема ── */
[data-theme="dark"] {
  --bg:          #0f1a19;
  --surface:     #1a2a28;
  --accent:      #00978E;
  --accent-t:    rgba(0,151,142,.15);
  --accent-text: #2ec4bb;
  --text:        #e0eeec;
  --muted:       #5a8a87;
  --border:      #253d3a;
  --border-s:    #2e5450;
  --shadow-sm:   0 1px 3px rgba(0,0,0,.25);
  --shadow:      0 2px 8px rgba(0,0,0,.35);
}

/* ── Базовый body ── */
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  font-family: 'Onest', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--text);
  transition: background .2s, color .2s;
}

/* ── Шапка (общая для всех страниц) ── */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  z-index: 20;
}

/* ── Кнопка «Назад» / nav-back (admin-страницы) ── */
.nav-back {
  display: flex; align-items: center; gap: 5px;
  font-size: 13px; color: var(--muted); text-decoration: none;
  transition: color .15s;
}
.nav-back:hover { color: var(--accent-text); }
.nav-back svg { width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; }

/* ── Кнопка выхода ── */
.btn-logout {
  background: none; border: 1px solid var(--border-s); color: var(--muted);
  border-radius: 7px; padding: 5px 12px; font-size: 12px; font-weight: 500;
  font-family: inherit; cursor: pointer; text-decoration: none; line-height: 1;
  transition: border-color .15s, color .15s;
}
.btn-logout:hover { border-color: var(--accent); color: var(--accent); }

/* ── Универсальные кнопки ── */
.btn { padding:10px 18px; font-size:14px; font-weight:600; font-family:inherit; border-radius:8px; border:none; cursor:pointer; transition:opacity .15s, transform .1s; }
.btn:active   { transform: scale(.97); }
.btn:disabled { opacity: .45; pointer-events: none; }
.btn-primary  { background: var(--accent); color: #fff; }
.btn-primary:hover { opacity: .9; }
.btn-danger   { background: none; border: 1px solid var(--error); color: var(--error); }
.btn-danger:hover { background: rgba(224,92,92,.08); }
.btn-ghost    { background: none; border: 1px solid var(--border-s); color: var(--muted); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent-text); }

/* ── Статус-бар ── */
.status-bar { padding:10px 14px; border-radius:8px; font-size:13px; font-weight:500; display:none; }
.status-bar.ok  { background: rgba(0,151,142,.1); color: var(--accent-text); display: block; }
.status-bar.err { background: rgba(224,92,92,.1);  color: var(--error);       display: block; }

/* ── Спиннер ── */
.spinner {
  display: inline-block; width:14px; height:14px;
  border: 2px solid rgba(0,0,0,.1); border-top-color: var(--muted);
  border-radius: 50%; animation: spin .7s linear infinite;
  vertical-align: middle; margin-right: 6px; flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Модалка ── */
.modal-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:200; display:none; align-items:center; justify-content:center; padding:20px; }
.modal-backdrop.open { display: flex; }
.modal { background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:24px; max-width:320px; width:100%; box-shadow:0 8px 32px rgba(0,0,0,.18); }
.modal-title   { font-size:15px; font-weight:600; margin-bottom:16px; }
.modal-actions { display:flex; gap:8px; margin-top:4px; }

/* ── Карточка (admin-страницы) ── */
.card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); margin-bottom:16px; overflow:hidden; }
.card-header  { padding:16px 20px 14px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; gap:12px; }
.card-title   { font-size:15px; font-weight:600; }
.card-desc    { font-size:12px; color:var(--muted); line-height:1.4; margin-top:3px; }

/* ── Поле ввода ── */
.input { width:100%; padding:9px 12px; font-size:14px; font-family:inherit; background:var(--bg); border:1px solid var(--border-s); border-radius:8px; color:var(--text); outline:none; transition:border-color .15s; }
.input:focus { border-color: var(--accent); }
.input::placeholder { color:var(--muted); opacity:.7; }

/* ── Пустое состояние ── */
.empty-state { padding:48px 24px; text-align:center; color:var(--muted); font-size:14px; }

/* ── prefers-reduced-motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}