/* ===== Глобальный адаптивный стиль (ПК + мобильные) ===== */

:root{
  --radius: 16px;
  --space: 22px;
  --space-sm: 14px;
  --brand: #0d47a1;
  --brand-2: #1565c0;
}

html, body{
  height: 100%;
}

body{
  margin:0;
  font-family:'Segoe UI',system-ui,sans-serif;
  background:url("../background.jpg") no-repeat center / cover fixed;
  min-height:100svh;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:clamp(10px, 3vw, 24px);
  padding-top:max(clamp(10px, 3vw, 24px), env(safe-area-inset-top));
  padding-left:max(clamp(10px, 3vw, 24px), env(safe-area-inset-left));
  padding-right:max(clamp(10px, 3vw, 24px), env(safe-area-inset-right));
  padding-bottom:max(clamp(10px, 3vw, 24px), env(safe-area-inset-bottom));
  animation:fadeIn 0.6s ease;
  position:relative;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  background:inherit;
  filter:blur(8px) brightness(.98);
  transform:scale(1.03);
  z-index:-1;
}

@keyframes fadeIn{
  from{opacity:0}
  to{opacity:1}
}

.container{
  width:clamp(320px, 92vw, 520px);
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(1.1) blur(1.5px);
  -webkit-backdrop-filter:saturate(1.1) blur(1.5px);
  border-radius:calc(var(--radius) + 2px);
  padding:clamp(var(--space-sm), 2.5vw, var(--space));
  box-shadow:0 18px 40px rgba(0,0,0,.18);
  text-align:left;
}

h1{
  margin:0 0 12px;
  font-size:clamp(20px, 2.6vw, 26px);
  line-height:1.25;
  color:var(--brand);
  text-align:left;
}

.btn{
  width:100%;
  padding:12px 14px;
  border-radius:12px;
  border:0;
  background:var(--brand);
  color:#fff;
  font-size:16px;
  cursor:pointer;
  transition:background .2s, transform .08s, box-shadow .2s;
}

.btn:hover{
  background:var(--brand-2);
  box-shadow:0 6px 16px rgba(21,101,192,.25);
}

.btn:active{
  transform:translateY(1px);
}

.topbar{
  position:fixed;
  top:clamp(14px, 2.5vw, 22px);
  right:clamp(14px, 2.5vw, 22px);
  z-index:10;
}

.link-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:9px 15px;
  font-size:14px;
  font-weight:500;
  border:none;
  border-radius:50px;
  background:linear-gradient(180deg,#0d47a1 0%,#1565c0 100%);
  color:#fff;
  cursor:pointer;
  box-shadow:0 3px 6px rgba(0,0,0,.25);
  transition:all .25s ease;
}

.link-btn:hover{
  background:linear-gradient(180deg,#1565c0 0%,#1e88e5 100%);
  box-shadow:0 4px 10px rgba(13,71,161,.35);
  transform:translateY(-1px);
}

.link-btn:active{
  transform:translateY(1px);
  box-shadow:0 2px 6px rgba(0,0,0,.25) inset;
}

.footer{
  position:fixed;
  bottom:max(10px, env(safe-area-inset-bottom));
  left:0;
  width:100%;
  text-align:center;
  font-size:12px;
  color:rgba(255,255,255,.85);
}

@media (max-width: 640px){
  body{
    background-attachment:scroll;
  }

  .topbar{
    top:max(10px, env(safe-area-inset-top));
    right:max(10px, env(safe-area-inset-right));
  }

  .footer{
    position:static;
    margin-top:14px;
  }
}

@media (max-width: 380px){
  .container{
    width:95vw;
    padding:16px;
  }
}