/* Единый стиль Global Motors (слово владельца 20.10, ватман https://claude.ai/artifact/AZBWQNvJBe4LVtckiMkHMR):
   три вида Aeromobilis — А «Тихий» · Б «Витрина» · В «Табло», токены --sk-* (имена и значения — aero css/skins/a|b|c.css,
   с добавками сайта GM public/css/skin-a|b|c.css). Один файл на сайт GM, кабинет и админку.
   Вид ставит html[data-skin="a|b|c"] (сайт GM — cookie gm_skin). Без атрибута — вид А: так всегда у админки (один вид).
   Шрифт: Outfit, когда его файлы лягут к нам на сервер (CSP font-src 'self'); до того — системный.
   Смысловые цвета (статусы машины, площадки, аукционы) — в admin-st-ds.css (--ds-*), здесь их нет. */

:root, html[data-skin="a"] {
  --sk-ink: #1b2430; --sk-muted: #6b7685; --sk-faint: #a3acb8; --sk-line: #e6eaef; --sk-line-2: #d3d9e0; --sk-soft: #f5f7f9;
  --sk-accent: #e63946; --sk-accent-h: #cf3340; --sk-ok: #1a8f5c; --sk-blue: #1a5fb4;
  --sk-card: #fff; --sk-on-fg: #fff;
  --sk-font: "Outfit", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
  --sk-gut: 16px; --sk-wrap: 1240px; --sk-r: 999px; --sk-r-box: 8px;
  --sk-shadow: none;
  --sk-page-bg: #fff;

  --sk-hd-bg: #fff; --sk-hd-fg: var(--sk-ink); --sk-hd-muted: var(--sk-muted); --sk-hd-line: var(--sk-line);
  --sk-hd-h: 60px; --sk-hd-h-m: 54px; --sk-hd-gap: 32px; --sk-nav-gap: 24px; --sk-nav-fs: 14px; --sk-tools-gap: 18px;
  --sk-logo-fs: 20px; --sk-logo-1-w: 700; --sk-logo-2-w: 300; --sk-logo-2-c: inherit;

  --sk-login-fg: var(--sk-ink); --sk-login-bg: transparent; --sk-login-bg-h: var(--sk-soft);
  --sk-login-bd: var(--sk-ink); --sk-login-r: 999px; --sk-login-pad: 6px 16px;

  /* тонкая служебная полоса (у админки — верхняя из двух) */
  --sk-strip-bg: var(--sk-soft); --sk-strip-fg: var(--sk-muted); --sk-strip-h: 32px;
  --sk-beta-bg: var(--sk-soft); --sk-beta-fg: var(--sk-muted); --sk-beta-line: var(--sk-line);
  --sk-beta-on-bg: var(--sk-ink); --sk-beta-on-fg: #fff;
}

html[data-skin="b"] {
  --sk-line: #e3e8ee; --sk-line-2: #d3d9e0; --sk-soft: #f2f4f7;
  --sk-gut: 16px; --sk-wrap: 1280px; --sk-r: 10px; --sk-r-box: 14px;
  --sk-shadow: 0 1px 2px rgba(27, 36, 48, .06), 0 6px 20px rgba(27, 36, 48, .07);
  --sk-shadow-h: 0 2px 4px rgba(27, 36, 48, .06), 0 14px 32px rgba(27, 36, 48, .12);
  --sk-ph-bg: #dfe4ea; --sk-f-bg: #f2f4f7;
  --sk-page-bg: #f2f4f7;

  --sk-hd-bg: #1b2430; --sk-hd-fg: #fff; --sk-hd-muted: rgba(255, 255, 255, .72); --sk-hd-line: rgba(255, 255, 255, .08);
  --sk-hd-h: 64px; --sk-hd-h-m: 56px; --sk-hd-gap: 36px; --sk-nav-gap: 26px; --sk-nav-fs: 14px; --sk-tools-gap: 16px;
  --sk-logo-fs: 21px; --sk-logo-1-w: 300; --sk-logo-2-w: 700; --sk-logo-2-c: var(--sk-accent);

  --sk-login-fg: #fff; --sk-login-bg: rgba(255, 255, 255, .1); --sk-login-bg-h: rgba(255, 255, 255, .18);
  --sk-login-bd: transparent; --sk-login-r: 10px; --sk-login-pad: 8px 14px;

  --sk-strip-bg: #111821; --sk-strip-fg: rgba(255, 255, 255, .6);
  --sk-beta-bg: #111821; --sk-beta-fg: rgba(255, 255, 255, .6); --sk-beta-line: rgba(255, 255, 255, .06);
  --sk-beta-on-bg: var(--sk-accent); --sk-beta-on-fg: #fff;
}

html[data-skin="c"] {
  --sk-line: #e4e8ee; --sk-soft: #f4f6f8; --sk-head: #fafbfc;
  --sk-gut: 16px; --sk-wrap: 1400px; --sk-r: 6px; --sk-r-box: 6px;
  --sk-sel-soft: #eef4fc; --sk-row-h: #f7f9fc;
  --sk-page-bg: #f4f6f8;

  --sk-hd-h: 52px; --sk-hd-h-m: 52px; --sk-hd-gap: 20px; --sk-nav-gap: 16px; --sk-nav-fs: 13px; --sk-tools-gap: 12px;
  --sk-logo-fs: 18px;

  --sk-login-fg: #fff; --sk-login-bg: var(--sk-ink); --sk-login-bg-h: #2c3a4d;
  --sk-login-bd: var(--sk-ink); --sk-login-r: 6px; --sk-login-pad: 5px 12px;

  --sk-strip-bg: var(--sk-head);
  --sk-beta-bg: var(--sk-head); --sk-beta-on-bg: var(--sk-blue);
}

/* ---------- мост: дизайн-система Разборки (--ds-*, admin-st-ds.css) берёт основу вида ----------
   Подключать ПОСЛЕ admin-st-ds.css. Смысловые цвета (ok / bad / статусы / площадки / аукционы) не трогаем. */
:root, html[data-skin] {
  --ds-ink: var(--sk-ink);
  --ds-muted: var(--sk-muted);
  --ds-faint: var(--sk-faint);
  --ds-line: var(--sk-line);
  --ds-line-2: var(--sk-line-2);
  --ds-hover: var(--sk-soft);
  --ds-font: var(--sk-font);
  --ds-r: 999px;          /* кнопки и сегменты — «таблетки», как у Aeromobilis */
}

/* ---------- общие детали вида ---------- */

/* Логотип: квадрат US/GM + «Global Motors» словом (начертания — из вида) */
.sk-logo { display: inline-flex; align-items: center; gap: 10px; color: var(--sk-hd-fg); text-decoration: none; flex: none; }
.sk-logo__box { width: 32px; height: 32px; box-sizing: border-box; border: 2px solid currentColor; display: grid; grid-template-rows: 1fr 2px 1fr;
  font: 900 9.5px/1 Arial, Helvetica, sans-serif; letter-spacing: .01em; text-align: center; flex: none; }
.sk-logo__box span { display: grid; place-items: center; }
.sk-logo__box span:first-child { color: #3b82f6; }
.sk-logo__box i { display: block; background: currentColor; }
.sk-logo__w { font: 300 var(--sk-logo-fs)/1 var(--sk-font); letter-spacing: -.01em; white-space: nowrap; }
.sk-logo__w b { font-weight: var(--sk-logo-1-w); }
.sk-logo__w em { font-style: normal; font-weight: var(--sk-logo-2-w); color: var(--sk-logo-2-c); }

/* Пиктограммы вида (лист · плитки · строки) — в шапке рядом с языком и входом; строки «Вид: А Б В» нет */
.sk-views { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border: 1px solid var(--sk-line); border-radius: 999px; }
html[data-skin="b"] .sk-views { border-color: var(--sk-hd-line); }
.sk-views button { width: 28px; height: 26px; display: inline-grid; place-items: center; border: 0; border-radius: 999px; background: none; color: var(--sk-hd-muted); cursor: pointer; padding: 0; }
.sk-views button:hover { color: var(--sk-hd-fg); }
.sk-views button.is-on { background: var(--sk-hd-fg); color: var(--sk-hd-bg); }
.sk-views button:focus-visible { outline: 2px solid var(--sk-blue); outline-offset: 1px; }
.sk-views svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }

/* Кнопка-«таблетка»: обычная (контур), главная (красная), тёмная */
.sk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; padding: 0 16px;
  border: 1px solid var(--sk-ink); border-radius: var(--sk-r); background: transparent; color: var(--sk-ink);
  font: 500 14px/1.2 var(--sk-font); white-space: nowrap; cursor: pointer; text-decoration: none; }
.sk-btn:hover { background: var(--sk-soft); }
.sk-btn--main { background: var(--sk-accent); border-color: var(--sk-accent); color: var(--sk-on-fg); font-weight: 600; }
.sk-btn--main:hover { background: var(--sk-accent-h); }
.sk-btn--dark { background: var(--sk-ink); color: var(--sk-on-fg); }
.sk-btn:focus-visible { outline: 2px solid var(--sk-blue); outline-offset: 2px; }