/* Раскладка открытых страниц: витрина и загрузка агента.
   Шапка, полоса содержимого, подвал — больше ничего. */

.site-header {
  position: sticky; top: 0; z-index: 20;
  height: var(--header-h); display: flex; align-items: center; gap: 14px;
  padding: 0 20px; background: rgb(var(--surface));
  border-bottom: 1px solid rgb(var(--line));
}
.site-header .inner {
  width: 100%; max-width: var(--page-max); margin: 0 auto;
  display: flex; align-items: center; gap: 14px;
}

.brand { display: flex; align-items: center; gap: 10px; color: inherit; }
.brand:hover { text-decoration: none; }
.brand img { width: 28px; height: 28px; object-fit: contain; }
.brand b { font-weight: 650; font-size: .98rem; letter-spacing: -.015em; }
.brand span { font-size: .75rem; color: rgb(var(--muted)); display: block; margin-top: -2px; }

.site-nav { display: flex; gap: 2px; margin-left: 10px; }
.site-nav a {
  font-size: .85rem; color: rgb(var(--muted)); padding: 6px 11px; border-radius: 999px;
}
.site-nav a:hover, .site-nav a.on { background: rgb(var(--brand-500) / .1); color: rgb(var(--brand-700)); text-decoration: none; }

.site-main { max-width: var(--page-max); margin: 0 auto; padding: 40px 20px 72px; }

.hero { padding: 28px 0 34px; max-width: 62ch; }
.hero h1 { font-size: 2rem; margin-bottom: 12px; }
.hero p { color: rgb(var(--muted)); font-size: 1.02rem; }
.hero .actions { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; }

.section { margin-top: 40px; }
.section > h2 { margin-bottom: 14px; }

.cards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.site-footer {
  border-top: 1px solid rgb(var(--line));
  background: rgb(var(--surface));
}
.site-footer .inner {
  max-width: var(--page-max); margin: 0 auto; padding: 20px;
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
  font-size: .82rem; color: rgb(var(--muted));
}

/* ---------- страница входа ---------- */
.login-page {
  min-height: 100vh; display: grid; place-items: center; padding: 24px;
  background:
    radial-gradient(1100px 420px at 50% -12%, rgb(var(--brand-500) / .12), transparent 70%),
    rgb(var(--canvas));
}
.login-card { width: 100%; max-width: 380px; padding: 28px; }
.login-card .brand { justify-content: center; margin-bottom: 18px; flex-direction: column; text-align: center; gap: 8px; }
.login-card .brand img { width: 40px; height: 40px; }
.login-card form { display: flex; flex-direction: column; gap: 14px; margin-top: 18px; }
.login-card .msg { font-size: .84rem; min-height: 1.2em; color: rgb(var(--bad)); }