/* meetlar.com — палитра и типографика 1:1 с приложением Lar (services/theme.ts) */
:root {
  --accent: #E8A25B; --accent2: #C9803C; --brand: #281A17; --brand-hi: #4A3A34;
  --ok: #3DDC84; --warn: #FF5B4D;
  --bg: #0B0B0F; --card: #15151B; --card2: #1D1D25; --line: #2A2A34;
  --text: #F2F0EC; --muted: #8E8E99; --muted2: #5E5E6A;
  --glass: rgba(255,255,255,.07); --glass-border: rgba(255,255,255,.10);
  --mascot-opacity: .07; --mascot-filter: none;
}
@media (prefers-color-scheme: light) {
  :root {
    --bg: #FFFFFF; --card: #F4F3F1; --card2: #ECEAE6; --line: #E6E3DE;
    --text: #1A1816; --muted: #7A766F; --muted2: #B3AFA8;
    --glass: rgba(255,255,255,.72); --glass-border: rgba(0,0,0,.06);
    --mascot-opacity: .10;
    /* tintColor #28201d в светлой теме, как в чате (RN tintColor красит альфа-маску сплошным цветом) */
    --mascot-filter: brightness(0) saturate(100%) invert(11%) sepia(20%) saturate(900%) hue-rotate(340deg) brightness(90%) contrast(95%);
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); }
body {
  font-family: 'Onest', -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
  font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased;
  min-height: 100vh; position: relative; overflow-x: hidden;
}
code, .mono { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em; }

/* маскот нижним слоем — как BackgroundLayer в чате: прижат вправо-вниз, полупрозрачный, ЗА контентом */
.mascot-bg {
  position: fixed; right: -30px; bottom: -20px; width: 300px; height: 400px;
  background: url('/assets/mascot-mono.webp') no-repeat center bottom / contain;
  opacity: var(--mascot-opacity); filter: var(--mascot-filter);
  pointer-events: none; z-index: 0;
}
@media (min-width: 900px) { .mascot-bg { width: 380px; height: 500px; right: -40px; bottom: -30px; } }

.wrap { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; padding: 28px 22px 80px; }

/* шапка: аватар-маскот как в чате (brand-плашка, радиус) */
header { display: flex; align-items: center; gap: 14px; margin-bottom: 40px; }
header .avatar {
  width: 48px; height: 48px; border-radius: 15px; background: var(--brand);
  display: grid; place-items: center; overflow: hidden; flex: none;
  box-shadow: 0 10px 30px rgba(232,162,91,.12);
}
header .avatar img { width: 40px; height: 53px; transform: translateY(3px); }
header .brand { font-weight: 700; font-size: 20px; letter-spacing: -.01em; }
header .brand small { display: block; font-weight: 500; color: var(--muted); font-size: 13px; margin-top: 1px; }
@media (max-width: 520px) { header .brand small { display: none; } header nav a { padding: 6px 10px; font-size: 12px; } }
header nav { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 520px) {
  header { flex-wrap: wrap; row-gap: 12px; }
  header nav { margin-left: 0; flex-basis: 100%; justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  header nav::-webkit-scrollbar { display: none; }
}
header nav a, .chip {
  font-size: 13px; font-weight: 500; color: var(--text); text-decoration: none;
  padding: 7px 12px; border-radius: 999px; background: var(--glass); border: 1px solid var(--glass-border);
}
header nav a.active, .chip.accent { color: var(--accent); border-color: rgba(232,162,91,.35); }
header nav a:hover { border-color: var(--accent); }

/* hero — как экран приветствия в приложении */
.hero { text-align: center; padding: 30px 0 34px; }
.hero .mascot {
  width: 132px; height: 132px; border-radius: 38px; background: var(--brand);
  display: grid; place-items: center; margin: 0 auto 24px; overflow: hidden;
  box-shadow: 0 20px 40px rgba(232,162,91,.12);
}
.hero .mascot img { width: 106px; height: 140px; object-fit: cover; object-position: center 20%; transform: translateY(6px); }
h1 { font-size: 34px; font-weight: 700; letter-spacing: -.02em; margin: 0 0 10px; line-height: 1.15; }
.hero p.lead { color: var(--muted); font-size: 18px; max-width: 540px; margin: 0 auto; }
h2 { font-size: 22px; font-weight: 700; letter-spacing: -.01em; margin: 34px 0 10px; }
h3 { font-size: 17px; font-weight: 600; margin: 22px 0 6px; }
p, li { color: var(--text); }
p.muted, .muted { color: var(--muted); }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
ul { padding-left: 20px; } li { margin: 6px 0; }

/* карточки — стиль SettingRow */
.card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 16px 18px; margin: 12px 0; }
.card .k { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600; margin-bottom: 6px; }
.grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.cta { display: inline-flex; align-items: center; gap: 8px; background: var(--accent); color: #1A1816; font-weight: 600;
  padding: 12px 18px; border-radius: 999px; text-decoration: none; margin-top: 18px; }
.cta:hover { background: var(--accent2); text-decoration: none; }

.badge-ok { color: var(--ok); }
footer { margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; }
footer a { color: var(--muted); } footer a:hover { color: var(--accent); }
footer .copy { flex-basis: 100%; }
.lang { margin-left: auto; }
@media (max-width: 520px) { footer { font-size: 13px; gap: 6px 14px; } }
.updated { color: var(--muted2); font-size: 13px; }