:root{
      --bg:#111b21; --card:#202c33; --line:#2a3942; --text:#e9edef; --muted:#aebac1;
      --brand:#25D366; --brand2:#128C7E; --accent:#1ebe5d;
      --radius:16px; --radius-sm:12px; --gap:16px; --gap-sm:12px;
      --shadow:0 6px 20px rgba(0,0,0,.25);
    }

    *{box-sizing:border-box}
html,body{
  min-height:100%;
  margin:0;
  padding:0;
  overflow-x:hidden; /* ← добавили, убирает люфт */
}
    html{font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
    body{
      background:var(--bg); color:var(--text); line-height:1.45;
      -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
      text-rendering:optimizeLegibility;
    }
    img{max-width:100%; display:block}

    /* ===== ТИПОГРАФИКА/ОТСТУПЫ ===== */
    h1{font-size:28px; margin:12px 16px 16px; text-align:center}
    h2{font-size:20px; margin:0 0 8px}

    /* ===== ВКЛАДКИ ===== */
    .tab-bar{
      display:flex; justify-content:center; gap:8px; padding:8px 10px;
      background:var(--card); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:5;
    }
    .tab-button{
      background:none; border:none; color:var(--muted);
      padding:10px 14px; font-size:15px; border-radius:10px; cursor:pointer;
    }
    .tab-button.active{color:var(--brand); background:#1a242b; font-weight:700}
    .tab-content{display:none; animation:fade .25s ease}
    .tab-content.active{display:block}
    @keyframes fade{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}

    /* ===== ФОРМА ПОИСКА ===== */
    .search-form{
      margin:16px; padding:14px; background:var(--card); border:1px solid var(--line); border-radius:16px;
      display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px;
    }
    .search-form input[type="text"],
    .search-form input[list][type="text"]{
      padding:12px 14px; border:none; border-radius:24px; background:#111b21; color:#fff; font-size:16px;
      outline:2px solid transparent; outline-offset:0; transition:outline-color .15s ease;
    }
    .search-form input:focus{outline-color:#2b9c66}
    /* расположение кнопки в сетке формы */
    .search-form button{ grid-column:span 1 }
    @media (max-width: 900px){ .search-form{grid-template-columns:repeat(3, minmax(0,1fr))} }
    @media (max-width: 680px){ .search-form{grid-template-columns:1fr 1fr} .search-form button{grid-column:1 / -1} }
    @media (max-width: 420px){ .search-form{grid-template-columns:1fr; gap:8px; padding:12px; margin:12px} }

    /* ===== СПИСОК КАРТОЧЕК ===== */
    .wa-container{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; padding:16px }
    @media (max-width: 860px){ .wa-container{grid-template-columns:1fr} }

    .wa-master-card{
      background:var(--card); border:1px solid var(--line); border-radius:14px;
      padding:14px; transition:transform .15s ease, box-shadow .2s ease;
    }
    .wa-master-card:hover{transform:translateY(-2px); box-shadow:0 6px 16px rgba(0,0,0,.24)}
    .wa-master-card p{margin:6px 0; color:var(--muted); font-size:15px}

    /* ===== АВАТАРЫ ===== */
    .avatar-wrap{
      width:80px; height:80px; border-radius:50%; overflow:hidden; background:#3a3a3a; flex:0 0 auto;
      display:flex; align-items:center; justify-content:center; margin-bottom:10px;
    }
    .avatar-wrap img.avatar{ width:100%; height:100%; object-fit:cover; image-rendering:-webkit-optimize-contrast }
    @media (max-width: 480px){ .avatar-wrap{width:60px; height:60px} }

    /* ===== РЯД В КАРТОЧКЕ ===== */
    .card-row{ display:flex; align-items:center; gap:12px; margin-bottom:8px }
    .card-title{font-size:17px; font-weight:700; color:#fff; margin:0}

    /* ===== ГЛОБАЛЬНЫЕ КНОПКИ (единый стиль) ===== */
    .btn {
      min-height:44px;
      padding:12px 20px;
      border-radius:14px;
      border:1px solid rgba(255,255,255,.06);

      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;

      font-weight:700;
      font-size:16px;
      color:#fff;
      text-decoration:none;
      user-select:none;
      cursor:pointer;

      background:#2a3942; /* базовый фон */
      box-shadow:
        0 1px 0 rgba(255,255,255,.06) inset,
        0 8px 20px rgba(0,0,0,.28);

      -webkit-tap-highlight-color:transparent;
      background-clip:padding-box; -webkit-background-clip:padding-box;
      transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
    }
    .btn:hover{
      transform: translateY(-2px);
      box-shadow:
        0 1px 0 rgba(255,255,255,.08) inset,
        0 12px 26px rgba(0,0,0,.34);
    }
    .btn:active{
      transform: translateY(0);
      box-shadow:
        inset 0 2px 6px rgba(0,0,0,.35),
        0 4px 10px rgba(0,0,0,.22);
      filter: brightness(.98);
    }
    .btn:focus-visible{
      outline: none;
      box-shadow:
        0 0 0 3px rgba(37,211,102,.25),
        0 8px 20px rgba(0,0,0,.28);
    }

    /* Цветовые модификаторы (дерзкие, насыщенные) */
    .btn--home, .btn--wa{ /* на главную и WhatsApp */
      background:#25D366;
      background-image: linear-gradient(180deg, #2ee075 0%, #1ebe5d 100%);
    }
    .btn--find{ /* Найти */
      background:#25D366;
      background-image: linear-gradient(180deg, #2ee075 0%, #128C7E 100%);
    }
    .btn--call{ /* Позвонить */
      background:#2ecc71;
      background-image: linear-gradient(180deg, #2fdc79 0%, #27ae60 100%);
    }

    /* ===== КНОПКИ В КАРТОЧКЕ ===== */
    .wa-buttons{display:flex; gap:10px; margin-top:12px; flex-wrap:wrap}

    

/* Подсветка активной кнопки */
.bn-link.active { background:#1a242b; }



/* Спейсер берёт реальную высоту панели */
.bn-spacer{
  height: calc(var(--bn-h, 88px) + env(safe-area-inset-bottom));
}

/* Нижняя навигация (по умолчанию скрыта — для ПК) */
.bottom-nav{ display:none }




@media (max-width:780px){
  .nav{ display:none }

  .bottom-nav{
    position: fixed; left:0; right:0; bottom:0;
    display:flex; gap:8px;
    padding:14px 14px calc(14px + env(safe-area-inset-bottom));
    background:#202c33; border-top:1px solid #2a3942;
    overflow-x:auto; overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    z-index:1000;

    box-sizing: border-box; /* ← добавь */
    max-width: 100vw;       /* ← добавь */
  }

  .bn-link{
    position: relative; overflow: hidden; /* ← для ripple */
    flex:0 0 auto; min-width:84px;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:6px; padding:12px 10px; border-radius:14px;
    text-decoration:none; color:#e9edef; font-weight:700; font-size:14px;
    -webkit-tap-highlight-color:transparent;
  }
  .bn-link span{ font-size:11px; color:#aebac1 }
  .bn-link:active{ transform:scale(.97); background:#1a242b }

 

  /* Спрятать верхнюю кнопку на мобильных */
  a.btn.btn--home{ display:none; }
}


/* безопасная зона для вырезов (PWA) */
:root{ --safe: env(safe-area-inset-bottom, 0px) }