:root{--tg:#2aabee;--tg2:#229ed9;--text:#1f2d3d}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Arial,Helvetica,sans-serif;color:var(--text)}
body{background:linear-gradient(180deg,#d1d7b7 0%,#a6be92 27%,#79a56c 55%,#84ad75 80%,#9dbc8b 100%) fixed;display:flex;align-items:center;justify-content:center;padding:24px;position:relative;overflow-x:hidden}
body:before{content:"";position:fixed;inset:0;pointer-events:none;background:url("pattern.svg") 0 0/420px 420px}
.page{width:100%;max-width:460px;position:relative;z-index:1}
.card{background:rgba(255,255,255,.96);border-radius:30px;padding:36px 26px 30px;text-align:center;box-shadow:0 18px 55px rgba(56,91,115,.20);border:1px solid rgba(255,255,255,.75)}
.logo{position:relative;width:150px;height:150px;margin:0 auto;border-radius:50%;background:linear-gradient(145deg,#2aabee,#1b7fc0);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:46px;box-shadow:0 12px 30px rgba(40,70,35,.35)}
.logo img{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;object-fit:cover}
.chname{margin-top:18px;font-size:28px;font-weight:800}.chsub{margin-top:6px;font-size:15px;color:#7d8b96}
h1{margin:22px 0 10px;font-size:23px;line-height:1.3;font-weight:700}
.desc{font-size:17px;line-height:1.5;color:#33414c;margin:0 auto 22px;max-width:380px}
form{text-align:left}
label.f{display:block;font-size:14px;color:#5b6a76;margin:0 0 6px}
input[type=text]{width:100%;height:54px;border:2px solid #d5dde3;border-radius:14px;padding:0 16px;font-size:17px;outline:none;transition:.2s;background:#fff}
input[type=text]:focus{border-color:var(--tg)}
.opts{margin:16px 0 4px;display:flex;flex-direction:column;gap:10px}
.opt{display:flex;align-items:center;gap:12px;padding:14px 16px;border:2px solid #d5dde3;border-radius:14px;cursor:pointer;font-size:16px;transition:.2s;background:#fff}
.opt input{width:20px;height:20px;accent-color:var(--tg);flex:none;margin:0}
.opt:has(input:checked){border-color:var(--tg);background:#eef8fe}
.err{display:none;color:#c0392b;font-size:14px;margin:8px 2px 0}.err.on{display:block}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:58px;margin-top:18px;border:0;border-radius:999px;background:var(--tg);color:#fff;text-decoration:none;font-size:17px;font-weight:700;padding:16px 28px;box-shadow:0 8px 22px rgba(42,171,238,.28);cursor:pointer;transition:.2s;font-family:inherit}
.btn:hover{background:var(--tg2)}.btn[disabled]{opacity:.6;cursor:wait}.btn[hidden]{display:none!important}
.btn.alt{background:#fff;color:var(--tg2);border:2px solid var(--tg);box-shadow:none}
.btn svg{width:22px;height:22px;fill:#fff;flex:none}
.note{margin-top:16px;font-size:12px;color:#84919b;line-height:1.5;text-align:center}.note a{color:#5b6a76}
.steps{list-style:none;margin:0 0 6px;padding:0;text-align:left}
.steps li{display:flex;gap:12px;align-items:flex-start;margin:0 0 12px;font-size:16px;line-height:1.4}
.steps b{flex:none;width:26px;height:26px;border-radius:50%;background:var(--tg);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px}
.stores{display:flex;gap:10px;margin-top:6px}.stores .btn{margin-top:8px;min-height:50px;font-size:15px;padding:12px}
.footer{text-align:center;padding:16px 8px 0;font-size:13px}.footer a{color:#1f3a1c;text-decoration:none;margin:0 8px}.footer a:hover{text-decoration:underline}
.doc{background:rgba(255,255,255,.96);border-radius:24px;padding:28px;line-height:1.55;font-size:15px}
.doc h1{font-size:24px;margin-top:0}
@media(max-width:520px){body{padding:16px}.card{padding:28px 18px 24px}.logo{width:130px;height:130px}.chname{font-size:25px}h1{font-size:21px}}

.hint{margin:12px 0 0;font-size:13px;line-height:1.4;opacity:.8;text-align:center}

/* Disabled/active visual states for direct Telegram conversion */
.btn#go{background:#229ed9;box-shadow:0 8px 22px rgba(42,171,238,.28);transition:background .2s,box-shadow .2s,transform .2s;}
.btn#go:disabled{background:#a5adb6;color:#f7f8f9;box-shadow:none;opacity:1;cursor:not-allowed;animation:none;}
.btn#go:not(:disabled){animation:buttonPulse 1.9s ease-in-out infinite;}
@keyframes buttonPulse{0%,100%{box-shadow:0 6px 15px rgba(34,158,217,.27)}50%{box-shadow:0 0 0 7px rgba(34,158,217,.13),0 7px 24px rgba(34,158,217,.32)}}
.form-tip{font-size:13px;line-height:1.35;text-align:center;color:#677784;margin:9px 0 0;}
.form-fallback{display:block;text-align:center;font-size:13px;margin:10px 0 0;color:#196b9c;}
.form-fallback[hidden]{display:none!important;}
@media(prefers-reduced-motion:reduce){.btn#go:not(:disabled){animation:none}}