/* ===== about.html ===== */

    :root { color-scheme: light; }
    *, *::before, *::after { box-sizing: border-box; }

    body{
      margin:0;
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      background:#f6f7fb;
      color:#111;
    }
    a{ color:#1b66ff; text-decoration:none; }
    a:hover{ text-decoration:underline; }

    .wrap{ max-width: 1200px; margin: 0 auto; padding: 18px; }

    .topbar{
      background:#fff;
      border-radius: 14px;
      box-shadow: 0 8px 24px rgba(0,0,0,.06);
      padding: 14px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 12px;
      flex-wrap: wrap;
      margin-bottom: 16px;
    }
    .brand {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-left: 60px;
    position: relative;
    min-height: 50px;
    padding-top: 5px;
}
    .brand b{ font-size: 16px; }
    .brand span{ font-size: 12px; color:#666; }

    .menu{
      display:flex;
      gap: 10px;
      flex-wrap: wrap;
      align-items:center;
      justify-content:flex-start;
    }
    .menu a{
      display:inline-flex;
      align-items:center;
      gap: 8px;
      padding: 8px 10px;
      border-radius: 999px;
      background:#f6f7fb;
      border: 1px solid #eef0f7;
      font-weight: 800;
      font-size: 13px;
      color:#111;
      text-decoration:none;
    }
    .menu a:hover{ text-decoration:underline; }
    .menu a.active{
      background:#f0f3ff;
      border-color:#dbe6ff;
      color:#1b66ff;
      text-decoration:none;
    }

    .grid{
      display:grid;
      grid-template-columns: 1.3fr .7fr;
      gap: 16px;
      margin-top: 16px;
    }
    @media (max-width: 980px){
      .grid{ grid-template-columns: 1fr; }
    }

    .card{
      background:#fff;
      border-radius: 14px;
      box-shadow: 0 8px 24px rgba(0,0,0,.06);
      padding: 18px;
      overflow:hidden;
    }

    h1{ margin: 0 0 10px; font-size: 24px; letter-spacing: -0.02em; }
    h2{ margin: 18px 0 8px; font-size: 18px; }
    p, li{ line-height: 1.6; color:#222; }
    ul{ margin: 8px 0 0 18px; }

    .muted{ color:#666; font-size: 13px; }

    .pill{
      display:inline-block;
      padding: 6px 10px;
      border-radius: 999px;
      background:#f0f3ff;
      color:#1b66ff;
      font-weight: 900;
      font-size: 12px;
      margin-bottom: 10px;
    }

    .box{
      border: 1px solid #eef0f7;
      border-radius: 14px;
      padding: 14px;
      background:#fff;
      margin-top: 12px;
    }

    .side-link{
      display:block;
      padding: 10px 12px;
      border-radius: 14px;
      border: 1px solid #eef0f7;
      background:#fff;
      margin-top: 10px;
      font-weight: 800;
      color:#111;
    }
    .side-link small{
      display:block;
      margin-top: 4px;
      font-weight: 600;
      color:#666;
    }

    .ad{
  display:none;

      border: 1px dashed #cfd3e6;
      border-radius: 14px;
      padding: 14px;
      color:#667;
      font-size: 13px;
      background: #fafbff;
      margin-top: 12px;
    }

    footer{
      margin-top: 16px;
      color:#666;
      font-size: 12px;
      padding: 10px 2px;
    }
  
/* Brand logo */
.brand {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-left: 60px;
    position: relative;
    min-height: 50px;
    padding-top: 5px;
}
.brand__logo {
    flex: 0 0 auto;
    width: 50px;
    height: 50px;
    border-radius: 12px;
    position: absolute;
    left: 0;
    top: 0;
}



/* ===== how.html ===== */


    :root { color-scheme: light; }
    *, *::before, *::after { box-sizing: border-box; }

    body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:#f6f7fb;color:#111;}
    .wrap{max-width:1040px;margin:0 auto;padding:18px;}

    /* Topbar / Menu */
    .topbar{
      background:#fff;
      border-radius: 14px;
      box-shadow: 0 8px 24px rgba(0,0,0,.06);
      padding: 14px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 12px;
      flex-wrap: wrap;
      margin-bottom: 16px;
    }
    .brand {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-left: 60px;
    position: relative;
    min-height: 50px;
    padding-top: 5px;
}
    .brand b{ font-size: 16px; }
    .brand span{ font-size: 12px; color:#666; }

    .menu{
      display:flex;
      gap: 10px;
      flex-wrap: wrap;
      align-items:center;
      justify-content:flex-end;
    }
    .menu a{
      display:inline-flex;
      align-items:center;
      gap: 8px;
      padding: 8px 10px;
      border-radius: 999px;
      background:#f6f7fb;
      border: 1px solid #eef0f7;
      font-weight: 800;
      font-size: 13px;
      color:#111;
      text-decoration:none;
    }
    .menu a:hover{ text-decoration:underline; }
    .menu a.active{
      background:#f0f3ff;
      border-color:#dbe6ff;
      color:#1b66ff;
      text-decoration:none;
    }

    .card{background:#fff;border-radius:14px;box-shadow:0 8px 24px rgba(0,0,0,.06);padding:18px;}
    a{color:#1b66ff;text-decoration:none;font-weight:700;}
    a:hover{text-decoration:underline;}
    h1{margin:0 0 10px;font-size:24px;}
    h2{margin:18px 0 8px;font-size:18px;}
    p,li{color:#222;line-height:1.55;}
    .muted{color:#666;font-size:13px;}
    code{background:#f2f4ff;padding:2px 6px;border-radius:8px;}
    .ad{
  display:none;
border:1px dashed #cfd3e6;border-radius:14px;padding:14px;color:#667;font-size:13px;background:#fafbff;margin:14px 0;}

    details{
      border:1px solid #eef0f7;
      border-radius: 14px;
      padding: 12px 14px;
      margin-top: 10px;
      background:#fff;
    }
    summary{ cursor:pointer; font-weight:900; color:#111; }
    details p{ margin: 10px 0 0; }

  
/* Brand logo */
.brand {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-left: 60px;
    position: relative;
    min-height: 50px;
    padding-top: 5px;
}
.brand__logo {
    flex: 0 0 auto;
    width: 50px;
    height: 50px;
    border-radius: 12px;
    position: absolute;
    left: 0;
    top: 0;
}



/* ===== index.html ===== */

    :root { color-scheme: light; }

    /* ✅ фикс “слипаний/вылазов” */
    *, *::before, *::after { box-sizing: border-box; }

    body { margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background:#f6f7fb; color:#111; }
    .wrap { max-width: 1200px; margin: 0 auto; padding: 20px; }
    header { display:flex; gap:14px; align-items:center; justify-content:space-between; padding: 10px 0 18px; }
    .brand {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-left: 60px;
    position: relative;
    min-height: 50px;
    padding-top: 5px;
}
    .brand b { font-size: 18px; }
    .brand span { color:#555; font-size: 13px; }
    nav a { color:#1b66ff; text-decoration:none; font-weight:600; }
    nav a:hover { text-decoration: underline; }

    /* Topbar / Menu (единый стиль для всех страниц) */
    .topbar{
      background:#fff;
      border-radius: 14px;
      box-shadow: 0 8px 24px rgba(0,0,0,.06);
      padding: 14px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 12px;
      flex-wrap: wrap;
      margin-bottom: 16px;
    }
    .menu{
      display:flex;
      gap: 10px;
      flex-wrap: wrap;
      align-items:center;
  justify-content:flex-start;
    }
    .menu a{
      display:inline-flex;
      align-items:center;
      gap: 8px;
      padding: 8px 10px;
      border-radius: 999px;
      background:#f6f7fb;
      border: 1px solid #eef0f7;
      font-weight: 800;
      font-size: 13px;
      color:#111;
      text-decoration:none;
    }
    .menu a:hover{ text-decoration: underline; }
    .menu a.active{
      background:#f0f3ff;
      border-color:#dbe6ff;
      color:#1b66ff;
      text-decoration:none;
    }

    .grid { display:grid; grid-template-columns: 1.2fr .8fr; gap: 16px; }
    @media (max-width: 900px){ .grid { grid-template-columns: 1fr; } }

    .card { background:#fff; border-radius: 14px; box-shadow: 0 8px 24px rgba(0,0,0,.06); padding: 16px; overflow: hidden; }

    .card h2 { margin: 0 0 10px; font-size: 18px; }
    .sub { color:#555; font-size: 13px; margin: 0 0 12px; }

    /* ✅ чтобы grid-элементы не распирали контейнер */
    .row { display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .row > div { min-width: 0; }
    @media (max-width: 520px){ .row { grid-template-columns: 1fr; } }

    label { display:block; font-size: 13px; color:#333; margin-bottom: 6px; }
    input[type="number"], input[type="text"], select{
      width:100%;
      max-width: 100%;
      padding: 10px 12px;
      border: 1px solid #d9dbe7;
      border-radius: 10px;
      outline:none;
      font-size: 14px;
      background:#fff;
      display:block;
    }
    input[type="number"]:focus, input[type="text"]:focus, select:focus{
      border-color:#1b66ff;
      box-shadow: 0 0 0 3px rgba(27,102,255,.14);
    }

    .section { margin-top: 12px; padding-top: 12px; border-top: 1px solid #eef0f7; }
    .section:first-child { margin-top:0; padding-top:0; border-top:0; }

    .btns { display:flex; flex-wrap:wrap; gap:10px; margin-top: 12px; }
    button{
      border:0; border-radius: 12px; padding: 10px 12px; font-weight: 700; cursor:pointer;
      background:#1b66ff; color:#fff;
    }
    button.secondary{ background:#eef2ff; color:#1b66ff; }
    button.danger{ background:#ffecec; color:#b10000; }

    .result { display:grid; gap: 10px; }
    .total { font-size: 28px; font-weight: 900; letter-spacing: -0.02em; }
    .muted { color:#555; font-size: 13px; }

    table { width:100%; border-collapse: collapse; }
    th, td { padding: 10px 8px; border-bottom: 1px solid #eef0f7; font-size: 14px; vertical-align: top; }
    th { text-align:left; color:#333; font-size: 13px; }
    td:last-child, th:last-child { text-align:right; }

    .hint { font-size: 12px; color:#666; line-height: 1.4; }
    .ad {
  display:none;
 border: 1px dashed #cfd3e6; border-radius: 14px; padding: 14px; color:#667; font-size: 13px; background: #fafbff; }
    footer { padding: 18px 0 8px; color:#666; font-size: 12px; }

    .pill { display:inline-block; padding: 6px 10px; border-radius: 999px; background:#f0f3ff; color:#1b66ff; font-weight:700; font-size:12px;}

    /* маленький свитч-блок */
    .switchline { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:10px; }
    .badge { font-size:12px; font-weight:800; padding:6px 10px; border-radius:999px; background:#f6f7fb; border:1px solid #eef0f7; }
    .hidden { display:none !important; }

    /* Печать: показываем только квитанцию */
    .print-area{ display:none; }

@media print {
  body { background:#fff !important; }
  /* скрываем всё */
  body * { visibility: hidden !important; }

  /* показываем только квитанцию */
  #printArea, #printArea * { visibility: visible !important; }
  #printArea{
    display:block !important;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    padding: 16px !important;
  }

  .print-box{
    border: 1px solid #ddd;
    border-radius: 12px;
    padding: 14px;
  }
  .print-title{ font-size:18px; font-weight:900; margin:0 0 10px; }
  .print-meta{ font-size:12px; color:#555; margin:0 0 12px; }
  .print-table{ width:100%; border-collapse: collapse; }
  .print-table th, .print-table td{
    border-bottom: 1px solid #eee;
    padding: 8px 6px;
    font-size: 13px;
  }
  .print-table th:last-child, .print-table td:last-child{ text-align:right; }
  .print-total{ font-size:16px; font-weight:900; text-align:right; margin-top: 10px; }
}
.h1{
  margin:0;
  font-size:18px;   /* как было у <b> */
  font-weight:800;
  line-height:1.1;
}
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@graph": [
    {
      "@type": "WebSite",
      "name": "Калькулятор коммуналки",
      "url": "https://platidom.ru/",
      "inLanguage": "ru-RU"
    },
    {
      "@type": ["SoftwareApplication","WebApplication"],
      "name": "Калькулятор коммуналки",
      "applicationCategory": "FinanceApplication",
      "operatingSystem": "Web",
      "isAccessibleForFree": true,
      "url": "https://platidom.ru/index.html",
      "description": "Онлайн-калькулятор коммунальных платежей по счётчикам: вода, электричество (1/2 тарифа), газ и фиксированные платежи. Печать/сохранение в PDF.",
      "offers": [
        {
          "@type": "Offer",
          "price": "0",
          "priceCurrency": "RUB",
          "availability": "https://schema.org/InStock"
        }
      ]
    }
  ]
}
</script>


  
/* Brand logo */
.brand {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-left: 60px;
    position: relative;
    min-height: 50px;
    padding-top: 5px;
}
.brand__logo {
    flex: 0 0 auto;
    width: 50px;
    height: 50px;
    border-radius: 12px;
    position: absolute;
    left: 0;
    top: 0;
}



/* ===== kak-poschitat-gaz-po-schetchiku.html ===== */

    :root { color-scheme: light; }
    *, *::before, *::after { box-sizing: border-box; }

    body{
      margin:0;
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      background:#f6f7fb;
      color:#111;
    }
    a{ color:#1b66ff; text-decoration:none; }
    a:hover{ text-decoration:underline; }

    .wrap{ max-width: 1200px; margin: 0 auto; padding: 18px; }

    /* Topbar / Menu */
    .topbar{
      background:#fff;
      border-radius: 14px;
      box-shadow: 0 8px 24px rgba(0,0,0,.06);
      padding: 14px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 12px;
      flex-wrap: wrap;
    }
    .brand {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-left: 60px;
    position: relative;
    min-height: 50px;
    padding-top: 5px;
}
    .brand b{ font-size: 16px; }
    .brand span{ font-size: 12px; color:#666; }

    .menu{
      display:flex;
      gap: 10px;
      flex-wrap: wrap;
      align-items:center;
      justify-content:flex-end;
    }
    .menu a{
      display:inline-flex;
      align-items:center;
      gap: 8px;
      padding: 8px 10px;
      border-radius: 999px;
      background:#f6f7fb;
      border: 1px solid #eef0f7;
      font-weight: 800;
      font-size: 13px;
      color:#111;
    }
    .menu a.active{
      background:#f0f3ff;
      border-color:#dbe6ff;
      color:#1b66ff;
    }

    /* Layout */
    .grid{
      display:grid;
      grid-template-columns: 1.3fr .7fr;
      gap: 16px;
      margin-top: 16px;
    }
    @media (max-width: 980px){
      .grid{ grid-template-columns: 1fr; }
    }

    .card{
      background:#fff;
      border-radius: 14px;
      box-shadow: 0 8px 24px rgba(0,0,0,.06);
      padding: 18px;
      overflow:hidden;
    }

    h1{ margin: 0 0 10px; font-size: 26px; letter-spacing: -0.02em; }
    .meta{
      display:flex;
      gap: 10px;
      flex-wrap: wrap;
      align-items:center;
      margin-bottom: 14px;
      color:#666;
      font-size: 13px;
    }
    .pill{
      display:inline-block;
      padding: 6px 10px;
      border-radius: 999px;
      background:#f0f3ff;
      color:#1b66ff;
      font-weight: 900;
      font-size: 12px;
    }

    h2{ margin: 18px 0 8px; font-size: 18px; }
    p, li{ line-height: 1.6; color:#222; }
    ul, ol{ margin: 8px 0 0 18px; }
    code{
      background:#f2f4ff;
      padding: 2px 6px;
      border-radius: 8px;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
      font-size: 0.95em;
    }

    .callout{
      margin-top: 14px;
      border-radius: 14px;
      background:#f6f7fb;
      border:1px solid #eef0f7;
      padding: 14px;
    }
    .callout b{ display:block; margin-bottom: 6px; }

    .steps{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin-top: 10px;
    }
    .steps > div{ min-width:0; }
    @media (max-width: 620px){
      .steps{ grid-template-columns: 1fr; }
    }
    .step{
      border: 1px solid #eef0f7;
      border-radius: 14px;
      padding: 12px;
      background:#fff;
    }
    .step .n{
      font-weight: 900;
      color:#1b66ff;
      margin-bottom: 6px;
    }
    .muted{ color:#666; font-size: 13px; }

    .example{
      margin-top: 12px;
      border-radius: 14px;
      border: 1px solid #eef0f7;
      padding: 14px;
      background:#fff;
    }
    .example-grid{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-top: 10px;
    }
    @media (max-width: 620px){
      .example-grid{ grid-template-columns: 1fr; }
    }
    .example .k{
      font-weight:800;
      margin:0 0 6px;
    }

    /* FAQ */
    details{
      border:1px solid #eef0f7;
      border-radius: 14px;
      padding: 12px 14px;
      margin-top: 10px;
      background:#fff;
    }
    summary{
      cursor:pointer;
      font-weight: 900;
      color:#111;
    }
    details p{ margin: 10px 0 0; }

    /* Sidebar */
    .side-title{ margin:0 0 10px; font-size: 16px; font-weight: 900; }
    .side-link{
      display:block;
      padding: 10px 12px;
      border-radius: 14px;
      border: 1px solid #eef0f7;
      background:#fff;
      margin-top: 10px;
      font-weight: 800;
      color:#111;
    }
    .side-link small{ display:block; margin-top: 4px; font-weight: 600; color:#666; }

    .ad{
  display:none;

      border: 1px dashed #cfd3e6;
      border-radius: 14px;
      padding: 14px;
      color:#667;
      font-size: 13px;
      background: #fafbff;
      margin-top: 12px;
    }

    footer{
      margin-top: 16px;
      color:#666;
      font-size: 12px;
      padding: 10px 2px;
    }
  
/* Brand logo */
.brand {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-left: 60px;
    position: relative;
    min-height: 50px;
    padding-top: 5px;
}
.brand__logo {
    flex: 0 0 auto;
    width: 50px;
    height: 50px;
    border-radius: 12px;
    position: absolute;
    left: 0;
    top: 0;
}



/* ===== kak-poschitat-kommunalku-za-mesyac.html ===== */

    :root { color-scheme: light; }
    *, *::before, *::after { box-sizing: border-box; }

    body{
      margin:0;
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      background:#f6f7fb;
      color:#111;
    }
    a{ color:#1b66ff; text-decoration:none; }
    a:hover{ text-decoration:underline; }

    .wrap{ max-width: 1040px; margin: 0 auto; padding: 18px; }

    /* Topbar / Menu */
    .topbar{
      background:#fff;
      border-radius: 14px;
      box-shadow: 0 8px 24px rgba(0,0,0,.06);
      padding: 14px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 12px;
      flex-wrap: wrap;
    }
    .brand {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-left: 60px;
    position: relative;
    min-height: 50px;
    padding-top: 5px;
}
    .brand b{ font-size: 16px; }
    .brand span{ font-size: 12px; color:#666; }

    .menu{
      display:flex;
      gap: 10px;
      flex-wrap: wrap;
      align-items:center;
      justify-content:flex-end;
    }
    .menu a{
      display:inline-flex;
      align-items:center;
      gap: 8px;
      padding: 8px 10px;
      border-radius: 999px;
      background:#f6f7fb;
      border: 1px solid #eef0f7;
      font-weight: 800;
      font-size: 13px;
      color:#111;
    }
    .menu a.active{
      background:#f0f3ff;
      border-color:#dbe6ff;
      color:#1b66ff;
    }

    /* Layout */
    .grid{
      display:grid;
      grid-template-columns: 1.3fr .7fr;
      gap: 16px;
      margin-top: 16px;
    }
    @media (max-width: 980px){
      .grid{ grid-template-columns: 1fr; }
    }

    .card{
      background:#fff;
      border-radius: 14px;
      box-shadow: 0 8px 24px rgba(0,0,0,.06);
      padding: 18px;
      overflow:hidden;
    }

    h1{ margin: 0 0 10px; font-size: 26px; letter-spacing: -0.02em; }
    .meta{
      display:flex;
      gap: 10px;
      flex-wrap: wrap;
      align-items:center;
      margin-bottom: 14px;
      color:#666;
      font-size: 13px;
    }
    .pill{
      display:inline-block;
      padding: 6px 10px;
      border-radius: 999px;
      background:#f0f3ff;
      color:#1b66ff;
      font-weight: 900;
      font-size: 12px;
    }

    h2{ margin: 18px 0 8px; font-size: 18px; }
    p, li{ line-height: 1.6; color:#222; }
    ul, ol{ margin: 8px 0 0 18px; }
    code{
      background:#f2f4ff;
      padding: 2px 6px;
      border-radius: 8px;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
      font-size: 0.95em;
    }

    .callout{
      margin-top: 14px;
      border-radius: 14px;
      background:#f6f7fb;
      border:1px solid #eef0f7;
      padding: 14px;
    }
    .callout b{ display:block; margin-bottom: 6px; }

    .steps{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin-top: 10px;
    }
    .steps > div{ min-width:0; }
    @media (max-width: 620px){
      .steps{ grid-template-columns: 1fr; }
    }
    .step{
      border: 1px solid #eef0f7;
      border-radius: 14px;
      padding: 12px;
      background:#fff;
    }
    .step .n{
      font-weight: 900;
      color:#1b66ff;
      margin-bottom: 6px;
    }
    .muted{ color:#666; font-size: 13px; }

    .example{
      margin-top: 12px;
      border-radius: 14px;
      border: 1px solid #eef0f7;
      padding: 14px;
      background:#fff;
    }
    .example-grid{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-top: 10px;
    }
    @media (max-width: 620px){
      .example-grid{ grid-template-columns: 1fr; }
    }
    .example .k{
      font-weight:800;
      margin:0 0 6px;
    }

    /* FAQ */
    details{
      border:1px solid #eef0f7;
      border-radius: 14px;
      padding: 12px 14px;
      margin-top: 10px;
      background:#fff;
    }
    summary{
      cursor:pointer;
      font-weight: 900;
      color:#111;
    }
    details p{ margin: 10px 0 0; }

    /* Sidebar */
    .side-title{ margin:0 0 10px; font-size: 16px; font-weight: 900; }
    .side-link{
      display:block;
      padding: 10px 12px;
      border-radius: 14px;
      border: 1px solid #eef0f7;
      background:#fff;
      margin-top: 10px;
      font-weight: 800;
      color:#111;
    }
    .side-link small{ display:block; margin-top: 4px; font-weight: 600; color:#666; }

    .ad{
  display:none;

      border: 1px dashed #cfd3e6;
      border-radius: 14px;
      padding: 14px;
      color:#667;
      font-size: 13px;
      background: #fafbff;
      margin-top: 12px;
    }

    footer{
      margin-top: 16px;
      color:#666;
      font-size: 12px;
      padding: 10px 2px;
    }
  
/* Brand logo */
.brand {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-left: 60px;
    position: relative;
    min-height: 50px;
    padding-top: 5px;
}
.brand__logo {
    flex: 0 0 auto;
    width: 50px;
    height: 50px;
    border-radius: 12px;
    position: absolute;
    left: 0;
    top: 0;
}



/* ===== kak-poschitat-svet-den-noch.html ===== */

    :root { color-scheme: light; }
    *, *::before, *::after { box-sizing: border-box; }

    body{
      margin:0;
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      background:#f6f7fb;
      color:#111;
    }
    a{ color:#1b66ff; text-decoration:none; }
    a:hover{ text-decoration:underline; }

    .wrap{ max-width: 1040px; margin: 0 auto; padding: 18px; }

    /* Topbar / Menu */
    .topbar{
      background:#fff;
      border-radius: 14px;
      box-shadow: 0 8px 24px rgba(0,0,0,.06);
      padding: 14px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 12px;
      flex-wrap: wrap;
    }
    .brand {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-left: 60px;
    position: relative;
    min-height: 50px;
    padding-top: 5px;
}
    .brand b{ font-size: 16px; }
    .brand span{ font-size: 12px; color:#666; }

    .menu{
      display:flex;
      gap: 10px;
      flex-wrap: wrap;
      align-items:center;
      justify-content:flex-end;
    }
    .menu a{
      display:inline-flex;
      align-items:center;
      gap: 8px;
      padding: 8px 10px;
      border-radius: 999px;
      background:#f6f7fb;
      border: 1px solid #eef0f7;
      font-weight: 800;
      font-size: 13px;
      color:#111;
    }
    .menu a.active{
      background:#f0f3ff;
      border-color:#dbe6ff;
      color:#1b66ff;
    }

    /* Layout */
    .grid{
      display:grid;
      grid-template-columns: 1.3fr .7fr;
      gap: 16px;
      margin-top: 16px;
    }
    @media (max-width: 980px){
      .grid{ grid-template-columns: 1fr; }
    }

    .card{
      background:#fff;
      border-radius: 14px;
      box-shadow: 0 8px 24px rgba(0,0,0,.06);
      padding: 18px;
      overflow:hidden;
    }

    h1{ margin: 0 0 10px; font-size: 26px; letter-spacing: -0.02em; }
    .meta{
      display:flex;
      gap: 10px;
      flex-wrap: wrap;
      align-items:center;
      margin-bottom: 14px;
      color:#666;
      font-size: 13px;
    }
    .pill{
      display:inline-block;
      padding: 6px 10px;
      border-radius: 999px;
      background:#f0f3ff;
      color:#1b66ff;
      font-weight: 900;
      font-size: 12px;
    }

    h2{ margin: 18px 0 8px; font-size: 18px; }
    p, li{ line-height: 1.6; color:#222; }
    ul, ol{ margin: 8px 0 0 18px; }
    code{
      background:#f2f4ff;
      padding: 2px 6px;
      border-radius: 8px;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
      font-size: 0.95em;
    }

    .callout{
      margin-top: 14px;
      border-radius: 14px;
      background:#f6f7fb;
      border:1px solid #eef0f7;
      padding: 14px;
    }
    .callout b{ display:block; margin-bottom: 6px; }

    .steps{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin-top: 10px;
    }
    .steps > div{ min-width:0; }
    @media (max-width: 620px){
      .steps{ grid-template-columns: 1fr; }
    }
    .step{
      border: 1px solid #eef0f7;
      border-radius: 14px;
      padding: 12px;
      background:#fff;
    }
    .step .n{
      font-weight: 900;
      color:#1b66ff;
      margin-bottom: 6px;
    }
    .muted{ color:#666; font-size: 13px; }

    /* Example box */
    .example{
      margin-top: 12px;
      border-radius: 14px;
      border: 1px solid #eef0f7;
      padding: 14px;
      background:#fff;
    }
    .example-grid{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-top: 10px;
    }
    @media (max-width: 620px){
      .example-grid{ grid-template-columns: 1fr; }
    }
    .example .k{
      font-weight:800;
      margin:0 0 6px;
    }

    /* FAQ */
    details{
      border:1px solid #eef0f7;
      border-radius: 14px;
      padding: 12px 14px;
      margin-top: 10px;
      background:#fff;
    }
    summary{
      cursor:pointer;
      font-weight: 900;
      color:#111;
    }
    details p{ margin: 10px 0 0; }

    /* Sidebar */
    .side-title{ margin:0 0 10px; font-size: 16px; font-weight: 900; }
    .side-link{
      display:block;
      padding: 10px 12px;
      border-radius: 14px;
      border: 1px solid #eef0f7;
      background:#fff;
      margin-top: 10px;
      font-weight: 800;
      color:#111;
    }
    .side-link small{ display:block; margin-top: 4px; font-weight: 600; color:#666; }

    .ad{
  display:none;

      border: 1px dashed #cfd3e6;
      border-radius: 14px;
      padding: 14px;
      color:#667;
      font-size: 13px;
      background: #fafbff;
      margin-top: 12px;
    }

    footer{
      margin-top: 16px;
      color:#666;
      font-size: 12px;
      padding: 10px 2px;
    }
  
/* Brand logo */
.brand {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-left: 60px;
    position: relative;
    min-height: 50px;
    padding-top: 5px;
}
.brand__logo {
    flex: 0 0 auto;
    width: 50px;
    height: 50px;
    border-radius: 12px;
    position: absolute;
    left: 0;
    top: 0;
}



/* ===== kak-poschitat-vodu-po-schetchiku.html ===== */

    :root { color-scheme: light; }
    *, *::before, *::after { box-sizing: border-box; }

    body{
      margin:0;
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      background:#f6f7fb;
      color:#111;
    }
    a{ color:#1b66ff; text-decoration:none; }
    a:hover{ text-decoration:underline; }

    .wrap{ max-width: 1200px; margin: 0 auto; padding: 18px; }

    /* Topbar / Menu */
    .topbar{
      background:#fff;
      border-radius: 14px;
      box-shadow: 0 8px 24px rgba(0,0,0,.06);
      padding: 14px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 12px;
      flex-wrap: wrap;
    }
    .brand {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-left: 60px;
    position: relative;
    min-height: 50px;
    padding-top: 5px;
}
    .brand b{ font-size: 16px; }
    .brand span{ font-size: 12px; color:#666; }

    .menu{
      display:flex;
      gap: 10px;
      flex-wrap: wrap;
      align-items:center;
      justify-content:flex-end;
    }
    .menu a{
      display:inline-flex;
      align-items:center;
      gap: 8px;
      padding: 8px 10px;
      border-radius: 999px;
      background:#f6f7fb;
      border: 1px solid #eef0f7;
      font-weight: 800;
      font-size: 13px;
      color:#111;
    }
    .menu a.active{
      background:#f0f3ff;
      border-color:#dbe6ff;
      color:#1b66ff;
    }

    /* Layout */
    .grid{
      display:grid;
      grid-template-columns: 1.3fr .7fr;
      gap: 16px;
      margin-top: 16px;
    }
    @media (max-width: 980px){
      .grid{ grid-template-columns: 1fr; }
    }

    .card{
      background:#fff;
      border-radius: 14px;
      box-shadow: 0 8px 24px rgba(0,0,0,.06);
      padding: 18px;
      overflow:hidden;
    }

    h1{ margin: 0 0 10px; font-size: 26px; letter-spacing: -0.02em; }
    .meta{
      display:flex;
      gap: 10px;
      flex-wrap: wrap;
      align-items:center;
      margin-bottom: 14px;
      color:#666;
      font-size: 13px;
    }
    .pill{
      display:inline-block;
      padding: 6px 10px;
      border-radius: 999px;
      background:#f0f3ff;
      color:#1b66ff;
      font-weight: 900;
      font-size: 12px;
    }

    h2{ margin: 18px 0 8px; font-size: 18px; }
    p, li{ line-height: 1.6; color:#222; }
    ul, ol{ margin: 8px 0 0 18px; }
    code{
      background:#f2f4ff;
      padding: 2px 6px;
      border-radius: 8px;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
      font-size: 0.95em;
    }

    .callout{
      margin-top: 14px;
      border-radius: 14px;
      background:#f6f7fb;
      border:1px solid #eef0f7;
      padding: 14px;
    }
    .callout b{ display:block; margin-bottom: 6px; }

    .steps{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin-top: 10px;
    }
    .steps > div{ min-width:0; }
    @media (max-width: 620px){
      .steps{ grid-template-columns: 1fr; }
    }
    .step{
      border: 1px solid #eef0f7;
      border-radius: 14px;
      padding: 12px;
      background:#fff;
    }
    .step .n{
      font-weight: 900;
      color:#1b66ff;
      margin-bottom: 6px;
    }
    .muted{ color:#666; font-size: 13px; }

    .example{
      margin-top: 12px;
      border-radius: 14px;
      border: 1px solid #eef0f7;
      padding: 14px;
      background:#fff;
    }
    .example-grid{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-top: 10px;
    }
    @media (max-width: 620px){
      .example-grid{ grid-template-columns: 1fr; }
    }
    .example .k{
      font-weight:800;
      margin:0 0 6px;
    }

    /* FAQ */
    details{
      border:1px solid #eef0f7;
      border-radius: 14px;
      padding: 12px 14px;
      margin-top: 10px;
      background:#fff;
    }
    summary{
      cursor:pointer;
      font-weight: 900;
      color:#111;
    }
    details p{ margin: 10px 0 0; }

    /* Sidebar */
    .side-title{ margin:0 0 10px; font-size: 16px; font-weight: 900; }
    .side-link{
      display:block;
      padding: 10px 12px;
      border-radius: 14px;
      border: 1px solid #eef0f7;
      background:#fff;
      margin-top: 10px;
      font-weight: 800;
      color:#111;
    }
    .side-link small{ display:block; margin-top: 4px; font-weight: 600; color:#666; }

    .ad{
  display:none;

      border: 1px dashed #cfd3e6;
      border-radius: 14px;
      padding: 14px;
      color:#667;
      font-size: 13px;
      background: #fafbff;
      margin-top: 12px;
    }

    footer{
      margin-top: 16px;
      color:#666;
      font-size: 12px;
      padding: 10px 2px;
    }
  
/* Brand logo */
.brand {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-left: 60px;
    position: relative;
    min-height: 50px;
    padding-top: 5px;
}
.brand__logo {
    flex: 0 0 auto;
    width: 50px;
    height: 50px;
    border-radius: 12px;
    position: absolute;
    left: 0;
    top: 0;
}



/* ===== kak-snyat-pokazaniya-schetchikov.html ===== */

    :root { color-scheme: light; }
    *, *::before, *::after { box-sizing: border-box; }

    body{
      margin:0;
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      background:#f6f7fb;
      color:#111;
    }
    a{ color:#1b66ff; text-decoration:none; }
    a:hover{ text-decoration:underline; }

    .wrap{ max-width:1200px; margin: 0 auto; padding: 18px; }

    /* Topbar / Menu */
    .topbar{
      background:#fff;
      border-radius: 14px;
      box-shadow: 0 8px 24px rgba(0,0,0,.06);
      padding: 14px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 12px;
      flex-wrap: wrap;
    }
    .brand {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-left: 60px;
    position: relative;
    min-height: 50px;
    padding-top: 5px;
}
    .brand b{ font-size: 16px; }
    .brand span{ font-size: 12px; color:#666; }

    .menu{
      display:flex;
      gap: 10px;
      flex-wrap: wrap;
      align-items:center;
      justify-content:flex-end;
    }
    .menu a{
      display:inline-flex;
      align-items:center;
      gap: 8px;
      padding: 8px 10px;
      border-radius: 999px;
      background:#f6f7fb;
      border: 1px solid #eef0f7;
      font-weight: 800;
      font-size: 13px;
      color:#111;
    }
    .menu a.active{
      background:#f0f3ff;
      border-color:#dbe6ff;
      color:#1b66ff;
    }

    /* Layout */
    .grid{
      display:grid;
      grid-template-columns: 1.3fr .7fr;
      gap: 16px;
      margin-top: 16px;
    }
    @media (max-width: 980px){
      .grid{ grid-template-columns: 1fr; }
    }

    .card{
      background:#fff;
      border-radius: 14px;
      box-shadow: 0 8px 24px rgba(0,0,0,.06);
      padding: 18px;
      overflow:hidden;
    }

    h1{ margin: 0 0 10px; font-size: 26px; letter-spacing: -0.02em; }
    .meta{
      display:flex;
      gap: 10px;
      flex-wrap: wrap;
      align-items:center;
      margin-bottom: 14px;
      color:#666;
      font-size: 13px;
    }
    .pill{
      display:inline-block;
      padding: 6px 10px;
      border-radius: 999px;
      background:#f0f3ff;
      color:#1b66ff;
      font-weight: 900;
      font-size: 12px;
    }

    h2{ margin: 18px 0 8px; font-size: 18px; }
    p, li{ line-height: 1.6; color:#222; }
    ul, ol{ margin: 8px 0 0 18px; }
    code{
      background:#f2f4ff;
      padding: 2px 6px;
      border-radius: 8px;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
      font-size: 0.95em;
    }

    .callout{
      margin-top: 14px;
      border-radius: 14px;
      background:#f6f7fb;
      border:1px solid #eef0f7;
      padding: 14px;
    }
    .callout b{ display:block; margin-bottom: 6px; }

    .steps{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin-top: 10px;
    }
    .steps > div{ min-width:0; }
    @media (max-width: 620px){
      .steps{ grid-template-columns: 1fr; }
    }
    .step{
      border: 1px solid #eef0f7;
      border-radius: 14px;
      padding: 12px;
      background:#fff;
    }
    .step .n{
      font-weight: 900;
      color:#1b66ff;
      margin-bottom: 6px;
    }

    .muted{ color:#666; font-size: 13px; }

    .checklist{
      margin-top: 12px;
      border-radius: 14px;
      border: 1px solid #eef0f7;
      padding: 14px;
      background:#fff;
    }
    .checklist ul{ margin-top: 8px; }

    /* FAQ */
    details{
      border:1px solid #eef0f7;
      border-radius: 14px;
      padding: 12px 14px;
      margin-top: 10px;
      background:#fff;
    }
    summary{
      cursor:pointer;
      font-weight: 900;
      color:#111;
    }
    details p{ margin: 10px 0 0; }

    /* Sidebar */
    .side-title{ margin:0 0 10px; font-size: 16px; font-weight: 900; }
    .side-link{
      display:block;
      padding: 10px 12px;
      border-radius: 14px;
      border: 1px solid #eef0f7;
      background:#fff;
      margin-top: 10px;
      font-weight: 800;
      color:#111;
    }
    .side-link small{ display:block; margin-top: 4px; font-weight: 600; color:#666; }

    .ad{
  display:none;

      border: 1px dashed #cfd3e6;
      border-radius: 14px;
      padding: 14px;
      color:#667;
      font-size: 13px;
      background: #fafbff;
      margin-top: 12px;
    }

    footer{
      margin-top: 16px;
      color:#666;
      font-size: 12px;
      padding: 10px 2px;
    }
  
/* Brand logo */
.brand {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-left: 60px;
    position: relative;
    min-height: 50px;
    padding-top: 5px;
}
.brand__logo {
    flex: 0 0 auto;
    width: 50px;
    height: 50px;
    border-radius: 12px;
    position: absolute;
    left: 0;
    top: 0;
}



/* ===== sitemap.html ===== */

    :root { color-scheme: light; }
    *, *::before, *::after { box-sizing: border-box; }

    body{
      margin:0;
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      background:#f6f7fb;
      color:#111;
    }
    a{ color:#1b66ff; text-decoration:none; }
    a:hover{ text-decoration:underline; }

    .wrap{ max-width: 1200px; margin: 0 auto; padding: 18px; }

    /* Topbar / Menu */
    .topbar{
      background:#fff;
      border-radius: 14px;
      box-shadow: 0 8px 24px rgba(0,0,0,.06);
      padding: 14px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 12px;
      flex-wrap: wrap;
      margin-bottom: 16px;
    }
    .brand {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-left: 60px;
    position: relative;
    min-height: 50px;
    padding-top: 5px;
}
    .brand b{ font-size: 16px; }
    .brand span{ font-size: 12px; color:#666; }

    .menu{
      display:flex;
      gap: 10px;
      flex-wrap: wrap;
      align-items:center;
      justify-content:flex-start;
    }
    .menu a{
      display:inline-flex;
      align-items:center;
      gap: 8px;
      padding: 8px 10px;
      border-radius: 999px;
      background:#f6f7fb;
      border: 1px solid #eef0f7;
      font-weight: 800;
      font-size: 13px;
      color:#111;
      text-decoration:none;
    }
    .menu a:hover{ text-decoration:underline; }
    .menu a.active{
      background:#f0f3ff;
      border-color:#dbe6ff;
      color:#1b66ff;
      text-decoration:none;
    }

    .card{
      background:#fff;
      border-radius: 14px;
      box-shadow: 0 8px 24px rgba(0,0,0,.06);
      padding: 18px;
    }

    h1{ margin: 0 0 10px; font-size: 24px; letter-spacing: -0.02em; }
    h2{ margin: 18px 0 8px; font-size: 18px; }
    p, li{ line-height: 1.6; color:#222; }
    ul{ margin: 8px 0 0 18px; }

    .muted{ color:#666; font-size: 13px; }
    .pill{
      display:inline-block;
      padding: 6px 10px;
      border-radius: 999px;
      background:#f0f3ff;
      color:#1b66ff;
      font-weight: 900;
      font-size: 12px;
    }

    .cols{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
      margin-top: 12px;
    }
    .cols > div{ min-width:0; }
    @media (max-width: 820px){
      .cols{ grid-template-columns: 1fr; }
    }

    .box{
      border: 1px solid #eef0f7;
      border-radius: 14px;
      padding: 14px;
      background:#fff;
    }

    .list a{
      display:block;
      padding: 10px 12px;
      border-radius: 14px;
      border: 1px solid #eef0f7;
      background:#fff;
      margin-top: 10px;
      font-weight: 800;
      color:#111;
    }
    .list a small{
      display:block;
      margin-top: 4px;
      font-weight: 600;
      color:#666;
    }

    footer{
      margin-top: 16px;
      color:#666;
      font-size: 12px;
      padding: 10px 2px;
    }
  
/* Brand logo */
.brand {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-left: 60px;
    position: relative;
    min-height: 50px;
    padding-top: 5px;
}
.brand__logo {
    flex: 0 0 auto;
    width: 50px;
    height: 50px;
    border-radius: 12px;
    position: absolute;
    left: 0;
    top: 0;
}


.ad{ display:none; }

/* =========================================================
   Responsive patch (global) — added after merge from pages
   Goal: stable mobile layout across all pages.
   ========================================================= */

/* Prevent long words/URLs from breaking layout */
h1,h2,h3,p,li,a,code,pre { overflow-wrap: anywhere; word-break: break-word; }

/* Media/content safety */
img, svg, video { max-width: 100%; height: auto; }

/* Tables and code blocks on mobile */
table { width: 100%; border-collapse: collapse; }
pre, code { max-width: 100%; }
pre { overflow: auto; }

/* Make common layout containers shrink properly inside grid/flex */
.card, .box, .topbar, .wrap, .grid, .cols, .row, .example-grid { min-width: 0; }
.row > div, .cols > div, .grid > div, .example-grid > div { min-width: 0; }

/* ----- Breakpoints ----- */

/* <= 1024px: slightly tighter spacing */
@media (max-width: 1024px){
  .wrap{ padding: 14px; }
  .topbar{ padding: 12px; gap: 10px; }
  .card{ padding: 16px; }
}

/* <= 860px: move to single-column for content sidebars and examples earlier */
@media (max-width: 860px){
  .grid{ grid-template-columns: 1fr !important; }
  .cols{ grid-template-columns: 1fr !important; }
  .example-grid{ grid-template-columns: 1fr !important; }
  .row{ grid-template-columns: 1fr !important; }
}

/* <= 720px: header/menu becomes more compact */
@media (max-width: 720px){
  header{
      flex-direction: column;
  }
  .card h2 {
    margin: 20px 0 10px;
    }
   ul, ol {
    margin: 8px 0 0 0;
}
  .wrap{ padding: 12px; }
  .topbar{ padding: 12px; align-items: flex-start; }
  .brand{ min-width: 0; }
  .menu{ justify-content: flex-start; gap: 8px; }
  .menu a{ padding: 7px 9px; font-size: 12px; }
  h1{ font-size: 22px; }
  h2{ font-size: 17px; }
}

/* <= 520px: comfortable mobile spacing */
@media (max-width: 520px){

  .wrap{ padding: 10px; }
  .topbar{ border-radius: 12px; }
  .card{ padding: 14px; border-radius: 12px; }
  .box{ padding: 12px; border-radius: 12px; }
  .side-link{ padding: 10px; border-radius: 12px; }
  .pill{ max-width: 100%; }
  .meta{ font-size: 12px; }
}

/* <= 420px: ensure buttons/inputs never overflow */
@media (max-width: 420px){
  input, select, textarea, button { max-width: 100%; }
  .menu a{ font-size: 12px; }
}