/* Фирменный стиль «на экран» (Figma, октябрь 2026): лендинг, страница гостя, админка.
   Палитра: Синий экран, Чернила, Лёд, Бумага; шрифт Geologica (Google Fonts) */
:root {
  --bg: #F2F5FF;          /* Лёд — фон страниц */
  --surface: #FFFFFF;     /* карточки */
  --surface-2: #E3E9FF;   /* подложка секций, поля, метки */
  --ink: #111111;         /* Чернила */
  --mute: #63687A;
  --line: #E3E9FF;
  --line-2: #84A5F1;      /* контур кнопок */
  --accent: #2F5CF0;      /* Синий экран */
  --accent-ink: #FBFBFB;
  --accent-soft: #E3E9FF;
  --deep: #1A1FC9; --night: #050143; --iris: #5D63DE; --sky: #ABD9FA;
  --coral: #FB6182; --coral-soft: #FFE3EA;
  --ok: #1F9D61; --ok-soft: #E3F5EC;
  --no: #E0483E; --no-soft: #FCE8E6;
  --warn: #D98A0B; --warn-soft: #FDF1DC;
  --radius: 32px;         /* карточки и крупные блоки */
  --radius-md: 16px; --radius-sm: 10px;
  --shadow: 0 8px 24px rgba(46,92,240,.10);   /* тень Soft — только для поднятых элементов */
  --font-head: 'Geologica', system-ui, sans-serif;
  --font-body: 'Geologica', system-ui, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--bg); color: var(--ink); font: 400 16px/1.5 var(--font-body); -webkit-font-smoothing: antialiased; }
h1, h2, h3, .head { font-family: var(--font-head); font-weight: 500; line-height: 1.1; letter-spacing: -.035em; }
/* приём из логотипа: одно слово или короткая фраза в заголовке — курсивом */
/* наклон рисует браузер: на айфоне Google отдаёт Geologica без оси наклона, и 'slnt' там не работает */
h1 em, h2 em, h3 em, .head em { font-style: oblique 11deg; }
b, strong { font-weight: 500; }
a { color: var(--accent); }
.mute { color: var(--mute); }
.small { font-size: 14px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: none; cursor: pointer;
  font: 500 16px/20px var(--font-body); min-height: 44px; padding: 12px 24px; border-radius: var(--radius-sm); text-decoration: none;
  background: var(--accent); color: var(--accent-ink); transition: transform .1s, box-shadow .2s, background .2s; }
.btn:hover { box-shadow: 0 8px 20px rgba(47,92,240,.28); }
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .5; cursor: default; box-shadow: none; }
.btn.lg { min-height: 56px; padding: 18px 32px; border-radius: var(--radius-md); }
.btn.dark { background: var(--ink); }
.btn.dark:hover { box-shadow: 0 8px 20px rgba(17,17,17,.22); }
.btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line-2); }
.btn.ghost:hover { box-shadow: inset 0 0 0 1.5px var(--accent); }
.btn.soft { background: var(--accent-soft); color: var(--accent); }
.btn.soft:hover { box-shadow: none; background: #d6dfff; }
.btn.sm { font-size: 14px; min-height: 36px; padding: 8px 14px; border-radius: var(--radius-sm); }
.btn.link { background: none; color: var(--mute); padding: 8px; }
.btn.link:hover { box-shadow: none; color: var(--ink); }

.card { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); }
.field { display: block; margin-bottom: 14px; }
.field > span { display: block; font-size: 14px; color: var(--mute); margin-bottom: 6px; }
input[type=text], input[type=email], input[type=date], input:not([type]), select, textarea {
  width: 100%; background: var(--bg); border: 1.5px solid var(--line); color: var(--ink);
  padding: 14px 18px; border-radius: var(--radius-md); font: 400 16px/20px var(--font-body); outline: none; transition: border-color .15s, background .15s;
}
input::placeholder, textarea::placeholder { color: var(--mute); }
input:focus, select:focus, textarea:focus { border-color: var(--accent); background: #fff; }
textarea { resize: vertical; }

.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; padding: 4px 12px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent); white-space: nowrap; }
.pill.ok { background: var(--ok-soft); color: var(--ok); }
.pill.no { background: var(--no-soft); color: var(--no); }
.pill.warn { background: var(--warn-soft); color: var(--warn); }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }

.toast { position: fixed; top: 18px; left: 50%; transform: translate(-50%, -10px); max-width: 92vw; z-index: 100;
  background: var(--ink); color: #fff; padding: 12px 22px; border-radius: 999px; font-size: 15px; text-align: center;
  opacity: 0; transition: opacity .3s, transform .3s; pointer-events: none; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.ok { background: var(--ok); } .toast.no { background: var(--no); } .toast.warn { background: var(--warn); }

.brand { display: inline-flex; align-items: center; text-decoration: none; color: var(--ink); }
/* логотип из фирменного стиля: знак-«экран» с глазами и надпись «на экран» (brand/logo.svg) */
.brand i { display: block; width: 156px; height: 24px; background: url('/brand/logo.svg') left center / contain no-repeat; flex: none; }
.brand.mark i { width: 49px; background-image: url('/brand/mark.svg'); }
.brand.on-dark i { background-image: url('/brand/logo-dark.svg'); }

/* форма «Написать нам» (contact.js) */
.contactform { padding: 22px; }
.contactform .cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.contactform textarea { width: 100%; resize: vertical; }
.contactform .cf-trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.contactform .cf-foot { display: flex; align-items: center; justify-content: flex-end; gap: 14px; margin-top: 6px; }
.contactform .cf-msg { font-size: 14px; margin-right: auto; }
.contactform.cf-done b { display: block; font: 700 18px var(--font-head); margin-bottom: 6px; }
.contactform.cf-done p { color: var(--mute); margin: 0; }
@media (max-width: 560px) { .contactform .cf-row { grid-template-columns: 1fr; } }