/* Общие стили сайтов комплексов и объектов (*.msk-vector.ru). Собрано из style.css главного сайта:
   шапка, логотип, карточки «Текущих проектов», окно пароля, заготовка панели. Тёмная тема. */
:root {
  --header-h: 79px; /* уточняется из JS по реальной высоте шапки */
  --marquee-h: 0px;  /* высота бегущей строки в низу первого экрана — тоже из JS */
  --color-primary: #2563eb;
  --color-text: #0f172a;
  --color-text-light: #e5e7eb;
  --shadow-soft: 0 18px 40px rgba(15,23,42,0.15);
  --shadow-card: 0 12px 24px rgba(15,23,42,0.1);
  --transition-fast: 0.25s ease;
  --accent-gradient: linear-gradient(135deg,#60a5fa 0%,#818cf8 60%,#c4b5fd 100%);
  /* цвета значка-логотипа: серебро #c0c0c0, голубая лента #40a0d0–#50b0e0, стальная #306090 */
  --logo-gradient: linear-gradient(100deg,#d3dbe1 0%,#5ab4e2 34%,#3f9dd0 62%,#3a7fae 100%);
  color-scheme: dark;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:#e5e7eb;
  background:linear-gradient(135deg,#0b1120 0%,#020617 40%,#111827 100%);
  -webkit-font-smoothing:antialiased;
}
.container{width:100%;max-width:1120px;margin:0 auto;padding:0 20px}
.section{padding:80px 0}
.section-dark{background:radial-gradient(circle at top right,#111827 0%,#020617 100%);color:var(--color-text-light)}
.section-title{font-size:32px;margin:0 0 16px}
.section-subtitle{margin:0 0 32px;max-width:720px;color:rgba(15,23,42,0.7)}
.section-dark .section-subtitle{color:rgba(226,232,240,0.7)}
/* Без backdrop-filter: шапка лежит над 3D-сценой, и размытие пересчитывалось бы на каждом её кадре */
.site-header{position:sticky;top:0;z-index:50;background:rgba(13,20,38,0.97);border-bottom:1px solid rgba(148,163,184,0.25)}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:9px 20px}
.logo{display:flex;align-items:flex-end;gap:10px;color:#e5e7eb;text-decoration:none}
/* vector-mark.png — только значок «V» без пустых полей (обрезан из vector-logo-B1Wfob5Y.png) */
.logo img{height:22px;width:auto;display:block}
/* Подпись — по размеру и цвету как значок «V».
   Размер: высота заглавных (О, В) = высоте значка (22px; значок теперь обрезан без полей).
   font-size 28.7px ≈ высота заглавных 22px у системных шрифтов (коэффициент ~0,766).
   Низ заглавных — вровень с низом значка: базовая линия лежит выше низа строки на ~0,147 font-size,
   отсюда отрицательный margin-bottom (подобрано замером tools/logo-check.mjs).
   Цвет: перелив как у ленты значка — серебряный кончик → голубая лента → стальная. */
.logo-text{
  font-size:28.7px;font-weight:700;letter-spacing:-0.02em;line-height:1;white-space:nowrap;
  margin-bottom:-4.2px;
  background:var(--logo-gradient);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 18px;border-radius:999px;border:1px solid transparent;cursor:pointer;font-size:14px;font-weight:500;text-decoration:none;white-space:nowrap;transition:background-color var(--transition-fast),box-shadow var(--transition-fast),transform var(--transition-fast)}
.btn-primary{background:linear-gradient(135deg,#2563eb,#4f46e5);color:#f9fafb;box-shadow:0 12px 30px rgba(37,99,235,0.6)}
.btn-primary:hover{box-shadow:0 18px 40px rgba(37,99,235,0.8);transform:translateY(-1px)}
.btn-full{width:100%}
.header-actions{ display:flex; align-items:center; gap:14px; }
.site-footer{background:#020617;color:#6b7280;font-size:12px;border-top:1px solid #1f2937}
.footer-inner{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;padding:16px 20px}
/* ============================================================
   ТЕКУЩИЕ ПРОЕКТЫ — ПАНЕЛЬ ЗАКАЗЧИКА (карточки + окно пароля)
   ============================================================ */
.client-section{ background:radial-gradient(circle at top left,#0f1a33 0%,#020617 100%); }
.client-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin-top:32px; }
.client-card{
  position:relative; isolation:isolate; display:flex; flex-direction:column; gap:14px; text-align:left;
  padding:22px 20px 20px; border-radius:18px; cursor:pointer; font:inherit; color:inherit;
  background:rgba(15,23,42,0.85); border:1px solid rgba(148,163,184,0.3); box-shadow:var(--shadow-card);
  transition:transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.client-card:hover{ transform:translateY(-4px); border-color:rgba(96,165,250,0.55); box-shadow:0 22px 50px rgba(37,99,235,0.22); }
.client-card:focus-visible{ outline:2px solid #60a5fa; outline-offset:3px; }
.client-card::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:-1; opacity:0;
  transition:opacity .35s ease;
  background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%), rgba(59,130,246,0.16), transparent 60%);
}
.client-card:hover::after{ opacity:1; }
.client-card__top{ display:flex; align-items:center; justify-content:space-between; }
.client-card__num{ font-size:13px; letter-spacing:.14em; color:#64748b; }
.client-card__lock{
  width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  background:rgba(37,99,235,0.15); color:#93b4ff; border:1px solid rgba(96,165,250,0.35);
}
.client-card__lock svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.client-card__title{ margin:0; font-size:20px; color:#f1f5f9; }
.client-card__subtitle{ margin:0; font-size:14px; color:#94a3b8; min-height:2.6em; }
.client-card__status{ display:flex; align-items:center; justify-content:space-between; font-size:13px; color:#cbd5f5; }
.client-card__chip{ padding:4px 10px; border-radius:999px; background:rgba(37,99,235,0.18); color:#bfdbfe; font-size:12px; }
.client-card__bar{ height:4px; border-radius:4px; background:rgba(148,163,184,0.2); overflow:hidden; }
.client-card__bar span{ display:block; height:100%; background:linear-gradient(90deg,#3b82f6,#a5b4fc); border-radius:inherit; }
.client-card__cta{ margin-top:auto; font-size:14px; color:#93c5fd; }
.client-note{ color:#94a3b8; font-size:14px; }

/* окно пароля — нативный <dialog> */
.client-login{
  width:min(400px, calc(100vw - 32px)); padding:0; border:1px solid rgba(148,163,184,0.3); border-radius:20px;
  background:#0b1224; color:#e5e7eb; box-shadow:0 30px 80px rgba(2,6,23,0.6);
}
.client-login::backdrop{ background:rgba(2,6,23,0.7); }
.client-login[open]{ animation:client-login-in .25s ease-out; }
@keyframes client-login-in{ from{ opacity:0; transform:translateY(12px) scale(.98); } }
.client-login__form{ position:relative; padding:28px 26px 24px; display:flex; flex-direction:column; }
.client-login__close{
  position:absolute; top:12px; right:14px; width:32px; height:32px; border-radius:50%; border:0; cursor:pointer;
  background:transparent; color:#94a3b8; font-size:24px; line-height:1;
}
.client-login__close:hover{ color:#e5e7eb; background:rgba(148,163,184,0.12); }
.client-login__eyebrow{ margin:0 0 6px; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:#93b4ff; }
.client-login__title{ margin:0 0 20px; font-size:22px; color:#f1f5f9; }
.client-login__label{ font-size:13px; color:#94a3b8; margin-bottom:6px; }
.client-login__input{
  border-radius:10px; border:1px solid rgba(148,163,184,0.35); padding:11px 12px; font-size:15px;
  background:rgba(2,6,23,0.8); color:#f9fafb; outline:none; transition:border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.client-login__input:focus{ border-color:#60a5fa; box-shadow:0 0 0 3px rgba(96,165,250,0.2); }
.client-login__error{ min-height:1.4em; margin:8px 0 12px; font-size:13px; color:#fca5a5; }
.client-login__form.is-shake{ animation:client-shake .35s; }
@keyframes client-shake{ 25%{ transform:translateX(-6px); } 50%{ transform:translateX(6px); } 75%{ transform:translateX(-3px); } }
.client-login__submit[disabled]{ opacity:.6; cursor:wait; }

@media(max-width:960px){ .client-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:640px){ .client-grid{ grid-template-columns:minmax(0,1fr); } }
@media(prefers-reduced-motion:reduce){ .client-login[open], .client-login__form.is-shake{ animation:none; } }

/* ============ Страница панели проекта (/panel/<slug>/) ============ */
.panel-page{ min-height:100dvh; display:flex; flex-direction:column; }
.panel-main{ flex:1; }
.panel-eyebrow{ margin:0 0 8px; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:#93b4ff; }
.panel-title{ margin:0 0 8px; font-size:clamp(28px,3.4vw,42px); color:#f1f5f9; }
.panel-subtitle{ margin:0 0 32px; color:#94a3b8; }
.panel-placeholder{ padding:28px 24px; border-radius:18px; border:1px dashed rgba(148,163,184,0.4); color:#cbd5f5; }
.panel-logout{
  padding:7px 16px; border-radius:999px; cursor:pointer; font:inherit; font-size:13px;
  background:transparent; color:#e2e8f0; border:1px solid rgba(148,163,184,0.45);
}
.panel-logout:hover{ border-color:#e2e8f0; }
/* На узких экранах значок и подпись чуть меньше (×0,91), чтобы подпись не упиралась
   в кнопку темы и оставалась ровно по высоте значка */
@media(max-width:640px){
  .logo{ gap:8px; }
  .logo img{ height:20px; }
  .logo-text{ font-size:26.1px; margin-bottom:-5px; }
}
.panel-crumbs{ margin:0 0 10px; font-size:13px; color:#64748b; }
.panel-crumbs a{ color:#93b4ff; text-decoration:none; }
.panel-crumbs a:hover{ text-decoration:underline; }
.client-card--group .client-card__lock{ background:rgba(96,165,250,0.12); }
/* шапка той же высоты, что на главном сайте (там её задаёт кнопка темы 34px) */
.header-inner{ min-height:53px; }

/* Пароль: type=text + точки вместо type=password — в поле пароля браузеры (Mac, Windows)
   принудительно включают латиницу, и русские пароли («гараж») было не набрать */
.client-login__input{ -webkit-text-security:disc; text-security:disc; }