/* KIT VPN — платёжная страница. Токены совпадают с Mini App («Прилив»). */
:root{
  --abyss:#061829; --deep:#0B2E4A; --ocean:#124C73; --current:#1E6E93; --lagoon:#2A9BB4; --shallow:#7FD0DA;
  --bg:#EEF2F6; --bg-2:#E4EAF0; --surface:#FFFFFF; --surface-2:#F5F8FA; --line:#DAE2EA; --line-strong:#C4D0DB;
  --text:#0C2235; --text-2:#465A6C; --text-3:#58697A;
  --action:#0B2E4A; --action-pressed:#061829; --on-action:#FFFFFF; --ring:#0F6F90; --tint:#EEF6FA;
  --disabled-bg:#E1E7ED; --disabled-text:#7E8FA0; --danger:#A3301A; --danger-soft:#FBE1D8; --success:#1B7A5B; --success-soft:#DCF0E7;
  --focus:#E3A23B;
  --shadow-1:0 1px 2px rgba(12,34,53,.06),0 8px 22px -16px rgba(12,34,53,.3);
  --shadow-2:0 2px 6px rgba(12,34,53,.06),0 28px 56px -30px rgba(12,34,53,.6);
  --font-ui:'Onest',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  --font-display:'Unbounded','Onest',-apple-system,'Segoe UI',Roboto,sans-serif;
  --spring:cubic-bezier(.32,.72,0,1); --ease-out:cubic-bezier(.22,1,.36,1);
  color-scheme:light;
  box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  color-scheme:dark;
  --bg:#06121D; --bg-2:#0A1A28; --surface:#0E2032; --surface-2:#12283B; --line:#1B3650; --line-strong:#27496A;
  --text:#E6F0F6; --text-2:#A5B9C9; --text-3:#8EA4B6;
  --action:#5CC4DC; --action-pressed:#3FAAC4; --on-action:#04121C; --ring:#7FD0DA; --tint:#0F2A3E;
  --disabled-bg:#16304A; --disabled-text:#6F8AA2; --danger:#F49680; --danger-soft:#3D1B14; --success:#6FD3A8; --success-soft:#0F3529;
  --shadow-1:0 1px 2px rgba(0,0,0,.35); --shadow-2:0 28px 56px -26px rgba(0,0,0,.85);
}}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#06121D; --bg-2:#0A1A28; --surface:#0E2032; --surface-2:#12283B; --line:#1B3650; --line-strong:#27496A;
  --text:#E6F0F6; --text-2:#A5B9C9; --text-3:#8EA4B6;
  --action:#5CC4DC; --action-pressed:#3FAAC4; --on-action:#04121C; --ring:#7FD0DA; --tint:#0F2A3E;
  --disabled-bg:#16304A; --disabled-text:#6F8AA2; --danger:#F49680; --danger-soft:#3D1B14; --success:#6FD3A8; --success-soft:#0F3529;
  --shadow-1:0 1px 2px rgba(0,0,0,.35); --shadow-2:0 28px 56px -26px rgba(0,0,0,.85);
}
*,*::before,*::after{box-sizing:border-box}
html{height:100%;scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;min-height:100%;font-family:var(--font-ui);color:var(--text);line-height:1.45;-webkit-font-smoothing:antialiased;
  background:radial-gradient(120% 70% at 50% -10%,color-mix(in srgb,var(--lagoon) 18%,transparent),transparent 60%),var(--bg)}
button,a{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:12px}
.hidden{display:none!important}
.page{max-width:480px;margin:0 auto;padding:24px 16px 32px}

.brand{display:flex;align-items:center;gap:12px;margin:4px 4px 18px}
.brand-mark{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--deep);color:#7FD0DA;flex:none}
.brand b{display:block;font-family:var(--font-display);font-weight:600;font-size:1.0625rem;letter-spacing:.01em}
.brand span{display:flex;align-items:center;gap:6px;font-size:.875rem;color:var(--text-2)}
.brand span svg{color:var(--success)}

.demo-banner{margin:0 0 14px;padding:10px 14px;border-radius:14px;background:color-mix(in srgb,var(--focus) 18%,var(--surface));color:var(--text);font-size:.8125rem;font-weight:600;text-align:center}

.hero{position:relative;overflow:hidden;isolation:isolate;border-radius:30px;padding:22px 22px 0;color:#fff;
  background:linear-gradient(180deg,#071F33,#0B2E4A);box-shadow:var(--shadow-2);animation:rise .7s var(--spring) both}
@keyframes rise{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
.hero::before{content:"";position:absolute;inset:0;z-index:-2;background:radial-gradient(80% 60% at 90% 0%,rgba(127,208,218,.3),transparent 60%)}
.hero-water{position:absolute;left:0;right:0;bottom:0;height:88px;z-index:-1;background:linear-gradient(180deg,#1A6C92,#0B3656)}
.hero-water svg{position:absolute;left:0;bottom:calc(100% - 2px);width:200%;height:22px;display:block;animation:drift 16s linear infinite}
.hero-water svg path{fill:#2280A6}
.hero-water svg.w2{height:16px;opacity:.8;animation-duration:24s;animation-direction:reverse}
.hero-water svg.w2 path{fill:#165F85}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.order{font-size:.8125rem;color:rgba(255,255,255,.7);display:flex;align-items:center;gap:8px}
.order button{border:0;background:rgba(255,255,255,.12);color:#fff;border-radius:999px;padding:3px 10px 3px 8px;display:inline-flex;align-items:center;gap:5px;font-size:.8125rem;font-weight:600;min-height:28px}
.hero-main{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-top:14px}
.term{font-family:var(--font-display);font-weight:600;font-size:2.5rem;line-height:1;letter-spacing:-.03em}
.price{font-family:var(--font-display);font-weight:600;font-size:2rem;line-height:1;color:#FFD6A0;white-space:nowrap}
.kind{margin-top:10px;font-size:.9375rem;color:rgba(255,255,255,.9)}
.sea{position:relative;margin:30px -22px 0;padding:22px 22px 20px;isolation:isolate}
.sea .hero-water{height:100%}
.perks{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0}
.perks li{display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border-radius:12px;background:rgba(6,24,41,.35);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);font-size:.875rem;font-weight:600}
.perks svg{color:#7FD0DA;flex:none}

.sec{font-size:.9375rem;font-weight:600;color:var(--text-2);margin:28px 4px 10px}
.methods{display:grid;gap:10px}
.method{position:relative;display:flex;align-items:center;gap:14px;width:100%;text-align:left;border:0;border-radius:22px;padding:14px 16px 14px 14px;min-height:84px;
  background:var(--surface);box-shadow:0 0 0 1.5px var(--line),var(--shadow-1);transition:box-shadow .28s,background .28s,transform .16s var(--ease-out);animation:rise .6s var(--spring) both}
.method:nth-child(2){animation-delay:60ms}.method:nth-child(3){animation-delay:120ms}
.method:active{transform:scale(.985)}
.method:disabled{opacity:.45;cursor:default;transform:none}
.method[aria-checked="true"]{background:var(--tint);box-shadow:0 0 0 2.5px var(--ring),0 18px 30px -22px var(--ring)}
.mi{flex:none;width:56px;height:56px;border-radius:18px;display:grid;place-items:center;transition:transform .45s var(--spring)}
.method[aria-checked="true"] .mi{transform:scale(1.06)}
.mi-sbp{background:#E3F4F6;color:#0F6F90}
.mi-card{background:#0B2E4A;color:#fff}
.mi-crypto{background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line)}
:root[data-theme="dark"] .mi-sbp{background:#123A52;color:#7FD0DA}
:root[data-theme="dark"] .mi-card{background:#1E6E93;color:#fff}
:root[data-theme="dark"] .mi-crypto{background:var(--surface-2)}
@media (prefers-color-scheme: dark){
 :root:not([data-theme="light"]) .mi-sbp{background:#123A52;color:#7FD0DA}
 :root:not([data-theme="light"]) .mi-card{background:#1E6E93;color:#fff}
 :root:not([data-theme="light"]) .mi-crypto{background:var(--surface-2)}
}
.coins{position:relative;width:52px;height:50px;display:block}
.coins img{position:absolute;width:25px;height:25px;border-radius:50%;box-shadow:0 0 0 2px var(--surface-2);transition:transform .45s var(--spring)}
.coins .c1{left:1px;top:2px}.coins .c2{right:1px;top:2px}.coins .c3{left:13.5px;bottom:1px}
.method[aria-checked="true"] .coins .c1{transform:translate(-1px,-1px)}.method[aria-checked="true"] .coins .c2{transform:translate(1px,-1px)}.method[aria-checked="true"] .coins .c3{transform:translateY(1px)}
.tickers{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.tickers span{display:inline-flex!important;align-items:center;gap:5px;margin:0!important;padding:3px 8px 3px 4px;border-radius:999px;background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line);font-size:.8125rem!important;font-weight:600;color:var(--text)!important}
.tickers img{width:16px;height:16px;border-radius:50%}
.mt small{display:block;font-size:.8125rem;color:var(--text-3);margin-top:6px}
.sbp-logo{width:40px;height:40px;object-fit:contain}
.mt{flex:1;min-width:0}
.mt b{display:block;font-weight:600;font-size:1.0625rem}
.mt span{display:block;font-size:.875rem;color:var(--text-2);margin-top:2px}
.radio{flex:none;width:24px;height:24px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--line-strong);display:grid;place-items:center;transition:all .3s var(--spring)}
.method[aria-checked="true"] .radio{background:var(--ring);box-shadow:none;color:var(--surface)}
.radio svg{opacity:0;transform:scale(.4);transition:all .3s var(--spring)}
.method[aria-checked="true"] .radio svg{opacity:1;transform:none}

.actions{display:grid;gap:8px;margin-top:22px}
.btn{width:100%;min-height:58px;border-radius:16px;border:0;font-weight:600;font-size:1.0625rem;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:12px 18px;text-align:center;text-decoration:none;
  transition:transform .16s var(--ease-out),background .28s,color .28s,box-shadow .28s}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--action);color:var(--on-action);box-shadow:0 14px 26px -16px var(--action)}
.btn-primary:active{background:var(--action-pressed)}
.btn-primary[disabled]{background:var(--disabled-bg);color:var(--disabled-text);box-shadow:none;transform:none;cursor:default}
.btn-ghost{background:transparent;color:var(--text-2);box-shadow:inset 0 0 0 1.5px var(--line);min-height:54px}
.btn-ghost:active{background:var(--surface-2)}
.btn .pay-sum{font-family:var(--font-display);font-weight:600}
.fine{margin:18px 6px 0;font-size:.8125rem;color:var(--text-3);text-align:center;line-height:1.5}
.fine a{color:var(--text-2)}
.note{margin:12px 4px 0;font-size:.875rem;color:var(--text-3);text-align:center}
.spin{width:18px;height:18px;border-radius:50%;border:2.25px solid currentColor;border-right-color:transparent;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.state{display:none;flex-direction:column;align-items:center;text-align:center;padding:8px 0 0}
.state.on{display:flex;animation:rise .55s var(--spring) both}
.state .scene{position:relative;overflow:hidden;isolation:isolate;width:100%;height:190px;border-radius:28px;background:linear-gradient(180deg,#071F33,#124C73)}
.state .scene .hero-water{height:var(--lvl,40%);transition:height 1.6s var(--spring)}
.state.ok .scene .hero-water{animation:fill 1.6s var(--spring) both}
@keyframes fill{from{height:8%}to{height:68%}}
.state.fail .scene{background:linear-gradient(180deg,#FFE9DF,#F3A283)}
.state.fail .scene .hero-water{--lvl:24%;background:linear-gradient(180deg,#3E8FA3,#16566E)}
.state.fail .scene .hero-water svg path{fill:#5AA6B6}
.state.fail .scene .hero-water svg.w2 path{fill:#2F7D93}
.state h2{font-family:var(--font-display);font-weight:600;font-size:1.375rem;margin:20px 0 0;line-height:1.25}
.state p{color:var(--text-2);margin:10px 0 0;max-width:34ch;font-size:.9375rem}
.state .mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.8125rem;color:var(--text-3);margin-top:8px}
.state .actions{width:100%}
.bubbles{position:absolute;inset:0;pointer-events:none}
.bubbles i{position:absolute;bottom:-10px;border-radius:50%;border:1.5px solid rgba(255,255,255,.55);background:rgba(255,255,255,.12);animation:bub var(--t,5s) var(--d,0s) ease-in infinite}
@keyframes bub{0%{transform:translateY(0);opacity:0}15%{opacity:1}100%{transform:translateY(-220px) translateX(var(--x,8px));opacity:0}}
.ok .bubbles i{animation-iteration-count:1;animation-fill-mode:both}
.demo-panel{margin-top:14px;display:flex;gap:8px;justify-content:center;flex-wrap:wrap;width:100%}
.demo-panel span{width:100%;font-size:.75rem;color:var(--text-3)}
.demo-chip{border:1px dashed var(--line-strong);background:transparent;color:var(--text-2);border-radius:999px;padding:6px 12px;font-size:.8125rem;min-height:36px}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);opacity:0;background:var(--text);color:var(--bg);padding:12px 16px;border-radius:14px;font-size:.9375rem;font-weight:500;transition:all .35s var(--spring);pointer-events:none;max-width:calc(100% - 32px);z-index:20}
.toast.on{opacity:1;transform:translate(-50%,0)}
.loading-box{display:flex;flex-direction:column;align-items:center;gap:14px;padding:48px 16px;color:var(--text-2)}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}