.gx{--gx-sky:#0284c7;--gx-sky-d:#0369a1;--gx-sky-50:#f0f9ff;--gx-g900:#111827;--gx-g700:#374151;--gx-g600:#4b5563;--gx-g500:#6b7280;--gx-g400:#9ca3af;--gx-g300:#d1d5db;--gx-g200:#e5e7eb;--gx-g100:#f3f4f6;--gx-g50:#f9fafb}
.gx{font-size:16px;color:var(--gx-g900)}
.gx *{box-sizing:border-box}
.gx-page{padding:16px}
.gx-card{background:#fff;border:1px solid var(--gx-g200);border-radius:12px;box-shadow:0 1px 2px rgba(16,24,40,.05),0 6px 16px rgba(16,24,40,.06);padding:24px;max-width:420px;margin:0 auto}
.gx-title{font-size:22px;font-weight:700;line-height:1.25;margin:0 0 4px}
.gx-sub{font-size:14px;color:var(--gx-g500);margin:0 0 20px}
.gx-field{margin:0 0 16px}
.gx-label{display:block;font-size:14px;font-weight:500;color:var(--gx-g700);margin:0 0 6px}
.gx-label i{font-style:normal;font-weight:400;color:var(--gx-g500)}
.gx-input{display:flex;align-items:center;width:100%;height:44px;padding:0 12px;border:1px solid var(--gx-g300);border-radius:8px;background:#fff;font-size:16px;color:var(--gx-g900)}
.gx-input.ph{color:var(--gx-g400)}
.gx-input.focus{border-color:var(--gx-sky);box-shadow:0 0 0 3px rgba(2,132,199,.16)}
.gx-input.err{border-color:#f87171;box-shadow:0 0 0 3px rgba(248,113,113,.15)}
.gx-input.sel{justify-content:space-between}
.gx-input.sel::after{content:"";width:9px;height:9px;border-right:2px solid var(--gx-g500);border-bottom:2px solid var(--gx-g500);transform:rotate(45deg) translateY(-3px);margin-left:8px;flex:none}
.gx-hint{font-size:13px;color:var(--gx-g500);margin:6px 0 0}
.gx-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:44px;padding:0 16px;border-radius:8px;font-size:16px;font-weight:600;border:1px solid transparent;cursor:pointer;white-space:nowrap}
.gx-primary{background:var(--gx-sky);color:#fff}
.gx-primary.off{background:#7cc4e6}
.gx-second{background:#fff;color:var(--gx-g700);border-color:var(--gx-g300)}
.gx-links{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:16px;font-size:14px}
.gx-links.c{justify-content:center}
.gx-link{color:var(--gx-sky-d);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.gx-who{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:8px 12px;background:var(--gx-g50);border:1px solid var(--gx-g200);border-radius:8px;margin:0 0 16px;font-weight:600}
.gx-who .gx-link{font-weight:400;font-size:14px}
.gx-cap{display:flex;gap:8px;align-items:center}
.gx-cap .img{flex:none;width:132px;height:44px;border:1px solid var(--gx-g300);border-radius:8px;background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden}
.gx-cap .img img{max-width:100%;max-height:100%}
.gx-cap .gx-input{flex:1;min-width:0}
.gx-icon{flex:none;width:44px;height:44px;border:1px solid var(--gx-g300);border-radius:8px;background:#fff;display:flex;align-items:center;justify-content:center;color:var(--gx-g600)}
.gx-code{justify-content:center;height:56px;font-size:28px;font-weight:700;letter-spacing:.45em;padding-left:.45em;font-variant-numeric:tabular-nums}
.gx-code.ph{color:var(--gx-g300)}
.gx-code i{font-style:normal;color:var(--gx-g300)}
.gx-alert{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid;border-radius:8px;font-size:14px;line-height:1.45;margin:0 0 16px;text-align:left}
.gx-alert svg{flex:none;margin-top:1px}
.gx-err{background:#fef2f2;border-color:#fecaca;color:#b91c1c}
.gx-ok{background:#f0fdf4;border-color:#bbf7d0;color:#15803d}
.gx-info{background:var(--gx-sky-50);border-color:#bae6fd;color:#075985}
.gx-warn{background:#fffbeb;border-color:#fde68a;color:#92400e}
.gx-seg{display:grid;grid-template-columns:1fr 1fr;background:var(--gx-g100);border-radius:9px;padding:3px;margin:0 0 16px}
.gx-seg button{height:38px;display:flex;align-items:center;justify-content:center;border-radius:7px;font-size:14px;font-weight:500;color:var(--gx-g500)}
.gx-seg .on{background:#fff;color:var(--gx-g900);box-shadow:0 1px 3px rgba(16,24,40,.12)}
.gx-check{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--gx-g700);margin:4px 0 20px}
.gx-check .box{flex:none;width:20px;height:20px;border:1.5px solid var(--gx-g400);border-radius:5px;margin-top:1px;display:flex;align-items:center;justify-content:center}
.gx-check .box.on{background:var(--gx-sky);border-color:var(--gx-sky);color:#fff}
.gx-timer{font-size:14px;color:var(--gx-g500);text-align:center;margin-top:14px}
.gx-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:0 0 20px}
.gx-steps div{font-size:12px;color:var(--gx-g400);font-weight:500}
.gx-steps div::before{content:"";display:block;height:4px;border-radius:2px;background:var(--gx-g200);margin-bottom:6px}
.gx-steps .done,.gx-steps .cur{color:var(--gx-sky-d)}
.gx-steps .done::before,.gx-steps .cur::before{background:var(--gx-sky)}
.gx-steps .cur{font-weight:700}
.gx-modal{background:rgba(17,24,39,.55);padding:28px 12px;min-height:100%;display:flex;align-items:flex-start;justify-content:center}
.gx-modal .gx-card{width:100%;box-shadow:0 20px 50px rgba(0,0,0,.25)}
.gx-mhead{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin:0 0 4px}
.gx-close{flex:none;width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--gx-g500);background:var(--gx-g100)}
.gx-btnrow{display:flex;gap:10px;margin-top:20px}
.gx-btnrow .gx-btn{flex:1}
.gx-result{text-align:center}
.gx-badge-ico{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:4px auto 16px}
.gx-result .gx-title{margin-bottom:8px}
.gx-result p{color:var(--gx-g600);font-size:15px;margin:0 0 20px}
.gx-big{font-size:40px;font-weight:700;font-variant-numeric:tabular-nums;margin:0 0 4px}

/* Живые поля и модальные окна поверх существующей страницы. */
.gx{line-height:1.5;overflow-wrap:anywhere}
.gx [x-cloak]{display:none!important}
.gx-input{min-width:0;outline:none}
.gx-input:focus{border-color:var(--gx-sky);box-shadow:0 0 0 3px rgba(2,132,199,.16)}
.gx-input.err:focus{border-color:#f87171;box-shadow:0 0 0 3px rgba(248,113,113,.15)}
.gx-code{text-align:center}
.gx-code::placeholder{color:var(--gx-g300);opacity:1}
.gx-btn:disabled{background:#7cc4e6;cursor:default}
.gx button:disabled{cursor:default}
.gx-seg button{border:0;cursor:pointer;background:transparent}
.gx-seg button.on{background:#fff}
.gx-check input{flex:none;width:20px;height:20px;margin-top:1px;accent-color:var(--gx-sky)}
.gx-pass{display:flex;gap:8px}
.gx-pass .gx-input{flex:1}
.gx-modal{position:fixed;inset:0;z-index:50;overflow-y:auto;align-items:center}
.gx-modal .gx-card{max-height:calc(100dvh - 56px);overflow-y:auto;margin:auto}
.gx-badge-ico.gx-ok,.gx-badge-ico.gx-info,.gx-badge-ico.gx-warn{border:0}
@media(max-width:440px){.gx-page{padding:12px 4px}.gx-card{padding:20px}.gx-modal{align-items:flex-start}.gx-modal .gx-card{margin:0 auto}}