/* Единый стиль сайта: эталон — index.html. Фон #000, акцент #E81C24, шрифт system-ui. */
:root {
  --tm-bg: #000;
  --tm-fg: #fff;
  --tm-muted: #9ca3af;
  --tm-red: #E81C24;
  --tm-red-hover: #c4161d;
  --tm-border: rgba(255,255,255,.08);
  --tm-glass: rgba(255,255,255,.03);
  --tm-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
html { color-scheme: dark; }
body {
  font-family: var(--tm-font) !important;
}
body:not(.tm-paper) {
  background: var(--tm-bg) !important;
  background-color: var(--tm-bg) !important;
  color: var(--tm-fg);
}
/* primary CTA as on home */
.bg-tesla-red, button.bg-red-600, a.bg-red-600, .tm-btn-primary {
  background-color: var(--tm-red) !important;
  color: #fff !important;
}
.bg-tesla-red:hover, button.bg-red-600:hover, a.bg-red-600:hover, .tm-btn-primary:hover {
  background-color: var(--tm-red-hover) !important;
}
.tesla-red, .text-red-600, .tm-accent { color: var(--tm-red) !important; }
.glass {
  background: var(--tm-glass);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--tm-border);
}
/* print / light utility pages keep paper look on print only */
@media print {
  body { background: #fff !important; color: #000 !important; }
}

/* без скачков вёрстки: место под полосу прокрутки одинаково на всех страницах, каталог не схлопывается при загрузке */
html { scrollbar-gutter: stable; overflow-y: scroll; }
#part-grid { min-height: 1500px; }
#svc-grid { min-height: 100vh; }
.tm-admin-btn, .tm-auth-name { contain: layout; }

/* общие классы страниц (раньше дублировались inline на каждой странице) */
.border-tesla-red { border-color: var(--tm-red) !important; }
.hero-gradient { background: radial-gradient(circle at center, #1a1a1a 0%, #000 100%); }
/* поля форм — как форма заявки на главной */
.rq-in { width: 100%; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 1rem; padding: .75rem 1rem; outline: none; color: #fff; font: inherit; }
.rq-in:focus { border-color: var(--tm-red); }
select.rq-in option { background: #111; }
input, select, textarea, button { font-family: inherit; }

/* ошибка поля — только после blur/submit (класс ставит login-phone.js), не :invalid во время набора */
input.tm-field-error { border-color: var(--tm-red) !important; }
input:invalid { box-shadow: none; }

/* имя у иконки входа не сжимается до 0 в узкой шапке (планшет 1024 / магазин с корзиной):
   место освобождают ссылки меню и телефон, а не имя */
header > div > .tm-auth-name, header > div > .tm-auth-wrap { flex-shrink: 0; }
header > div > nav { min-width: 0; flex-shrink: 1; }
@media (min-width: 1024px) and (max-width: 1279px) { header > div > nav.lg\:flex { gap: 1.25rem; } header #hdrPhone { display: none !important; } }

/* «← На сайт» в кабинетах (клиент, мастер, админ/менеджер) */
.tm-home-btn { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; min-height: 40px; padding: .45rem 1rem;
  border: 1px solid var(--tm-red); border-radius: 9999px; color: #fff; font-size: .85rem; font-weight: 700; text-decoration: none; white-space: nowrap; transition: background .2s; }
.tm-home-btn:hover { background: var(--tm-red); }

/* шапка: одинаковая геометрия меню на всех страницах, ничего не прыгает */
header.sticky > div { flex-wrap: nowrap; }
header.sticky > div > nav { margin-left: 2.5rem !important; margin-right: auto !important; flex-shrink: 0; align-items: center; }
header.sticky > div > nav > a { display: inline-flex; align-items: center; height: 2rem; line-height: 1; white-space: nowrap;
  padding: 0 0 .25rem; border-bottom: 2px solid transparent; }
header.sticky > div > nav > a.border-b-2 { border-bottom-color: var(--tm-red) !important; }
header.sticky > div > * { white-space: nowrap; }
@media (max-width: 1439px) { .tm-has-admin header.sticky #hdrPhone, .tm-authed header.sticky #hdrPhone { display: none !important; } }
/* 1024–1279 с кнопкой «Админ-панель» (менеджер/админ/инженер): шапка не шире экрана */
@media (min-width:1024px) and (max-width:1279px) {
  .tm-has-admin header.sticky > div > nav { margin-left: 1.5rem !important; }
  .tm-has-admin header.sticky .tm-admin-btn { padding: .4rem .7rem; font-size: .78rem; }
  .tm-has-admin header.sticky button[onclick="toggleCart()"] > span.sm\:inline { display: none !important; }
  .tm-has-admin header.sticky button[onclick="toggleCart()"] { padding-left: .7rem; padding-right: .7rem; }
  .tm-has-admin header.sticky #tmAuthName.tm-auth-name { max-width: none; }
  .tm-has-admin header.sticky > div { gap: .75rem !important; }
  .tm-authed.tm-has-admin header.sticky > div > a.rounded-full[href*="login"], .tm-authed.tm-has-admin header.sticky > div > a.rounded-full[title="Войти"] { display: none !important; }
}

/* залогинен: кнопка с именем/иконкой входа постоянно красная (как :hover); гость — без изменений */
header a.tm-auth-on, .tm-authed header a[title="Войти"] { border-color: #E81C24 !important; background-color: rgba(232,28,36,.12); color: #fff; }
/* там, где иконка входа скрыта (1024–1279 у персонала) — красная «пилюля» на самом имени */
@media (min-width:1024px) and (max-width:1279px) {
  .tm-authed.tm-has-admin header.sticky #tmAuthName { border: 1px solid #E81C24; background-color: rgba(232,28,36,.12); border-radius: 9999px; padding: .55rem .8rem; min-height: 40px; }
}
/* залогинен, 1024–1439: шапка магазина (корзина + имя + «Админ-панель») не шире экрана */
@media (min-width:1024px) and (max-width:1439px) {
  .tm-authed header.sticky button[onclick="toggleCart()"] > span.sm\:inline { display: none !important; }
  .tm-authed header.sticky button[onclick="toggleCart()"] { padding-left: .7rem; padding-right: .7rem; }
  .tm-authed header.sticky > div > nav { gap: 1.25rem !important; }
}
@media (min-width:1024px) and (max-width:1279px) {
  .tm-authed header.sticky > div { gap: .75rem !important; }
  .tm-authed header.sticky > div > nav { margin-left: 1.25rem !important; gap: 1rem !important; }
}
@media (min-width:1024px) and (max-width:1279px) {
  .tm-authed.tm-has-admin header.sticky > div > nav { gap: .8rem !important; font-size: .8rem; }
  .tm-authed.tm-has-admin header.sticky #tmAuthName.tm-auth-name { max-width: none; padding: .55rem .65rem; }
}

/* мобильный (<768): у залогиненных шапка не шире экрана — без текста имени (иконка входа красная),
   «Админ-панель» уходит в бургер-меню, бургер всегда виден */
@media (max-width:767px) {
  .tm-authed header.sticky #tmAuthName, .tm-authed header.sticky .tm-auth-wrap .tm-auth-name { display: none !important; }
  header.sticky #tmAdminBtn { display: none !important; }
  header.sticky > div { gap: .5rem !important; min-width: 0; }
  header.sticky > div > a:first-child { min-width: 0; flex-shrink: 1; overflow: hidden; }
  header.sticky .m-burger { flex-shrink: 0; }
  header.sticky button[onclick="toggleCart()"] { padding-left: .6rem !important; padding-right: .6rem !important; flex-shrink: 0; }
  header.sticky button[onclick="toggleCart()"] > span.sm\:inline { display: none !important; }
  .tm-authed header.sticky a[title="Войти"] { border-color: #E81C24 !important; background-color: rgba(232,28,36,.12); }
}

/* имя залогиненного в шапке — красная «пилюля» как при наведении (≥768) */
@media (min-width:768px) {
  .tm-authed header.sticky #tmAuthName { border: 1px solid #E81C24; background-color: rgba(232,28,36,.12); border-radius: 9999px; padding: .5rem .75rem; min-height: 40px; }
}

/* Шапка залогиненного (класс .tm-authed на <html> ставит mobile.js до отрисовки).
   Раньше эти правила вставлял auth-header.js после загрузки — меню уезжало влево на ~94px. */
@media (min-width:1024px){.tm-authed header.sticky>div{gap:.9rem!important;padding-right:1.5rem!important;max-width:none!important}.tm-authed header.sticky>div>nav{gap:1.25rem!important;min-width:0}.tm-authed .tm-auth-name{max-width:none}.tm-authed header.sticky>div>*:not(nav){flex-shrink:0}}
@media (min-width:1024px) and (max-width:1365px){.tm-authed header.sticky a#hdrPhone{display:none!important}.tm-authed header.sticky>div>nav{gap:.9rem!important}}

/* 375: логотип не обрезается рядом с корзиной/кнопками (shop.html и др.) */
@media (max-width: 420px) {
  header a[href="/"] { gap: .5rem !important; min-width: 0; }
  header a[href="/"] > img { width: 2rem !important; height: 2rem !important; }
  header a[href="/"] > span > span:first-child { letter-spacing: .08em !important; font-size: 12px !important; }
  header a[href="/"] > span > span:last-child { letter-spacing: .2em !important; }
}

/* N1 (15.10): кабинет/инженер/админка на 375 — «← На сайт» не налезает на логотип, имя не обрезается */
@media (max-width: 480px) {
  [data-logo-home] { gap: .5rem !important; min-width: 0; flex-shrink: 1; }
  [data-logo-home] > span { display: none !important; }
  [data-logo-home] > img { width: 2.25rem !important; height: 2.25rem !important; }
  .tm-home-btn { font-size: 0 !important; padding: .35rem .7rem !important; min-width: 2.25rem; text-align: center; white-space: nowrap; }
  .tm-home-btn::before { content: "← Сайт"; font-size: 12px; }
  .m-logout { font-size: 12px !important; white-space: nowrap; }
  div:has(> [data-tm-home]) { gap: .5rem !important; min-width: 0; }
  #tmAuthName.tm-auth-name, .tm-name-slot .tm-auth-name { max-width: 6.5rem !important; font-size: .7rem !important; }
  .tm-name-slot { min-width: 0 !important; }
  .flex.justify-between:has(> div > [data-logo-home]) { flex-wrap: wrap; row-gap: .75rem; }
  div:has(> [data-logo-home]) h1 { font-size: 1.4rem !important; line-height: 1.2; }
}

/* Слоты «Админ-панель» и имени — статично в HTML, видимость только по классам на <html>
   (mobile.js ставит их до отрисовки). Скрипты лишь заполняют слоты — строка шапки не пересчитывается. */
.tm-admin-btn{display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap;min-height:40px;padding:.45rem 1rem;border:1px solid #E81C24;border-radius:9999px;color:#fff;font-size:.85rem;font-weight:700;text-decoration:none;transition:background .2s}
.tm-admin-btn:hover{background:#E81C24}
header.sticky .tm-slot-admin{display:none!important}
.tm-has-admin header.sticky .tm-slot-admin{display:inline-flex!important}
header.sticky .tm-name-slot{display:none!important}
.tm-authed header.sticky .tm-name-slot{display:inline-flex!important;align-items:center;flex-shrink:0;width:8.5rem;min-width:8.5rem;height:40px;overflow:hidden}
.tm-authed header.sticky .tm-name-slot #tmAuthName{display:block;width:100%;min-width:0;max-width:100%!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:38px;padding:0 .75rem!important;text-align:center;box-sizing:border-box;height:40px;border:1px solid #E81C24;background-color:rgba(232,28,36,.12);border-radius:9999px}
@media (max-width:767px){.tm-authed header.sticky .tm-name-slot,.tm-has-admin header.sticky .tm-slot-admin{display:none!important}}

/* ===== Шапка v2 (15.10): верхняя чёрная полоса — логотип, корзина, «Админ-панель», вход, имя;
   под ней — отдельная полупрозрачная строка вкладок. Высоты фиксированные, авторизация — только CSS. */
header.tm-hdr2{background:transparent!important;border:0!important}
.tm-hdr2 .tm-top{height:64px;background:rgba(0,0,0,.82);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-bottom:1px solid rgba(255,255,255,.06)}
.tm-hdr2 .tm-top-in{max-width:80rem!important;margin:0 auto;height:64px;padding:0 1.5rem!important;display:flex;align-items:center;gap:.75rem!important}
.tm-hdr2 .tm-top-in>*{flex-shrink:0}
.tm-hdr2 .tm-top-in>a:first-child{min-width:0;flex-shrink:1;overflow:hidden}
.tm-hdr2 .tm-sp{flex:1 1 auto;min-width:0}
.tm-hdr2 .tm-top-in>a[title="Войти"]{display:flex!important;width:40px;height:40px}
/* nav v3: «жидкое стекло» в цвет плиток .glass (блок «Обслуживаемые модели»: rgba(255,255,255,.03), граница .08),
   отдельной полоской с зазором под шапкой; пункты равномерно по ширине, не сжимаются */
.tm-hdr2 .tm-nav{height:52px;margin:8px auto 0;max-width:calc(80rem - 3rem);width:calc(100% - 3rem);border-radius:16px;position:relative;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,.03) 55%,rgba(255,255,255,.02) 100%),var(--tm-glass,rgba(255,255,255,.03));
  -webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);
  border:1px solid rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(255,255,255,.04),0 8px 24px rgba(0,0,0,.35)}
.tm-hdr2 .tm-nav::before{content:"";position:absolute;left:8%;right:8%;top:0;height:50%;border-radius:0 0 50% 50%/0 0 100% 100%;background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,0));pointer-events:none}
.tm-hdr2 .tm-nav-in{position:relative;height:50px;padding:0 .5rem;display:flex;align-items:stretch;justify-content:space-evenly;gap:.5rem;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.tm-hdr2 .tm-nav-in::-webkit-scrollbar{display:none}
.tm-hdr2 .tm-nav a{flex:0 0 auto!important;min-width:auto!important;overflow:visible!important;display:flex;align-items:center;padding:0 1.1rem;font-size:.95rem;font-weight:600;color:#f3f4f6;white-space:nowrap;text-shadow:0 1px 2px rgba(0,0,0,.6);box-shadow:inset 0 -2px 0 transparent;transition:color .2s,background .2s}
.tm-hdr2 .tm-nav a:hover{color:#fff;background:rgba(255,255,255,.06)}
.tm-hdr2 .tm-nav a.tm-cur{color:#fff;box-shadow:inset 0 -2px 0 #E81C24}
.tm-hdr2 .tm-top-in button[onclick="toggleCart()"]{height:40px}
@media (max-width:767px){
  .tm-hdr2 .tm-top{height:60px}.tm-hdr2 .tm-top-in{height:60px;padding:0 .75rem!important;gap:.5rem!important}
  .tm-hdr2 .tm-nav{height:46px;margin-top:6px;width:calc(100% - 1.5rem);border-radius:14px}.tm-hdr2 .tm-nav-in{height:44px;padding:0 .25rem;justify-content:flex-start}
  .tm-hdr2 .tm-nav a{padding:0 .8rem;font-size:.85rem}
  .tm-hdr2 .tm-top-in button[onclick="toggleCart()"]>span.sm\:inline{display:none!important}
  .tm-has-admin header.tm-hdr2 #tmAdminBtn.tm-slot-admin{display:inline-flex!important;min-height:36px;height:36px;padding:0 .6rem;font-size:.72rem}
}
/* 375 (qa 15.10 13:20): вкладки 3×2 сеткой — все шесть видны без прокрутки;
   у вошедших — надпись логотипа и имя пользователя; «Админ-панель» → компактное «Админ» */
@media (max-width:480px){
  .tm-hdr2 .tm-nav{height:auto}
  .tm-hdr2 .tm-nav-in{height:auto;display:grid;grid-template-columns:repeat(3,auto);justify-content:space-around;gap:0;padding:.2rem}
  .tm-hdr2 .tm-nav a{justify-content:center;height:34px;padding:0 .45rem;font-size:.78rem;border-radius:10px}
  .tm-hdr2 .tm-top-in{gap:.3rem!important;padding:0 .5rem!important}
  .tm-hdr2 .tm-top-in>a:first-child{gap:.35rem!important}
  .tm-hdr2 .tm-top-in>a:first-child img{width:32px;height:32px}
  .tm-hdr2 .tm-top-in>a:first-child span.leading-none{display:block!important;min-width:0;overflow:hidden}
  .tm-authed .tm-hdr2 .tm-top-in>a:first-child span.leading-none>span:first-child{font-size:.6rem!important;letter-spacing:.04em!important;white-space:nowrap}
  .tm-authed .tm-hdr2 .tm-top-in>a:first-child span.leading-none>span:last-child{font-size:8px!important;letter-spacing:.16em!important}
  .tm-hdr2 .tm-top-in>a[title="Войти"]{width:36px;height:36px}
  .tm-has-admin header.tm-hdr2 #tmAdminBtn.tm-slot-admin{font-size:0!important;padding:0 .45rem}
  .tm-has-admin header.tm-hdr2 #tmAdminBtn.tm-slot-admin::after{content:"Админ";font-size:.72rem}
}
@media (max-width:767px){
  .tm-authed header.tm-hdr2 .tm-name-slot{display:inline-flex!important;width:auto;min-width:2.5rem!important;max-width:5.4rem!important;flex-shrink:1!important;height:34px}
  .tm-authed header.tm-hdr2 .tm-name-slot #tmAuthName{display:block!important;max-width:100%!important;font-size:.7rem!important;height:34px;line-height:32px;font-size:.72rem;padding:0 .5rem!important}
}