/* ============================================================================
   0) RESET (Meyerweb)
   ========================================================================== */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video { margin: 0; padding: 0; border: 0; }
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; }
table { border-collapse: collapse; border-spacing: 0; }

/* ============================================================================
   1) DESIGN TOKENS (цвета, типографика, размеры, брейкпоинты, эффекты)
   ========================================================================== */

:root{
  /* Цвета */
  --color-ui-primary: #1a73e8;
  --color-ui-primary-600: #0f5ad4;
  --color-ui-primary-200: #d0e0ff;
  --color-accent: #f0ce20;

  --white: #ffffff;
  --black: #000000;
  --gray-900: #1d1d1f;
  --gray-800: #111;
  --gray-700: #333;
  --gray-600: #444;
  --gray-500: #666;
  --gray-400: #888;
  --gray-300: #ddd;
  --gray-200: #eee;
  --gray-100: #f7f7f7;

  --color-bg-primary: #f5f7fb;
  --color-bg-secondary: #f0f4ff;
  --text-color: var(--gray-900);

  /* Типографика */
  --font-sans: 'PT Sans', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --fs-base: 16px;
  --lh-base: 1.6;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;

  /* Контейнер */
  --max-width: 1200px;
  --gutter: 16px;

  /* Эффекты */
  --shadow-sm: 0 1px 4px rgba(0,0,0,.04);
  --shadow-md: 0 6px 16px rgba(0,0,0,.08);
  --shadow-lg: 0 10px 30px rgba(0,0,0,.15);

  /* Брейкпоинты */
  --bp-xl: 1280px;
  --bp-lg: 1065px;
  --bp-md: 960px;
  --bp-sm: 640px;
  --bp-xs: 480px;
}

/* Тёмная тема (опционально, авто по системе) */
@media (prefers-color-scheme: dark) {
  :root{
    --color-bg-primary: #0e1116;
    --color-bg-secondary: #121722;
    --text-color: #e9eef6;
    --gray-100:#202636; --gray-200:#273147; --gray-300:#2f3a50;
    --gray-400:#8391a7; --gray-500:#9aa7bb; --gray-600:#b3bed0; --gray-700:#d0d8e4;
    --white:#0e1116;
  }
}

/* Базовые теги */
html, body { font-family: var(--font-sans); font-size: var(--fs-base); line-height: var(--lh-base); }
body { background-color: var(--color-bg-primary); color: var(--text-color); }
.container { max-width: var(--max-width); margin: 0 auto; padding-inline: var(--gutter); }

/* Утилиты/акценты */
.blue, .active-blue { background-color: var(--color-ui-primary) !important; color: #fff !important; }
.active-blue:hover { background-color: var(--color-ui-primary) !important; color: #fff !important; }
.gray { background-color: var(--color-ui-primary); color: var(--gray-700); }

/* ============================================================================
   2) FONTS (PT Sans)
   ========================================================================== */

@font-face {
  font-family: 'PT Sans';
  src: url('/fonts/PT_Sans/PTSans-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'PT Sans';
  src: url('/fonts/PT_Sans/PTSans-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'PT Sans';
  src: url('/fonts/PT_Sans/PTSans-Italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'PT Sans';
  src: url('/fonts/PT_Sans/PTSans-BoldItalic.woff2') format('woff2');
  font-weight: 700; font-style: italic; font-display: swap;
}

/* ============================================================================
   3) HEADER (top-bar, header, main menu, поиск)
   ========================================================================== */

/* Top panel */
.top-bar { background: var(--color-ui-primary); color: var(--white); height: 40px; }
.top-bar-content { display: flex; justify-content: space-between; align-items: center; height: 40px; }
.top-bar img { height: 24px; }
.low-vision-btn {
  background: #000; color: var(--white); padding: 5px 10px; text-decoration: none; font-size: 14px; border-radius: var(--radius-sm);
}

/* Header */
.header {
  display: flex; justify-content: space-between; align-items: center;
  gap: 20px; padding: 15px; background-color: var(--color-bg-secondary); flex-wrap: wrap;
}
.header-logo { display: flex; flex-direction: row; gap: 20px; align-items: center; }
.header-logo img { height: 150px; margin-right: 10px; }
.header-title h1 { margin: 0; font-size: clamp(20px, 2vw, 28px); font-weight: 700; }
.header-title p { font-size: 16px; margin-bottom: 10px; }
.header-contacts { display: flex; flex-direction: column; }
.header-contacts p { font-size: 16px; margin-bottom: 10px; }

/* Main menu */
.main-menu { background: var(--white); width: 100%; margin-bottom: 15px; }
.main-menu-content { display: flex; flex-wrap: wrap; gap: 2px; }
.main-menu-content a {
  padding: 10px 15px; text-decoration: none; color: var(--gray-900); white-space: nowrap; border-radius: var(--radius-sm);
  transition: background .15s ease, color .15s ease, transform .12s ease;
}
.main-menu-content a:hover { background: #eee; transform: translateY(-1px); }
.main-menu-content a:focus-visible { outline: 2px solid var(--color-ui-primary-200); outline-offset: 2px; }

.search { margin-left: auto; padding: 5px; }
.search input { padding: 5px 10px; border-radius: 8px; border: 1px solid var(--gray-300); }

/* Поиск в шапке */
#siteSearch { position: relative; max-width: 400px; }
#siteSearchInput {
  width: 100%; padding: 10px 38px 10px 12px;
  border-radius: 10px; border: 1px solid #ddd; color: #222; background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.04);
  transition: border-color .2s ease, box-shadow .2s ease;
}
#siteSearchInput::placeholder { color: #999; }
#siteSearchInput:focus { border-color: var(--color-ui-primary); box-shadow: 0 0 0 3px rgba(26,115,232,.2); outline: none; }
#siteSearch::after {
  content: "🔍"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  font-size: 1.1rem; color: #888; pointer-events: none;
}

@media (max-width: var(--bp-sm)) {
  #siteSearch { max-width: 100%; margin-bottom: 16px; }
}

/* ============================================================================
   4) SERVICE SECTION (квадратные карточки)
   ========================================================================== */

.service-grid {
  display: grid; grid-template-columns: repeat(4, minmax(140px, 1fr));
  gap: 16px; background-color: var(--color-bg-secondary); padding: 0 0 15px;
}
.service-grid-card {
  position: relative; aspect-ratio: 1 / 1; overflow: hidden;
  border-radius: 14px; background: #eee; box-shadow: var(--shadow-sm);
}
.service-grid-card a { position: absolute; inset: 0; display: block; }
.service-grid-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.service-grid-card:hover img { transform: scale(1.04); }
.service-grid-card .tag {
  position: absolute; right: 0; bottom: 0; padding: 10px 15px;
  font: 600 16px/1.4 var(--font-sans); color: #fff; background: #f0ce20d9;
  pointer-events: none; text-align: right; min-width: 50%; box-sizing: border-box;
}

/* Адаптив сетки услуг */
@media (max-width: var(--bp-lg)) { .service-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: var(--bp-md)) { .service-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: var(--bp-xs)) { .service-grid { grid-template-columns: 1fr; } }

/* ============================================================================
   5) SEND METERS (4 кнопки)
   ========================================================================== */

.send-meters-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px;
  background: var(--color-bg-secondary); width: 100%; padding-bottom: 15px;
}
.send-meters-btn {
  padding: 20px; text-align: center; border-radius: 8px; background-color: var(--color-ui-primary);
  box-shadow: 0 0 10px rgba(0,0,0,0.1); cursor: pointer; opacity: .9;
  transition: transform .2s, box-shadow .2s, opacity .2s;
}
.send-meters-btn:hover { transform: translateY(-5px); box-shadow: 0 4px 15px rgba(0,0,0,.2); opacity: 1; }
.send-meters-btn a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%;
  text-decoration: none; color: #fff; font-weight: 700;
}
.send-meters-btn i {
  font-size: 40px; color: #fff; margin-bottom: 10px;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px  1px 0 #000, 1px  1px 0 #000;
}

/* Адаптив 4→3→2→1 */
@media (max-width: var(--bp-lg)) { .send-meters-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: var(--bp-md)) { .send-meters-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: var(--bp-xs)) { .send-meters-row { grid-template-columns: 1fr; } }

/* ============================================================================
   6) LAYOUT (сайдбар + контент) и САЙДБАР
   ========================================================================== */

.layout { display: flex; gap: 20px; background-color: var(--color-bg-secondary); }
.sidebar { flex: 0 0 250px; background-color: #fff; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.sidebar-title { margin: 12px 0; padding: 0 12px; font-weight: 800; }
.sidebar-content { padding: 0 12px 12px; display: grid; gap: 10px; }
.sidebar-btn{
  display:block; width:100%; padding:12px 14px; border-radius:12px; border:1px solid #ececec; color:#222; text-decoration:none;
  line-height:1.25; transition: transform .12s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease; box-shadow: var(--shadow-sm);
}
.sidebar-btn:hover{ transform: translateY(-1px); box-shadow: var(--shadow-md); border-color:#e5e5e5; }
.sidebar-btn:focus-visible{ outline: 2px solid var(--color-ui-primary-200); outline-offset: 2px; }

.buttonVacancy{
  position:relative; text-align:center; overflow:hidden;
  /*background: linear-gradient(180deg, #f8fbff 0%, #f2f7ff 100%);*/
  border:1px solid #cfe0ff; box-shadow: 0 2px 8px rgba(15,90,212,.08);
  color:#0f5ad4; padding:14px; animation: vacancy-breathe 2.2s ease-in-out infinite; transform-origin:center;
}
.buttonVacancy::before{
  content:""; position:absolute; left:6px; top:8px; bottom:8px; width:4px; border-radius:4px;
  background: linear-gradient(180deg, #7fb1ff 0%, #2a73e8 100%); opacity:.9;
}
.buttonVacancy .vac-line1, .buttonVacancy .vac-line2{ display:block; line-height:1.1; }
.buttonVacancy .vac-line1{ font-weight:700; letter-spacing:.4px; text-transform:uppercase; font-size: clamp(1rem, .9rem + .5vw, 1.15rem); }
.buttonVacancy .vac-line2{ margin-top:2px; font-weight:900; letter-spacing:.3px; text-transform:uppercase; font-size: clamp(1.2rem, 1rem + .9vw, 1.6rem); }
@keyframes vacancy-breathe{ 0%,100%{ transform:scale(.985); box-shadow:0 2px 8px rgba(15,90,212,.10); } 50%{ transform:scale(1); box-shadow:0 8px 18px rgba(15,90,212,.16); } }
.buttonVacancy:hover{ transform: translateY(-1px); box-shadow: 0 10px 22px rgba(15,90,212,.18); border-color:#b5d0ff; color:#0d4fb5; }
.buttonVacancy:focus{ outline:2px solid #99c2ff; outline-offset:2px; }
@media (prefers-reduced-motion: reduce){ .buttonVacancy{ animation:none; } }

.main-area{ flex:1; min-width:0; }

/* Навигация категорий новостей (хоризонтально с переносом) */
.category-news-menu{ display:flex; flex-wrap:wrap; gap:10px; padding:8px 12px; }
.category-news-menu-btn{
  display:block; text-decoration:none; color:#000; padding:8px 12px; margin-bottom:8px; border-radius: var(--radius-sm);
  background: #fff; border:1px solid var(--gray-200); transition: background .15s, transform .12s, border-color .15s;
}
.category-news-menu-btn:hover{ background:#f8faff; border-color:#e8efff; transform: translateY(-1px); }

/* Узкие экраны: сайдбар вниз */
@media (max-width: var(--bp-md)) {
  .layout{ flex-direction: column; }
  .sidebar{ order: 2; }
  .main-area{ order: 1; }
}

/* ============================================================================
   7) BANNERS (в сайдбаре)
   ========================================================================== */

.banners-content{ margin-top:24px; padding:0 12px 12px; display:grid; gap:16px; }
.banners-title{ font-weight:800; font-size:1.2rem; margin-bottom:10px; color:#222; }
.banner-item{
  display:flex; flex-direction:column; border-radius:12px; overflow:hidden; background:#fff; border:1px solid #eee;
  box-shadow: var(--shadow-sm); text-decoration:none; transition: transform .2s ease, box-shadow .2s ease;
}
.banner-item img{ width:100%; height:auto; display:block; object-fit:cover; transition: transform .3s ease; }
.banner-item:hover{ transform: translateY(-2px); box-shadow: var(--shadow-md); }
.banner-item:hover img{ transform: scale(1.04); }
.banner-caption{ padding:10px 12px; font-size:.95rem; font-weight:600; color:#333; border-top:1px solid #f0f0f0; background:#fafafa; }

@media (max-width: var(--bp-sm)) {
  .banners-content{ gap:12px; }
  .banner-caption{ font-size:.9rem; padding:8px 10px; }
}

/* ============================================================================
   8) FOOTER (бренд-фон, горизонтальное меню, контакты)
   ========================================================================== */

.footer{ background: var(--color-ui-primary); color: var(--white); margin-top: 32px; }
.footer-container{ max-width: var(--max-width); margin:0 auto; padding:32px var(--gutter); }
.footer-top{
  display:grid; grid-template-columns: 1.2fr 1fr 1.2fr; gap:32px; align-items:start;
}
.footer-brand{ display:flex; align-items:flex-start; gap:14px; }
.footer-logo{ width:56px; height:auto; flex-shrink:0; border-radius:6px; background:#fff; padding:6px; box-shadow: 0 2px 6px rgba(0,0,0,.1); }
.footer-org{ margin:0 0 6px; font-weight:700; font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem); color: var(--white); }
.footer-desc{ margin:0; color: rgba(255,255,255,.85); line-height:1.6; font-size:.95rem; }

.footer-nav{
  display:flex; flex-direction:row; align-items:center; gap:24px; white-space:nowrap; overflow-x:auto;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.footer-nav::-webkit-scrollbar{ display:none; }
.footer-nav a{
  color:var(--white); opacity:.9; text-decoration:none; font-size:.95rem; padding:4px 0;
  transition: opacity .2s ease, transform .15s ease;
}
.footer-nav a:hover{ opacity:1; transform: translateY(-1px); }

.contact-list{ padding:0; margin:0 0 16px; display:grid; gap:6px; }
.contact-list a{ color:var(--white); text-decoration:none; opacity:.9; transition: opacity .2s, text-decoration-color .2s; }
.contact-list a:hover{ text-decoration:underline; opacity:1; }
.socials{ display:flex; gap:10px; flex-wrap:wrap; }
.social-link{
  display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%;
  background: rgba(255,255,255,.15); color:var(--white); font-weight:600; font-size:.85rem; transition: background .2s, transform .2s;
}
.social-link:hover{ background: rgba(255,255,255,.3); transform: translateY(-2px); }

.footer-sep{ display:block; height:2px; margin:24px 0; border:0 !important; background: rgba(255,255,255,.25); border-radius:2px; }
.footer-bottom{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; font-size:.95rem; color: rgba(255,255,255,.85); }
.footer-bottom p{ margin:0; }
.footer-legal{ color: rgba(255,255,255,.85); text-decoration:none; }
.footer-legal:hover{ text-decoration:underline; }
.footer-bottom .dot{ margin:0 6px; }
.footer a:focus-visible{ outline:2px solid rgba(255,255,255,.7); outline-offset:2px; border-radius:6px; }

/* Горизонтальные ссылки с «точками» (без разделителя на мобилке) */
.footer-menu-links{ display:flex; flex-wrap:wrap; align-items:center; gap:0; }
.footer-menu-links a{
  color:var(--white); opacity:.9; text-decoration:none; padding:4px 0; border-radius:6px;
  transition: opacity .2s, transform .15s, text-decoration-color .15s;
}
.footer-menu-links a:hover{ opacity:1; transform: translateX(2px); }
.footer-menu-links a.active-blue,
.footer-menu-links a.active{ background-color: var(--color-ui-primary) !important; color:#fff !important; text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:2px; }
.footer-menu-sep{ margin:0 8px; color: rgba(255,255,255,.6); user-select:none; }

/* Адаптив футера */
@media (max-width: var(--bp-md)) { .footer-top{ grid-template-columns: 1fr 1fr; gap:24px; } }
@media (max-width: var(--bp-sm)) {
  .footer-top{ grid-template-columns: 1fr; }
  .footer-container{ padding:24px 14px; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; gap:6px; }
  .footer-brand{ flex-direction:column; align-items:flex-start; }
  .footer-logo{ margin-bottom:8px; }
  .footer-menu-links{ gap:10px; }
  .footer-menu-sep{ display:none; }
}

/* ============================================================================
   9) COOKIE DIALOG + MODAL
   ========================================================================== */

.cookie_content{
  position: fixed; left:0; right:0; bottom:0; z-index:1000; display:block;
  background-color: transparent; color:#878b90; transform: translateY(0)!important;
}
.cookie_form{
  display:flex; align-items:center; gap:16px;
  backdrop-filter: blur(4px); background:#fff; border-radius:5px;
  box-shadow: 0 5px 23px -3px rgba(0,0,0,.3);
  margin: 30px auto; width: calc(100% - 80px); max-width: 1170px; padding: 20px 30px;
}
.cookie_btn{
  background: var(--color-ui-primary); border:0; border-radius:5px; color:#fff; cursor:pointer;
  font-weight:600; height:40px; width:150px; margin-left:auto;
  transition: filter .2s ease, transform .12s ease;
}
.cookie_btn:hover{ filter: brightness(1.05); transform: translateY(-1px); }

.modal{
  display:none; position:fixed; inset:0; background: rgba(0,0,0,.55); z-index:2000;
  justify-content:center; align-items:center; padding:20px;
}
.modal-content{
  background:#fff; padding:24px; border-radius:12px; max-width:640px; width:100%;
  box-shadow: var(--shadow-lg); animation: fadeIn .25s ease; position:relative;
}
.modal-content h2{ margin:0 0 12px; font-size:1.3rem; font-weight:700; color:#1d1d1f; }
.modal-content p{ margin:0 0 12px; line-height:1.6; color:#333; }
.modal-close{ position:absolute; right:16px; top:12px; font-size:1.5rem; color:#666; cursor:pointer; transition: color .2s; }
.modal-close:hover{ color:#000; }
@keyframes fadeIn{ from{ opacity:0; transform: translateY(-10px);} to{ opacity:1; transform: translateY(0);} }

/* ============================================================================
   10) NEWS LIST (список новостей)
   ========================================================================== */

.news-item{
  display:flex; align-items:flex-start; gap:14px; margin-bottom:16px; padding:14px; background:#fff;
  border:1px solid #eee; border-radius:12px; box-shadow: var(--shadow-sm);
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.news-item:hover{ transform: translateY(-1px); box-shadow: var(--shadow-md); border-color:#e6e6e6; }

.preview-img{
  flex:0 0 160px; aspect-ratio: 4/3; width:160px; height:auto; object-fit:contain;
  background: var(--color-bg-secondary); border:1px solid #eee; border-radius:10px; box-shadow: inset 0 1px 2px rgba(0,0,0,.03);
}
.news-text{ flex:1 1 auto; min-width:0; }
.news-text h2{ margin:0 0 6px; font-weight:700; line-height:1.25; font-size: clamp(1.05rem, .98rem + .4vw, 1.35rem); }
.news-text h2 .news-link{ color:inherit; text-decoration:none; border-bottom:1px solid transparent; transition: color .15s, border-color .15s; }
.news-text h2 .news-link:hover, .news-text h2 .news-link:focus{ color: var(--color-ui-primary); text-decoration: underline; text-underline-offset:3px; text-decoration-thickness:2px; }
.news-text h2 .news-link:focus{ outline:none; }
.news-text p{
  margin:0 0 8px; color:#444; line-height:1.6; font-size:.98rem;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.news-text small{ display:inline-block; color:#888; font-size:.9rem; }
.news-item:hover .news-link{ color: var(--color-ui-primary); }

@media (max-width: var(--bp-sm)) {
  .news-item{ flex-direction:column; gap:10px; padding:12px; border-radius:10px; }
  .preview-img{ width:100%; flex-basis:auto; aspect-ratio: 16/9; }
  .news-text p{ -webkit-line-clamp:4; }
}
@media (prefers-reduced-motion: reduce){ .news-item, .news-text h2 .news-link{ transition:none; } }

/* ============================================================================
   11) NEWS VIEW (страница новости)
   ========================================================================== */

.news-one{ background:#fff; padding:8px 20px 16px; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.news-one h1{
  margin:8px 0 6px; font-weight:700; line-height:1.2; font-size: clamp(1.5rem, 1.2rem + 1vw, 2.25rem); letter-spacing:.2px; overflow-wrap:anywhere;
}
.news-one small{ color:#777; display:inline-block; margin-bottom:8px; }
.news-one-data{
  display:block; margin:6px 0 18px; font-size:.9rem; line-height:1.4; color:#888; letter-spacing:.3px;
}
.news-one-data::before{ content:"📅 "; font-size:.95em; }

.back{ margin: 20px 0; }
.back #backToList, .back .back-to-search{
  display:inline-flex; align-items:center; gap:6px; padding:8px 14px; font-size:.95rem; font-weight:500;
  color:#1a73e8; background:#f3f7ff; border:1px solid #d0e0ff; border-radius:8px; cursor:pointer; text-decoration:none;
  transition: background .2s, border-color .2s, color .2s, transform .12s;
}
.back #backToList:hover, .back .back-to-search:hover{ background:#e6efff; border-color:#b0caff; color:#0f5ad4; transform: translateY(-1px); }
.back #backToList:focus, .back .back-to-search:focus{ outline:2px solid #99c2ff; outline-offset:2px; }

.news-content{
  background:#fff; font-size:1.0625rem; line-height:1.7; color:#222; margin:16px 0 24px;
}
.news-content p{ margin:0 0 1em; }
.news-content h2, .news-content h3, .news-content h4{ margin:1.2em 0 .6em; line-height:1.3; }
.news-content ul, .news-content ol{ margin:.8em 0 1em; padding-left:1.4em; }
.news-content li{ margin:.3em 0; }
.news-content a{ text-decoration:underline; text-underline-offset:2px; }
.news-content blockquote{ margin:1em 0; padding:.8em 1em; border-left:4px solid #e3e3e3; background:#fafafa; border-radius:8px; }
.news-content img{ max-width:100%; height:auto; border-radius:10px; display:block; margin:1em 0; }
.news-content table{ width:100%; border-collapse:collapse; margin:1em 0; font-size:.95em; }
.news-content th, .news-content td{ border:1px solid #eee; padding:.55em .7em; }
.news-content pre, .news-content code{ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.news-content pre{ background:#0f0f0f08; padding:.9em 1em; border-radius:8px; overflow:auto; }

.news-gallery{
  display:flex; flex-wrap:wrap; gap:12px; align-items:flex-start;
}
.news-gallery img{
  max-width:300px; max-height:300px; width:auto; height:auto; object-fit:contain;
  border-radius:10px; display:block; background:#f6f6f6; box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
@media (max-width: var(--bp-xs)) { .news-gallery img{ max-width:45vw; max-height:45vw; } }

/* ============================================================================
   12) LOADER (глобальный)
   ========================================================================== */

#app-loader{
  position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center;
  pointer-events:none; opacity:0; transition: opacity .18s ease;
}
#app-loader.visible{ opacity:1; pointer-events:auto; }
#app-loader .app-loader-backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.15); backdrop-filter: blur(2px); }
#app-loader .app-loader-box{
  position:relative; z-index:1; min-width:180px; padding:16px 20px; border-radius:16px; background: var(--white);
  box-shadow: var(--shadow-lg); display:flex; align-items:center; gap:12px;
}
#app-loader .lds-ring{ position:relative; width:40px; height:40px; }
#app-loader .lds-ring div{
  box-sizing:border-box; position:absolute; width:40px; height:40px; border:4px solid var(--gray-300);
  border-top-color: var(--color-ui-primary); border-radius:50%; animation: app-ring 1s linear infinite;
  border-color: var(--gray-300) transparent transparent transparent;
}
#app-loader .lds-ring div:nth-child(1){ animation-delay: -0.45s; }
#app-loader .lds-ring div:nth-child(2){ animation-delay: -0.3s; }
#app-loader .lds-ring div:nth-child(3){ animation-delay: -0.15s; }
@keyframes app-ring{ 0%{ transform: rotate(0deg);} 100%{ transform: rotate(360deg);} }
#app-loader .app-loader-text{ font-size:14px; color: var(--text-color); opacity:.9; }

/* ============================================================================
   13) SITE PAGES (Контакты) + утилиты
   ========================================================================== */

.site-page{ background:transparent; padding:16px 0 24px; }
.site-page > h1{
  margin:0 0 16px; font-weight:800; line-height:1.2; font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem);
  color:#1d1d1f; letter-spacing:.2px;
}
.site-page .site-page-content{ margin:12px 0 20px; padding: 20px; background:#fff; color:#333; line-height:1.7; font-size:1.05rem; }

.contactcard{
  display:grid; gap:14px; padding:16px; border-radius:14px; background:#fff; border:1px solid #eee; box-shadow: var(--shadow-sm);
  margin:10px 0 20px;
}
.contactcard > div{ display:flex; flex-wrap:wrap; align-items:flex-start; gap:8px 12px; }
.contactcard .title{ font-weight:700; color:#111; }
.icon{ display:inline-block; vertical-align:middle; }

.contactcard h4, .site-page h3.title{
  margin:8px 0 12px; font-size: clamp(1.05rem, 1rem + .3vw, 1.25rem); font-weight:800; color:#1d1d1f;
}

.boss{
  position:relative; display:grid; grid-template-columns:96px 1fr; gap:12px; padding:14px; border:1px solid #f0f0f0;
  border-radius:12px; background:#fafafa;
}
.boss img{ width:96px; height:96px; border-radius:10px; object-fit:cover; background:#f3f3f3; border:1px solid #ececec; }
.boss__name{
  display:inline-block; font-weight:800; font-size:1.05rem; color:#111; margin:2px 0 6px; border-bottom:2px solid rgba(0,0,0,.08); padding-bottom:4px;
}
.boss > div span:first-child{ font-weight:700; }
.boss > div{ color:#333; line-height:1.6; }

.substitutors{ display:grid; gap:12px; padding-top:6px; }
.substitutors .person{
  display:grid; grid-template-columns:72px 1fr; gap:12px; padding:12px; border:1px solid #f0f0f0; border-radius:12px; background:#fff; box-shadow: 0 1px 6px rgba(0,0,0,.03);
}
.substitutors .person img{ width:72px; height:72px; object-fit:cover; border-radius:10px; background:#f6f6f6; border:1px solid #ececec; }
.substitutor-info{ display:grid; gap:4px; color:#333; }
.substitutor-info .person__name{ font-weight:800; color:#111; padding-bottom:4px; border-bottom:2px solid rgba(0,0,0,.08) !important; }

.areainfo-masters-wrap{ margin:12px 0; }
.areainfo.areainfo--masters{
  display:grid; gap:8px; padding:14px; border-radius:12px; background:#fff; border:1px solid #eee; box-shadow: 0 1px 6px rgba(0,0,0,.04);
}
.areainfo--masters .center > div{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.areainfo--masters .red{ color: var(--color-ui-primary); font-weight:800; margin-left:6px; }
.redcircle{
  display:inline-flex; align-items:center; justify-content:center; min-width:22px; height:22px; padding:0 6px; border-radius:999px;
  background: var(--color-ui-primary); color:#fff; font-weight:800; font-size:.9rem;
}
.areainfo--masters > div span{ line-height:1.65; color:#333; }
.multiphone{ display:flex; align-items:center; gap:8px; padding-top:2px; }
.multiphone span{ font-weight:700; color:#111; }

.tree-menu.tree-menu--masters{
  margin:8px 0 16px; border-radius:12px; overflow:hidden; border:1px solid #eee; background:#fff;
}
.tree-menu .items{ margin:0; }
.tree-menu .item > header{ padding:12px 14px; font-weight:800; background:#f7f9ff; color:#0f1a2b; border-bottom:1px solid #eef2ff; }
.tree-menu .item.active > header{ background:#eef4ff; }
.tree-menu .content{ padding:12px 14px; }
.content--pd-bg{ background:#fff; }

.contacttable{ width:100%; border-collapse:collapse; font-size:.98rem; }
.contacttable thead th{
  text-align:left; font-weight:800; color:#0f1a2b; background:#f7f9ff; border-bottom:1px solid #eef2ff; padding:10px 12px;
}
.contacttable tbody td{ border-bottom:1px solid #f2f2f2; padding:10px 12px; color:#333; }
.contacttable tbody tr:hover{ background:#fafcff; }

.site-page .icon--contacts--geo::before{ content:"📍"; margin-right:4px; }
.site-page .icon--contacts--time::before{ content:"⏰"; margin-right:4px; }
.icon--personred::before{ content:"👤"; margin-right:6px; }
.site-page span{ word-break: break-word; }

@media (max-width: 720px){
  .boss{ grid-template-columns:72px 1fr; }
  .boss img{ width:72px; height:72px; }
  .substitutors .person{ grid-template-columns:56px 1fr; }
  .substitutors .person img{ width:56px; height:56px; }
}
@media (max-width: 520px){
  .contactcard{ padding:12px; }
  .areainfo.areainfo--masters{ padding:12px; }
  .tree-menu .content{ padding:10px 12px; }
  .tree-menu .item > header{ padding:10px 12px; }
}

/* ============================================================================
   14) ABOUT (структура, документы)
   ========================================================================== */

.structure__top-person{ margin:20px 0 28px; display:flex; justify-content:flex-start; }
.structure__person{
  display:flex; align-items:flex-start; gap:16px; padding:16px; border-radius:14px; border:1px solid #eee; background:#fff; box-shadow: var(--shadow-sm);
}
.structure__person-img img{ width:100px; height:100px; border-radius:12px; object-fit:cover; border:1px solid #ddd; background:#f7f7f7; }
.structure__person-inf{ display:flex; flex-direction:column; gap:6px; color:#333; line-height:1.6; }
.structure__person-name{ font-weight:800; font-size:1.1rem; color:#111; }
.structure__person-post{ font-size:.95rem; color:#555; }
.structure__person-tel{ margin-left:auto; font-weight:600; color: var(--color-ui-primary); }

.tree-menu{ margin:12px 0 20px; border-radius:12px; border:1px solid #eaeaea; background:#fff; box-shadow: 0 1px 6px rgba(0,0,0,.04); }
.tree-menu .items{ margin:0; padding:0; }
.tree-menu .item{ border-bottom:1px solid #f0f0f0; }
.tree-menu .item:last-child{ border-bottom:none; }
.structure__item-header{
  padding:14px 16px; font-weight:700; font-size:1rem; background:#f8faff; color:#111; display:flex; justify-content:space-between; align-items:center; cursor:pointer;
  transition: background .2s ease;
}
.structure__item-header:hover{ background:#eef4ff; }
.structure__item-header-ico{ width:16px; height:auto; opacity:.6; }
.structure__item-content{ padding:14px 16px; color:#333; font-size:.96rem; line-height:1.6; }

.documents-acc{ margin:20px 0 28px; }
.doc-desc{ padding:10px 14px; border-radius:8px; background:#fafafa; border:1px solid #eee; font-size:.95rem; color:#333; line-height:1.5; }
.site-page h3{
  margin:28px 0 16px; font-weight:800; font-size:1.3rem; color:#1d1d1f; border-left:4px solid var(--color-ui-primary); padding-left:10px;
}

@media (max-width: var(--bp-sm)){
  .structure__person{ flex-direction:column; align-items:center; text-align:center; }
  .structure__person-img img{ width:80px; height:80px; }
  .structure__person-tel{ margin:8px 0 0; }
  .structure__item-header{ font-size:.95rem; padding:12px 14px; }
  .structure__item-content{ padding:12px 14px; }
}

/* ============================================================================
   15) SEARCH PAGE (результаты, лоадер, бесконечная прокрутка)
   ========================================================================== */

#search-shell{ background:transparent; padding:12px 0 24px; }
#search-shell > h2{
  margin:0 0 12px; font-weight:800; line-height:1.2; font-size: clamp(1.3rem, 1rem + 1vw, 1.8rem); color:#1d1d1f;
}
#search-summary{ margin:0 0 16px; color:#444; line-height:1.6; font-size:.98rem; }
#search-summary strong{ color: var(--color-ui-primary); }

#search-results{ display:grid; gap:12px; }
.search-item{
  display:grid; gap:6px; padding:14px; border-radius:12px; background:#fff; border:1px solid #eee; box-shadow: var(--shadow-sm);
  transition: border-color .2s, box-shadow .2s, transform .15s;
}
.search-item:hover{ transform: translateY(-1px); border-color:#e6e6e6; box-shadow: var(--shadow-md); }
.search-item h3{ margin:0; line-height:1.25; font-size: clamp(1.02rem, .95rem + .4vw, 1.25rem); font-weight:800; }
.search-link{
  color:#111; text-decoration:none; border-bottom:2px solid transparent; transition: color .15s, border-color .15s, text-decoration-color .15s;
}
.search-link:hover, .search-link:focus{ color: var(--color-ui-primary); border-bottom-color: currentColor; text-decoration:none; outline:none; }
.search-item p{
  margin:0; color:#444; line-height:1.6; font-size:.98rem;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.search-item small{ color:#777; font-size:.9rem; }

#search-empty{
  margin:16px 0; padding:16px; border-radius:12px; background:#fff8f8; color:#8a2c2c; border:1px solid #ffdede; display:none;
}
#loader{ margin:16px 0; display:none; }
#loader::before{
  content:""; display:inline-block; width:28px; height:28px; border:3px solid #d3d3d3; border-top-color: var(--color-ui-primary);
  border-radius:50%; animation: search-ring 1s linear infinite; vertical-align:middle; margin-right:10px;
}
@keyframes search-ring{ to{ transform: rotate(360deg);} }
#search-sentinel{ height:1px; }

@media (max-width: var(--bp-sm)){
  #search-shell{ padding:8px 0 18px; }
  #search-results{ gap:10px; }
  .search-item{ padding:12px; }
  .search-item p{ -webkit-line-clamp:4; }
}

/* ============================================================================
   16) RESPONSIVE TWEAKS (общие корректировки)
   ========================================================================== */

@media (max-width: var(--bp-lg)){
  .header-contacts{ padding-top: 10px; text-align:left; }
  .main-menu-content{ flex-direction: row; } /* оставляем горизонтально, но с переносом */
}
@media (max-width: var(--bp-sm)){
  .header-logo img{ height: 110px; }
  .main-menu-content{ gap: 6px; }
  .search{ margin-left:0; width:100%; }
}
@media (max-width: var(--bp-xs)){
  .header-logo img{ height: 90px; }
}

/* Уважение к системным настройкам анимации */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}