/* База */
     
    :root{
  --safe: env(safe-area-inset-bottom, 0px);
  --bn-h: 0px;              /* ← добавь это */
}



    body{
      font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
      padding:20px; margin:0; background-color:#e6f0f3;
      -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
      text-rendering:optimizeLegibility;
    }

    h1{ text-align:center; font-size:28px; margin-bottom:25px; color:#333 }

    form{
      background:#ffffff; padding:30px; border-radius:16px;
      box-shadow:0 8px 24px rgba(0,0,0,0.1); max-width:700px; margin:0 auto;
      animation:fadeIn .5s ease;
    }

    input,select,textarea{
      width:100%; padding:14px; margin-bottom:18px; font-size:16px;
      border:1px solid #ccc; border-radius:10px; transition:border-color .3s, box-shadow .3s;
    }
    input:focus,select:focus,textarea:focus{
      border-color:#007bff; box-shadow:0 0 6px rgba(0,123,255,.3); outline:none;
    }

    button{
      width:100%; padding:14px; font-size:18px; color:#fff; font-weight:bold;
      border:none; border-radius:30px;
      background:linear-gradient(to right,#28a745,#218838);
      transition:transform .2s ease, background-color .3s ease;
    }
    button:hover{ transform:scale(1.02) translateY(-2px) }
    button:active{ transform:scale(.98) translateY(1px) }

    .geo-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border-radius:50%;
  border:1px solid rgba(0,0,0,.2);   /* тонкая полупрозрачная рамка */
  background:rgba(255,255,255,.7);   /* белый с прозрачностью */
  color:rgba(0,0,0,.8);              /* тёмная иконка, но не полностью чёрная */
  font-size:20px;
  cursor:pointer;
  backdrop-filter: blur(4px);        /* эффект стекла (если поддерживается) */
  transition:all .2s ease;
}

.geo-btn:hover{ 
  background:rgba(255,255,255,.9); 
  color:#000;
}

.geo-btn:active{ 
  transform:scale(.9);
  background:rgba(230,230,230,.9);
}


    .file-input{
      display:flex; align-items:center; justify-content:space-between;
      background:#f7f7f7; padding:12px 16px; border-radius:10px; margin-bottom:18px;
      border:1px solid #ccc; cursor:pointer; transition:border-color .3s;
    }
    .file-input:hover{ border-color:#007bff }
    .file-input input{ display:none }

    .preview{ display:none; margin-top:10px; text-align:center }
    .preview img{ max-width:100%; max-height:300px; border-radius:12px; margin-top:10px; box-shadow:0 4px 10px rgba(0,0,0,.1) }

    @keyframes fadeIn{ from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none} }

    @media (max-width:480px){
      h1{ font-size:22px } form{ padding:20px } button{ font-size:16px; padding:12px }
    }

    /* Верхние кнопки */
    .home-fade-button{
      display:block; width:max-content; margin:0 auto 25px; padding:14px 28px;
      font-size:17px; font-weight:bold; color:#25D366; background:transparent; border:none; border-radius:30px;
      text-decoration:none; transition:background .3s ease, color .3s ease, transform .2s ease;
      backdrop-filter:blur(4px); position:relative; overflow:hidden; -webkit-tap-highlight-color:transparent; box-shadow:none;
      background-clip:padding-box; -webkit-background-clip:padding-box;
    }
    .home-fade-button:hover{ background-color:rgba(37,211,102,.15); color:#fff; transform:scale(1.05) }
    .home-fade-button:active{ transform:scale(.97); background-color:rgba(37,211,102,.25) }

    /* Изображения — чёткость + без дёргания */
    img{ display:block; max-width:100%; height:auto; image-rendering:-webkit-optimize-contrast }
    .logo{ width:36px; height:36px; border-radius:8px }

    /* Фон-герой (если используешь) */
    .hero{
      background: radial-gradient(900px 600px at 100% 0%, rgba(18,140,126,.12), transparent 55%), #111b21;
      background-size:cover;
    }
    @media (min-width:1280px){
      .hero{
        background-image:image-set(url('/assets/hero-2k.webp') type('image/webp') 1x);
        background-repeat:no-repeat; background-position:center;
      }
    }

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


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

@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;
  }

  .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:12px; color:#aebac1;
  }
}



.bn-link.active {
  background:#1a242b;
}



    /* Ripple — глобально (и для верхних, и для нижних кнопок) */
    .ripple{
      position:absolute; width:100px; height:100px; border-radius:50%;
      background:rgba(255,255,255,.15); transform:scale(0); animation:ripple-effect .6s linear;
      pointer-events:none; opacity:1;
    }
    @keyframes ripple-effect{ to{ transform:scale(12); opacity:0 } }