:root{
  /* фоновые зоны */
  --top-grad-1:#666600;
  --top-grad-2:#669933;

  --page-bg:#252525;      /* средний фон (вся страница под шапкой) */
  --panel-bg:#2d2d2d;     /* фон блоков с текстом */
  --panel-line:#1c1c1c;

  /* меню */
  --menu-yellow:#d7d32e;
  --menu-yellow-2:#c8c21f;

  /* тексты */
  --text:#f0f0f0;
  --muted:#cfcfcf;

  /* разделитель-заголовки (коричневые полосы) */
  --accent:#7b4a2b;
  --accent-2:#5d3620;

  --max:1100px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--text);
  background: var(--page-bg);   /* ВАЖНО: теперь основной фон тёмный */
  min-height:100vh;
  display:flex;
  flex-direction:column;

}

a{color:#fff;text-decoration:none}
a:hover{text-decoration:underline}

.container{max-width:var(--max);margin:0 auto;padding:0 14px}

/* Верхняя зона как на макете: зелёный градиент только в шапке */
.header{
  padding:12px 0 0;
  background: linear-gradient(0deg, var(--top-grad-1), var(--top-grad-2));
}

/* шапка картинкой */
.header__img{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  padding:6px 0 2px;
}
.header__img img{
  display:block;
  border:2px solid #1a1a1a;
  width: 45%;          /* ~2.5x меньше */
  max-width: 650px;
  height: auto;
}
@media (max-width: 980px){
  .header__img img{ width: 85%; max-width: 650px; }
}

/* Меню — жёлтые кнопки на зелёном фоне */
.menu{ margin-top:14px; margin-bottom:0; }
.menu__row{ display:flex; gap:0; flex-wrap:wrap; }
.menu__row a{
  background:linear-gradient(0deg,var(--menu-yellow-2),var(--menu-yellow));
  color:#1a1a1a;
  padding:12px 26px;
  border-left:1px solid #1a1a1a;
  border-right:1px solid #1a1a1a;
  border-top:2px solid #1a1a1a;
  border-bottom:2px solid #1a1a1a;
  font-weight:700;
}
.menu__row a.active{ filter:brightness(.92); }

/* Контентная зона */
.main{ flex:1; padding:0; }

/* Сетка: центр + правая колонка */
.grid{
  display:grid;
  grid-template-columns: 1fr 300px;
  gap:14px;
}

/* Блоки с текстом — отдельный фон 2d2d2d */
.panel{
  background:var(--panel-bg);
  border:1px solid var(--panel-line);
  box-shadow: 0 0 0 1px rgba(0,0,0,.25) inset;
  padding:18px;
}

.h1{ margin:0 0 10px; font-size:28px; }
.h2{ margin:18px 0 8px; font-size:22px; }

.sep{
  height:18px;
  background:linear-gradient(0deg,var(--accent-2),var(--accent));
  margin:10px 0 14px;
}

.p{ margin:0 0 12px; color:var(--muted); }

.ul{ margin:10px 0 0; padding-left:18px; color:var(--muted); }
.ul li{ margin:6px 0; }

/* Правая колонка */
.sidebar .panel{ padding:14px; }
.contact{
  border:1px solid var(--panel-line);
  padding:12px;
  margin-bottom:12px;
  color:var(--muted);
}
.contact b{ color:#fff; }

.login-card{
  border:1px solid var(--panel-line);
  padding:12px;
  text-align:center;
}
.login-card img{
  max-width:100%;
  height:auto;
  display:block;
  margin:0 auto;
}

/* Подвал — жёлтый как в макете */
.footer{
  background:linear-gradient(0deg,var(--menu-yellow-2),var(--menu-yellow));
  color:#1a1a1a;
  border-top:2px solid #1a1a1a;
  padding:14px 0;
  text-align:center;
  font-weight:700;
}
.footer a{ color:#1a1a1a; text-decoration:underline; }

@media (max-width: 980px){
  .grid{ grid-template-columns:1fr; }
}

/* --- equal-height columns/panels like in the mockup --- */
.grid{ align-items: stretch; }
.panel{ height: 100%; }

/* sidebar is a column with two blocks */
.sidebar{ display:flex; flex-direction:column; gap:14px; }
.sidebar .panel{ height:auto; } /* панели внутри сайдбара по контенту */

/* --- equal-height columns/panels like in the mockup --- */
.grid{ align-items: stretch; }
.panel{ height: 100%; }

/* sidebar is a column with two blocks */
.sidebar{ display:flex; flex-direction:column; gap:14px; }
.sidebar .panel{ height:auto; } /* панели внутри сайдбара по контенту */

/* --- equal-height columns/panels like in the mockup --- */
.grid{ align-items: stretch; }
.panel{ height: 100%; }

/* sidebar is a column with two blocks */
.sidebar{ display:flex; flex-direction:column; gap:14px; }
.sidebar .panel{ height:auto; } /* панели внутри сайдбара по контенту */
sed -i 's/\.menu{ margin-top:10px; }/\.menu{ margin-top:auto; margin-bottom:0; }/g' landing/site/assets/theme-vent.css


cd /opt/ventpassport/app

cat >> landing/site/assets/theme-vent.css <<'CSS'

/* --- equal-height columns/panels like in the mockup --- */
.grid{ align-items: stretch; }
.panel{ height: 100%; }

/* sidebar is a column with two blocks */
.sidebar{ display:flex; flex-direction:column; gap:14px; }
.sidebar .panel{ height:auto; } /* панели внутри сайдбара по контенту */

/* --- equal-height columns/panels like in the mockup --- */
.grid{ align-items: stretch; }
.panel{ height: 100%; }

/* sidebar is a column with two blocks */
.sidebar{ display:flex; flex-direction:column; gap:14px; }
.sidebar .panel{ height:auto; } /* панели внутри сайдбара по контенту */

/* --- equal-height columns/panels like in the mockup --- */
.grid{ align-items: stretch; }
.panel{ height: 100%; }

/* sidebar is a column with two blocks */
.sidebar{ display:flex; flex-direction:column; gap:14px; }
.sidebar .panel{ height:auto; } /* панели внутри сайдбара по контенту */
Css

/* --- big content block from header to footer --- */
.container.grid{
  background: var(--panel-bg);      /* #2d2d2d */
  padding: 14px;
  margin-top: 0;
  margin-bottom: 0;
}

/* stretch the big content block to the footer */
.main{ display:flex; }                 /* so child can stretch */
.main > .container.grid{ min-height:100%; flex:1; }

/* keep grid layout inside stretched container */
.container.grid{ align-content: stretch; }

/* Bootstrap icons in contacts */
.contact .bi{
  margin-right: 8px;
  font-size: 18px;
  vertical-align: -2px;
  color: #ffffff;
}

.header__img a{ display:inline-block; }
.header__img a:hover{ text-decoration:none; }

/* --- FORCE logo size (final override) --- */
.header__img img{
  width: 45% !important;
  max-width: 650px !important;
  height: auto !important;
}
@media (max-width: 980px){
  .header__img img{ width: 92% !important; max-width: 650px !important; }
}

/* footer font smaller */
.footer{ font-size: 13px; }

/* --- FORCE logo size (final override) --- */
.header__img img{
  width: 55% !important;
  max-width: 650px !important;
  height: auto !important;
}
@media (max-width: 980px){
  .header__img img{ width: 92% !important; max-width: 650px !important; }
}

/* Word-like document text (personal-data / offer) */
.doc-text p{ margin: 0 0 12px; color: var(--muted); }
.doc-text p b, .doc-text b{ color: var(--text); }
.doc-text a{ color:#fff; text-decoration: underline; }

/* Word-like document typography */
.doc-text .doc-title{
  margin: 0 0 14px;
  font-size: 20px;
  font-weight: 800;
  color: var(--text);
}
.doc-text p{ margin: 0 0 10px; color: var(--muted); }
.doc-text p b, .doc-text b{ color: var(--text); }
.doc-text a{ color:#fff; text-decoration: underline; }

/* numbered levels like Word (hanging indent) */
.doc-text p.lvl1, .doc-text p.lvl2, .doc-text p.lvl3{
  margin: 0 0 8px;
}
.doc-text p.lvl1{ padding-left: 2.4em; text-indent: -2.4em; }
.doc-text p.lvl2{ padding-left: 3.2em; text-indent: -3.2em; }
.doc-text p.lvl3{ padding-left: 4.0em; text-indent: -4.0em; }

.doc-text p.lvl1 .num{ display:inline-block; width: 2.4em; color: var(--text); font-weight: 700; }
.doc-text p.lvl2 .num{ display:inline-block; width: 3.2em; color: var(--text); font-weight: 700; }
.doc-text p.lvl3 .num{ display:inline-block; width: 4.0em; color: var(--text); font-weight: 700; }

/* --- Personal-data doc: compact Word-like indentation (no overflow) --- */
.doc-text{ overflow-wrap: anywhere; word-break: break-word; }

.doc-text .doc-title{
  margin: 0 0 12px;
  font-size: 18px;      /* меньше */
  font-weight: 600;     /* без "жирного" */
  color: var(--text);
}

.doc-text p{ margin: 0 0 10px; color: var(--muted); }

.doc-text p.lvl1, .doc-text p.lvl2, .doc-text p.lvl3{
  text-indent: 0 !important;
  padding-left: 0 !important;
}

/* маленькие отступы как "1-2 пробела" */
.doc-text p.lvl1{ margin-left: 0.6em; }
.doc-text p.lvl2{ margin-left: 1.2em; }
.doc-text p.lvl3{ margin-left: 1.8em; }

/* номер просто с одним пробелом после него */
.doc-text .num{
  display: inline;
  font-weight: 600;
  color: var(--text);
  margin-right: .35em;
}

/* --- Personal-data doc: compact Word-like indentation (no overflow) --- */
.doc-text{ overflow-wrap: anywhere; word-break: break-word; }

.doc-text .doc-title{
  margin: 0 0 12px;
  font-size: 16px;      /* меньше */
  font-weight: 500;     /* без "жирного" */
  color: var(--text);
}

.doc-text p{ margin: 0 0 10px; color: var(--muted); }

.doc-text p.lvl1, .doc-text p.lvl2, .doc-text p.lvl3{
  text-indent: 0 !important;
  padding-left: 0 !important;
}

/* маленькие отступы как "1-2 пробела" */
.doc-text p.lvl1{ margin-left: 0.6em; }
.doc-text p.lvl2{ margin-left: 1.2em; }
.doc-text p.lvl3{ margin-left: 1.8em; }

/* номер просто с одним пробелом после него */
.doc-text .num{
  display: inline;
  font-weight: 600;
  color: var(--text);
  margin-right: .35em;
}

/* --- Personal-data doc: compact Word-like indentation (no overflow) --- */
.doc-text{ overflow-wrap: anywhere; word-break: break-word; }

.doc-text .doc-title{
  margin: 0 0 12px;
  font-size: 18px;      /* меньше */
  font-weight: 500;     /* без "жирного" */
  color: var(--text);
}

.doc-text p{ margin: 0 0 10px; color: var(--muted); }

.doc-text p.lvl1, .doc-text p.lvl2, .doc-text p.lvl3{
  text-indent: 0 !important;
  padding-left: 0 !important;
}

/* маленькие отступы как "1-2 пробела" */
.doc-text p.lvl1{ margin-left: 0.6em; }
.doc-text p.lvl2{ margin-left: 1.2em; }
.doc-text p.lvl3{ margin-left: 1.8em; }

/* номер просто с одним пробелом после него */
.doc-text .num{
  display: inline;
  font-weight: 600;
  color: var(--text);
  margin-right: .35em;
}
.doc-text .num{ font-weight: 400 !important; }

/* License offer: first two title lines same size as personal-data title */
body:has(title) .doc-text.license-offer p:nth-of-type(1) b,
body:has(title) .doc-text.license-offer p:nth-of-type(2) b{
  font-size: 18px;
  font-weight: 600;
}

/* License offer: make 1st and 2nd paragraphs look like the personal-data title */
.doc-text.license-offer p:nth-of-type(1) b,
.doc-text.license-offer p:nth-of-type(2) b{
  font-size: 18px;
  font-weight: 600;
}

/* License offer: make 1st and 2nd paragraphs look like the personal-data title */
.doc-text.license-offer p:nth-of-type(1) b,
.doc-text.license-offer p:nth-of-type(2) b{
  font-size: 18px;
  font-weight: 800;
}

/* License offer: bold first two title lines */
.doc-text.license-offer p:nth-of-type(1) b,
.doc-text.license-offer p:nth-of-type(2) b{
  font-weight: 800;
}

/* License offer: bold + title-size for "Оферта..." and "Лицензионный договор" */
.doc-text.license-offer p:nth-of-type(1) b,
.doc-text.license-offer p:nth-of-type(4) b{
  font-size: 18px;
  font-weight: 800;
}