:root {
  --bg: #17212b;
  --panel: rgba(24, 33, 43, 0.88);
  --card-top: rgba(35, 48, 61, 0.96);
  --card-bottom: rgba(22, 31, 40, 0.98);
  --border: rgba(255, 255, 255, 0.10);
  --text: #ffffff;
  --muted: rgba(255, 255, 255, 0.62);
  --muted-soft: rgba(255, 255, 255, 0.38);
  --danger: #ff6470;
  --danger-bg: rgba(255, 70, 91, 0.13);
  --danger-border: rgba(255, 82, 104, 0.42);
  --blue: #2aabee;
  --blue-2: #229ed9;
  --green: #39b862;
  --green-2: #279145;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); -webkit-text-size-adjust: 100%; }
body {
  min-height: 100vh;
  min-height: 100svh;
  font-family: Inter, Manrope, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 12% 18%, rgba(42, 171, 238, 0.16), transparent 28%),
    radial-gradient(circle at 88% 20%, rgba(74, 222, 128, 0.10), transparent 26%),
    radial-gradient(circle at 50% 100%, rgba(42, 171, 238, 0.12), transparent 35%),
    linear-gradient(180deg, #17212b 0%, #111b24 100%);
  overflow-x: hidden;
}
body::before, body::after { content: ""; position: fixed; inset: 0; pointer-events: none; }
body::before {
  background:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.9), rgba(0,0,0,0.50));
}
body::after {
  background:
    radial-gradient(circle at 16% 30%, rgba(42, 171, 238, 0.22), transparent 18%),
    radial-gradient(circle at 76% 22%, rgba(42, 171, 238, 0.16), transparent 16%),
    radial-gradient(circle at 50% 76%, rgba(255,255,255,0.05), transparent 20%);
  filter: blur(40px);
  opacity: 0.75;
  animation: glowShift 22s linear infinite alternate;
}
@keyframes glowShift {
  from { transform: translate3d(0,0,0) scale(1); }
  to { transform: translate3d(0,-16px,0) scale(1.04); }
}
.page { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; position: relative; z-index: 1; }
.header {
  position: sticky; top: 0; z-index: 3; flex: 0 0 auto;
  background: var(--panel); backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.header__inner {
  width: 100%; max-width: 1180px; margin: 0 auto;
  min-height: clamp(56px, 8svh, 74px);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: env(safe-area-inset-top) clamp(14px, 3vw, 24px) 0;
}
.brand {
  display: inline-flex; align-items: center; gap: clamp(9px, 2.6vw, 12px);
  color: #fff; text-decoration: none; font-weight: 800;
  font-size: clamp(19px, 5vw, 24px); line-height: 1; min-width: 0;
}
.brand > span:last-child { display: block; line-height: 1; transform: translateY(-1px); }
.brand__icon {
  width: clamp(28px, 7vw, 31px); height: clamp(28px, 7vw, 31px);
  border-radius: 50%; display: inline-grid; place-items: center;
  background: linear-gradient(180deg, #37aee2 0%, #1d93d2 100%);
  box-shadow: 0 10px 24px rgba(42,171,238,0.28); flex-shrink: 0;
}
.brand__icon svg { width: 54%; height: 54%; fill: white; transform: translate(-1px, 1px); transform-origin: center; }
.header__cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: clamp(34px, 7vw, 40px); padding: 0 clamp(14px, 4vw, 18px);
  border-radius: 999px; background: var(--blue); color: #fff; text-decoration: none;
  font-size: clamp(12px, 3vw, 13px); font-weight: 800; letter-spacing: .02em;
  box-shadow: 0 10px 28px rgba(42,171,238,.22); flex-shrink: 0;
}
.app {
  flex: 1 1 auto; width: 100%; min-height: 0; display: flex; align-items: center; justify-content: center;
  padding: clamp(14px, 3.6svh, 34px) clamp(12px, 4vw, 28px) max(clamp(14px, 3.6svh, 34px), env(safe-area-inset-bottom));
}
.bot-card {
  width: min(100%, 420px); border-radius: clamp(22px, 5vw, 28px);
  padding: clamp(22px, 4.4svh, 38px) clamp(18px, 5vw, 30px);
  background: linear-gradient(180deg, var(--card-top), var(--card-bottom));
  border: 1px solid var(--border);
  box-shadow: 0 30px 90px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.06);
  position: relative; overflow: hidden;
}
.bot-card::before {
  content: ""; position: absolute; inset: -1px;
  background:
    radial-gradient(circle at 50% 0%, rgba(42,171,238,.15), transparent 38%),
    radial-gradient(circle at 16% 82%, rgba(47,168,79,.12), transparent 28%);
  pointer-events: none;
}
.bot-card > * { position: relative; z-index: 1; }
.avatar-wrapper {
  width: clamp(76px, 15svh, 112px); max-width: 28vw; aspect-ratio: 1;
  margin: 0 auto clamp(14px, 2.4svh, 22px); border-radius: 50%; padding: 4px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 0 0 5px rgba(42,171,238,.07), 0 14px 34px rgba(0,0,0,.28);
}
.bot-avatar { width: 100%; height: 100%; display: block; border-radius: 50%; object-fit: cover; border: 2px solid rgba(24,33,43,.92); background: #111; }
.bot-name {
  text-align: center; font-size: clamp(24px, 5.4vw, 32px); line-height: 1.12;
  font-weight: 800; letter-spacing: -.04em; color: #fff; text-wrap: balance; margin-bottom: clamp(7px, 1.4svh, 10px);
}
.bot-description {
  max-width: 330px; margin: 0 auto clamp(17px, 2.8svh, 26px); text-align: center;
  color: var(--muted); font-size: clamp(13px, 3.4vw, 16px); line-height: 1.38; font-weight: 600; text-wrap: balance;
}
.warning-box {
  width: 100%; margin: 0 0 clamp(16px, 2.8svh, 24px);
  padding: clamp(12px, 2.2svh, 16px) clamp(12px, 3vw, 14px);
  border-radius: 14px; background: var(--danger-bg); border: 1px solid var(--danger-border); text-align: center;
}
.warning-title { color: var(--danger); font-size: clamp(13px, 3.4vw, 14px); line-height: 1.32; font-weight: 800; text-transform: uppercase; }
.warning-text { margin-top: 4px; color: rgba(255,218,222,.78); font-size: clamp(12px,3.1vw,13px); line-height: 1.35; font-weight: 600; }
.step-section { margin-top: clamp(16px, 2.6svh, 22px); }
.step-title {
  text-align: center; color: var(--muted-soft); font-size: clamp(11px, 2.9vw, 12px);
  font-weight: 800; letter-spacing: .34em; text-transform: uppercase; margin-bottom: clamp(8px, 1.8svh, 12px);
}
.step-subtitle {
  text-align: center; color: rgba(255,255,255,.92); font-size: clamp(14px, 3.8vw, 16px);
  line-height: 1.32; font-weight: 600; margin-bottom: clamp(12px, 2.2svh, 16px);
}
.proxy-title {
  display: flex; align-items: center; justify-content: center; gap: 9px; text-align: center;
  color: #fff; font-size: clamp(18px, 4.6vw, 22px); line-height: 1.15; font-weight: 800;
  margin-bottom: clamp(12px, 2.2svh, 16px);
}
.proxy-title__icon, .proxy-title__arrow { font-size: clamp(18px, 4.4vw, 22px); line-height: 1; }
.proxy-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(8px, 2.4vw, 12px);
}
.btn {
  width: 100%; min-height: clamp(48px, 7.4svh, 56px); border: 0; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  text-decoration: none; color: #fff; font-size: clamp(14px, 3.8vw, 16px);
  font-weight: 800; line-height: 1; box-shadow: 0 16px 34px rgba(0,0,0,.20);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  -webkit-tap-highlight-color: transparent; white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); filter: brightness(1.04); }
.btn:active { transform: translateY(0); }
.btn-proxy-option {
  min-height: clamp(50px, 7.2svh, 60px); padding-left: clamp(8px, 2vw, 14px); padding-right: clamp(8px, 2vw, 14px);
  border-radius: clamp(14px, 4vw, 18px);
  background: linear-gradient(180deg, #34c995 0%, #1fb384 100%);
  box-shadow: 0 16px 34px rgba(31,179,132,.24);
  font-size: clamp(13px, 3.2vw, 15px);
}
.btn-primary { background: linear-gradient(180deg, var(--blue) 0%, var(--blue-2) 100%); box-shadow: 0 16px 34px rgba(42,171,238,.27); }
.icon { font-size: clamp(16px,4vw,18px); line-height: 1; }
.step-note { text-align: center; color: var(--muted-soft); font-size: clamp(11px,2.9vw,12px); font-weight: 700; margin-top: clamp(9px,1.8svh,12px); }
.footer { text-align: center; color: var(--muted-soft); font-size: clamp(10px,2.7vw,12px); font-weight: 800; margin-top: clamp(18px,3svh,26px); letter-spacing: .08em; text-transform: uppercase; }
.proxy-loading { text-align:center; color:var(--muted-soft); font-size:13px; font-weight:700; padding:8px 0; grid-column: 1 / -1; }

@media (min-width: 600px) { .bot-card { width: min(72vw, 430px); } }
@media (min-width: 900px) { .bot-card { width: min(42vw, 420px); } }
@media (max-width: 380px) { .proxy-grid { gap: 7px; } .btn-proxy-option { font-size: 12px; padding-left: 6px; padding-right: 6px; } }
@media (max-width: 320px) { .proxy-grid { grid-template-columns: 1fr; } .btn-proxy-option { min-height: 42px; } }
@media (max-height: 760px) {
  .header__inner { min-height: 54px; }
  .app { align-items: flex-start; padding-top: 12px; padding-bottom: 12px; }
  .bot-card { padding-top: 20px; padding-bottom: 20px; }
  .avatar-wrapper { width: clamp(68px,13svh,92px); margin-bottom: 12px; }
  .bot-name { font-size: clamp(23px,5.2vw,28px); }
  .bot-description { margin-bottom: 14px; font-size: clamp(12.5px,3.3vw,14px); }
  .warning-box { padding-top: 10px; padding-bottom: 10px; margin-bottom: 13px; }
  .step-section { margin-top: 13px; }
  .step-title { margin-bottom: 7px; }
  .step-subtitle { margin-bottom: 10px; font-size: 14px; }
  .proxy-title { font-size: 17px; margin-bottom: 10px; }
  .btn { min-height: 46px; }
  .btn-proxy-option { min-height: 44px; }
  .step-note { margin-top: 7px; }
  .footer { margin-top: 14px; }
}
@media (max-height: 640px) {
  .header__inner { min-height: 48px; }
  .brand { font-size: 17px; }
  .brand__icon { width: 26px; height: 26px; }
  .header__cta { min-height: 30px; padding-left: 12px; padding-right: 12px; font-size: 11px; }
  .app { padding-top: 8px; padding-bottom: 8px; }
  .bot-card { padding-top: 16px; padding-bottom: 16px; border-radius: 20px; }
  .avatar-wrapper { width: 62px; margin-bottom: 9px; }
  .bot-name { font-size: 21px; margin-bottom: 6px; }
  .bot-description { font-size: 12px; line-height: 1.28; margin-bottom: 10px; }
  .warning-title { font-size: 12px; }
  .warning-text { font-size: 11px; }
  .warning-box { padding: 9px 10px; margin-bottom: 10px; }
  .step-section { margin-top: 10px; }
  .step-title { font-size: 10px; margin-bottom: 5px; }
  .step-subtitle { font-size: 12.5px; line-height: 1.24; margin-bottom: 8px; }
  .proxy-title { font-size: 15px; margin-bottom: 8px; }
  .btn { min-height: 40px; font-size: 13px; }
  .btn-proxy-option { min-height: 38px; font-size: 12px; border-radius: 12px; }
  .step-note { font-size: 10px; margin-top: 6px; }
  .footer { font-size: 9px; margin-top: 10px; }
}
@media (max-width: 420px) { .app { padding-left: 14px; padding-right: 14px; } .bot-card { width: 100%; } }
@media (max-width: 360px) {
  .header__inner { padding-left: 12px; padding-right: 12px; }
  .brand { font-size: 17px; gap: 8px; }
  .bot-card { padding-left: 16px; padding-right: 16px; }
  .bot-name { font-size: 23px; }
  .btn { font-size: 13.5px; gap: 8px; }
}