/*
 * app.css — единая дизайн-система страниц парсера (админка + кабинет).
 * Свой CSS в стиле Park UI: токены (CSS-переменные) + компоненты. Без фреймворка/CDN.
 * Тёмная тема. Акцент — фирменный aura. Меняешь дизайн здесь, в одном месте.
 */

:root {
  /* ── Палитра: чёрно-белая (как Park UI), жёлтый — только акцент ── */
  --bg:        #0a0a0a;   /* фон страницы */
  --surface:   #141414;   /* карточки/панели */
  --surface-2: #1e1e1e;   /* приподнятые блоки, hover */
  --border:    #2a2a2a;   /* границы */
  --border-strong: #3a3a3a;
  --text:      #f2f2f2;   /* основной текст (белый) */
  --muted:     #a3a3a3;   /* приглушённый */
  --faint:     #6e6e6e;   /* совсем тихий */

  --accent:    #ffae00;   /* aura — акцент */
  --accent-ink: #1a1205;  /* текст на акценте */
  --accent-soft: rgba(255,174,0,0.16);

  --danger:    #ef4444;
  --warn:      #f59e0b;
  --ok:        #10b981;

  /* ── Радиусы (умеренные, не «пузатые») ── */
  --r-sm: 6px;   /* кнопки/поля */
  --r:    8px;
  --r-lg: 12px;  /* карточки */
  --r-full: 9999px;

  /* ── Тени ── */
  --shadow:    0 1px 2px rgba(0,0,0,.3), 0 4px 12px rgba(0,0,0,.25);
  --shadow-lg: 0 10px 30px rgba(0,0,0,.45);

  /* ── Кольцо фокуса ── */
  --ring: 0 0 0 3px var(--accent-soft);

  /* ── Типографика ── */
  --font: 'Nunito Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
}

/* ── База ── */
.ax-root { font-family: var(--font); color: var(--text); background: var(--bg); }
.ax-muted { color: var(--muted); }
.ax-faint { color: var(--faint); }

/* ── Кнопки ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--font); font-weight: 600; font-size: .875rem; line-height: 1;
  padding: .5rem .9rem; border-radius: var(--r-sm); border: 1px solid transparent;
  cursor: pointer; transition: background .15s, border-color .15s, opacity .15s, box-shadow .15s;
  white-space: nowrap; user-select: none;
}
.btn:focus-visible { outline: none; box-shadow: var(--ring); }
.btn:disabled { opacity: .55; cursor: default; }

.btn--solid    { background: #ffffff; color: #0a0a0a; }            /* основная — белая (Park UI) */
.btn--solid:hover    { background: #e6e6e6; }
.btn--accent   { background: var(--accent); color: var(--accent-ink); } /* брендовый акцент (наш жёлтый) */
.btn--accent:hover   { filter: brightness(1.07); }
.btn--outline  { background: transparent; color: var(--text); border-color: var(--border-strong); }
.btn--outline:hover  { background: var(--surface-2); }
.btn--subtle   { background: var(--surface-2); color: var(--text); }
.btn--subtle:hover   { background: var(--border); }
.btn--ghost    { background: transparent; color: var(--muted); }
.btn--ghost:hover    { background: var(--surface-2); color: var(--text); }
.btn--danger   { background: transparent; color: var(--danger); }
.btn--danger:hover   { background: rgba(239,68,68,.12); }

.btn--sm { padding: .35rem .65rem; font-size: .8rem; }
.btn--lg { padding: .65rem 1.1rem; font-size: .95rem; }
.btn--block { width: 100%; }
.btn--icon { padding: .4rem; }

/* ── Поля ввода / select ── */
.field {
  width: 100%; font-family: var(--font); font-size: .875rem; color: var(--text);
  background: var(--bg); border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  padding: .5rem .65rem; transition: border-color .15s, box-shadow .15s;
}
.field::placeholder { color: var(--faint); }
.field:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
.field--sm { padding: .35rem .5rem; font-size: .8rem; }

.label { display: block; font-size: .75rem; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: .35rem; }

/* ── Карточки / панели ── */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--shadow); }
.card--pad { padding: 1.25rem; }
.card__head { padding: 1rem 1.25rem; border-bottom: 1px solid var(--border);
  font-weight: 700; }
.card__body { padding: 1.25rem; }

/* ── Бейджи ── */
.badge { display: inline-flex; align-items: center; gap: .35rem; font-size: .72rem; font-weight: 700;
  padding: .2rem .55rem; border-radius: var(--r-full); border: 1px solid transparent; line-height: 1.2; }
.badge--accent { background: var(--accent-soft); color: var(--accent); }
.badge--danger { background: rgba(239,68,68,.14); color: #fca5a5; }
.badge--warn   { background: rgba(245,158,11,.14); color: #fcd34d; }
.badge--ok     { background: rgba(16,185,129,.14); color: #6ee7b7; }
.badge--neutral{ background: var(--surface-2); color: var(--muted); }

/* ── Модалка / диалог ── */
.modal-backdrop { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-start;
  justify-content: center; padding: 1rem; padding-top: 6rem; background: rgba(0,0,0,.6); }
.dialog { width: 100%; max-width: 28rem; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: 1.25rem; }
.dialog__title { font-weight: 700; font-size: 1.05rem; margin-bottom: 1rem; }

/* ── Топбар ── */
.app-header { display: flex; align-items: center; gap: .75rem; height: 3.5rem; padding: 0 1.5rem;
  background: var(--surface); border-bottom: 1px solid var(--border); }
.app-header__brand { font-weight: 700; }

/* ── Утилиты-помощники (минимум) ── */
.stack > * + * { margin-top: .75rem; }
.row { display: flex; align-items: center; gap: .5rem; }
.row--wrap { flex-wrap: wrap; }