/* Общая шапка и футер. Источник — был src/chrome.ts, вынесен по TD-027 шаг 2. */
:root{--hd-h:76px}
  
  .hd{position:fixed;top:0;left:0;right:0;z-index:60;display:grid;grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center;column-gap:100px;padding:18px 34px;
    transition:transform .62s cubic-bezier(.22,1,.36,1),opacity .5s ease}
  .hd .panel{position:absolute;inset:0;z-index:0;opacity:0;transition:opacity .35s;pointer-events:none;
    background:var(--glass);backdrop-filter:blur(18px);
    -webkit-mask-image:linear-gradient(to bottom,#000 55%,rgba(0,0,0,.55) 80%,rgba(0,0,0,0) 100%);
    mask-image:linear-gradient(to bottom,#000 55%,rgba(0,0,0,.55) 80%,rgba(0,0,0,0) 100%)}
  .hd.solid .panel{opacity:1}
  .hd > *:not(.panel){position:relative;z-index:2}
  .hd .brand{justify-self:start;display:flex;align-items:center;gap:14px;min-width:0}
  .logo{margin-inline-start:32px;font-family:'Unbounded',sans-serif;font-weight:600;font-size:20px;letter-spacing:.04em;
    background:linear-gradient(95deg,var(--logo1) 15%,var(--logo2) 85%);-webkit-background-clip:text;background-clip:text;color:transparent;
    filter:drop-shadow(0 3px 14px rgba(239,95,212,.4))}
  .hd .kabinet{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);
    padding-inline-start:14px;border-inline-start:1px solid var(--line);white-space:nowrap}
  .hd nav{display:flex;align-items:center;justify-content:space-evenly;width:100%;font-size:15px;font-weight:500;letter-spacing:.01em}
  .hd nav a{color:var(--navlink);text-decoration:none;padding:6px 0;border-bottom:1px solid transparent;
    transition:color .22s,border-color .22s;white-space:nowrap}
  .hd nav a:hover{color:var(--ink);border-color:var(--pink)}
  .hd .r{justify-self:end;display:flex;align-items:center;gap:10px}
  .hd .r #topRight{display:flex;align-items:center;gap:10px}
  .hbtn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:40px;border-radius:999px;
    border:1px solid var(--line);background:var(--glass);backdrop-filter:blur(16px);color:var(--ink);font-family:inherit;
    font-size:12.5px;font-weight:700;letter-spacing:.06em;cursor:pointer;text-decoration:none;white-space:nowrap;
    transition:transform .25s,border-color .25s,box-shadow .25s}
  .hbtn:hover{transform:translateY(-1px);border-color:rgba(123,63,242,.5);box-shadow:0 8px 24px -12px rgba(123,63,242,.45)}
  .hbtn.pill{padding:0 15px}
  .hbtn.rnd{width:40px;padding:0;border-radius:50%}
  .hbtn.rnd.th:hover{transform:translateY(-1px) rotate(12deg)}
  .hbtn.acc{border:1.5px solid transparent;background:linear-gradient(var(--glass),var(--glass)) padding-box,linear-gradient(95deg,#7b3ff2,#ef5fd4) border-box}
  .hbtn.acc:hover{box-shadow:0 8px 24px -10px rgba(239,95,212,.55);border-color:transparent}
  /* Avatar vmesto znachka cheloveka. object-fit obyazatelen: kartinki u provayderov
     ne vsegda kvadratnye, bez nego lico rastyagivaet. */
  .hbtn.rnd .avaimg{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover}
  html[data-theme="dark"] .ic-moon{display:none}
  html[data-theme="light"] .ic-sun{display:none}

  .foot{border-top:1px solid var(--line);padding:42px 0 50px}
  .foot .wrap{max-width:1120px;margin:0 auto;padding:0 40px;display:flex;justify-content:space-between;
    align-items:flex-start;gap:28px;flex-wrap:wrap}
  .foot .lg{font-family:'Unbounded',sans-serif;font-weight:600;font-size:16.5px;letter-spacing:.04em;
    background:linear-gradient(95deg,var(--logo1) 15%,var(--logo2) 85%);-webkit-background-clip:text;background-clip:text;color:transparent}
  .foot p{margin:10px 0 0;font-size:13.5px;line-height:1.6;color:var(--mut)}
  .foot .cc{margin-top:16px;font-size:12.5px;color:var(--mut);opacity:.7}
  .foot nav{display:flex;gap:26px;flex-wrap:wrap;font-size:13.5px;padding-top:4px}
  .foot nav a{color:var(--mut);text-decoration:none;transition:color .2s;white-space:nowrap}
  .foot nav a:hover{color:var(--vio)}

  @media (max-width:1024px){
    :root{--hd-h:68px}
    .hd{column-gap:28px;padding:14px 20px}
    .hd nav{font-size:14px;gap:18px;justify-content:flex-end}
    .foot .wrap{padding:0 24px}
  }
  @media (max-width:768px){
    /* Na uzkom ekrane menyu perenositsya na vtoruyu stroku - shapka vyshe. */
    :root{--hd-h:112px}
    .hd{grid-template-columns:auto auto;row-gap:10px;padding:12px 16px}
    /* BL-23: было justify-content:space-between - четыре пункта разъезжались от края
       до края, и на 400px "Тарифы" уезжал под кнопки справа. Теперь обычный ряд с
       отступом и горизонтальной прокруткой, кромка справа гаснет - это подсказка,
       что ряд продолжается. Предел: 4-5 пунктов на 375px, дальше только прокрутка. */
    .hd nav{grid-column:1 / -1;order:3;justify-content:flex-start;gap:22px;font-size:13px;
      overflow-x:auto;overflow-y:hidden;scrollbar-width:none;padding-block:2px;
      -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);
      mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent)}
    .hd nav::-webkit-scrollbar{display:none}
    .hd nav a{flex:none}
    .hd .kabinet{display:none}
    .foot .wrap{flex-direction:column;gap:22px;padding:0 18px}
  }
  @media (max-width:420px){
    :root{--hd-h:108px}
    .hd .r .hbtn.pill[data-action="lang"]{display:none}
    .hbtn{height:36px;font-size:12px}
    .hbtn.pill{padding:0 12px}
    .hbtn.rnd{width:36px;padding:0}
    .foot .wrap{padding:0 14px}
  }