:root{
  --card:#fff;
  --text:#1c2730;
  --muted:#6b7a86;

  --btn:#2AABEE;
  --btn-hover:#1f9fe0;

  --shadow: 0 12px 40px rgba(0,0,0,.18);
}

*,
*::before,
*::after{
  box-sizing:border-box;
}

.no_transition *{ transition:none !important; }

html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:#eaeef4;
}

/* Telegram-like wallpaper wrapper */
.tgme_background_wrap{
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
  background:#dfe6ee; /* fallback пока canvas грузится */
}
.tgme_background{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:1;
}

/* pattern: как у TG (мягкие полупрозрачные пятна, без "плоского градиента") */
.tgme_background_pattern{
  position:absolute;
  inset:0;
  opacity:.22;
  background:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.35), transparent 42%),
    radial-gradient(circle at 88% 14%, rgba(255,255,255,.25), transparent 40%),
    radial-gradient(circle at 70% 78%, rgba(255,255,255,.20), transparent 46%),
    radial-gradient(circle at 18% 86%, rgba(255,255,255,.24), transparent 44%),
    radial-gradient(circle at 42% 52%, rgba(255,255,255,.10), transparent 52%);
}

/* page */
.page_wrap{
  position:relative;
  z-index:2;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px 14px 40px;
}
.page{
  width:100%;
  max-width:420px;
}

/* card */
.card{
  width:100%;
  background:var(--card);
  border-radius:18px;
  box-shadow: var(--shadow);
  border:1px solid rgba(255,255,255,.65);
  padding:18px 16px 14px;
  overflow:visible; /* чтобы список стран не обрезался */
}

/* title like tg */
.page_title{
  font-size:22px;
  font-weight:800;
  margin:0 0 6px;
  text-align:center;
}
.page_desc{
  margin:0 0 12px;
  text-align:center;
  color:var(--muted);
  font-size:14px;
  line-height:1.4;
}

/* fields */
.form{ margin-top:10px; width:100%; }
.field{ margin:10px 0; width:100%; }
.label{
  display:block;
  font-size:13px;
  font-weight:650;
  color:rgba(28,39,48,.82);
  margin:0 0 6px;
}

/* input base */
.input{
  display:block;
  width:100%;
  max-width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.10);
  background:#f5f7fb;
  outline:none;
  font-size:15px;
  line-height:1.2;
}
.input:focus{
  border-color: rgba(42,171,238,.55);
  box-shadow: 0 0 0 4px rgba(42,171,238,.14);
  background:#eef5ff;
}
.input::placeholder{ color: rgba(107,122,134,.72); }

/* ==== intl-tel-input FIXES (важно!) ==== */
.iti{
  width:100% !important;
  max-width:100% !important;
  display:block;
}
.iti input,
.iti input[type="tel"]{
  width:100% !important;
  max-width:100% !important;
  box-sizing:border-box !important;
}

/* чтобы input не "вылезал" из-за внутренних paddings iti */
.iti--separate-dial-code .iti__tel-input,
.iti--separate-dial-code input[type="tel"]{
  padding-left: 96px !important; /* место под флаг+код */
}

/* контейнер выбора страны */
.iti__selected-flag{
  border-radius: 12px;
}
.iti__selected-dial-code{
  font-weight:700;
  color: rgba(28,39,48,.8);
}

/* список стран поверх карточки */
.iti__country-list{ z-index:999999 !important; }

/* button */
.tg_btn{
  width:100%;
  border:0;
  border-radius: 999px;
  padding: 12px 14px;
  font-weight:800;
  font-size:15px;
  color:#fff;
  background: var(--btn);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  user-select:none;
}
.tg_btn:hover{ background: var(--btn-hover); }
.tg_btn:active{ transform: translateY(1px); }
.tg_btn:disabled{ opacity:.72; cursor:not-allowed; }

.tg_btn_shine{
  position:relative;
  overflow:hidden;
}
.tg_btn_shine::after{
  content:"";
  position:absolute;
  top:-50%;
  left:-80%;
  width:60%;
  height:200%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
  transform: rotate(20deg);
  animation: shine 3.2s ease-in-out infinite;
}
@keyframes shine{
  0%{ left:-80%; }
  55%{ left:120%; }
  100%{ left:120%; }
}

.btn_spinner{
  width:16px;height:16px;border-radius:50%;
  border:2px solid rgba(255,255,255,.45);
  border-top-color:#fff;
  display:none;
  animation: spin .8s linear infinite;
}
@keyframes spin{ to{ transform: rotate(360deg); } }

.hint{
  margin-top:10px;
  font-size:12px;
  color: rgba(107,122,134,.92);
  text-align:center;
  line-height:1.35;
}
.error{
  display:none;
  margin-top:10px;
  padding:10px 12px;
  border-radius:14px;
  background: rgba(255,59,48,.10);
  border: 1px solid rgba(255,59,48,.22);
  color:#b31526;
  font-size:13px;
  line-height:1.35;
}
.thanks{ padding: 16px 6px 6px; text-align:center; }
.thanks_title{ font-size:20px; font-weight:900; color:#0f5132; }
.thanks_text{ margin-top:8px; font-size:14px; color: rgba(28,39,48,.9); line-height:1.45; }

@media (max-width:380px){
  .page{ max-width: 360px; }
  .card{ padding:16px 14px 12px; }
}