/* Стили для модальных окон */
.btn-link { 
  background: rgba(255,255,255,0.16); 
  color:#fff; 
  border:none; 
  border-radius:8px; 
  padding:8px 12px; 
  cursor:pointer; 
  font-weight:600; 
}

.btn-link:hover { 
  background: rgba(255,255,255,0.28); 
}

.modal-backdrop { 
  position:fixed; 
  inset:0; 
  background:rgba(0,0,0,0.5); 
  display:none; 
  align-items:center; 
  justify-content:center; 
  z-index:1000; 
}

.modal { 
  background:#fff; 
  width:100%; 
  max-width:420px; 
  border-radius:12px; 
  box-shadow:0 20px 60px rgba(0,0,0,.2); 
  overflow:hidden; 
}

@media (max-width: 480px) {
  .modal {
    max-width: calc(100vw - 24px);
    margin: 12px;
  }
  .modal-header,
  .modal-body {
    padding: 14px 16px;
  }
  .field input {
    min-height: 44px;
    box-sizing: border-box;
  }
}

.modal-header { 
  padding:14px 18px; 
  background:#2563eb; 
  color:#fff; 
  font-weight:700; 
  display:flex; 
  justify-content:space-between; 
  align-items:center; 
}

.modal-body { 
  padding:18px; 
}

.close-btn { 
  background:none; 
  border:none; 
  color:#fff; 
  font-size:20px; 
  cursor:pointer; 
}

.field { 
  margin-bottom:12px; 
}

.field input { 
  width:100%; 
  padding:10px; 
  border:1px solid #e5e7eb; 
  border-radius:8px; 
  box-sizing:border-box; 
}

.user-box { 
  background:#f8fafc; 
  border:1px solid #e5e7eb; 
  border-radius:10px; 
  padding:10px 12px; 
  margin-top:10px; 
}

.user-box small { 
  color:#6b7280; 
}

.logout-btn { 
  background:#ef4444; 
  color:#fff; 
  border:none; 
  border-radius:8px; 
  padding:6px 10px; 
  cursor:pointer; 
  font-weight:600; 
}