/* ===== UkrSwap Market — Mini App ===== */

:root{
  --blue:#2f6bff; --blue-lo:#1f5bef; --blue-hi:#6d9bff;
  --usdt:#26a17b; --usdt-hi:#3fd39d;

  --bg:#060a16;
  --surface:rgba(255,255,255,.045);
  --surface-2:rgba(255,255,255,.075);
  --line:rgba(255,255,255,.09);
  --line-hi:rgba(255,255,255,.16);

  --ink:#f2f5fb;
  --ink-2:#c3cbdb;
  --muted:#7d879c;

  --r-xl:26px; --r-lg:20px; --r-md:14px; --r-sm:10px;
  --ease:cubic-bezier(.22,1,.36,1);

  --pad: max(20px, env(safe-area-inset-left));
}

html[data-scheme="light"]{
  --bg:#f5f7fd;
  --surface:rgba(16,24,40,.03);
  --surface-2:rgba(16,24,40,.05);
  --line:rgba(16,24,40,.09);
  --line-hi:rgba(16,24,40,.16);
  --ink:#101828;
  --ink-2:#39435a;
  --muted:#79839a;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg)}
body{
  font-family:"Manrope",system-ui,sans-serif;
  color:var(--ink);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  overscroll-behavior-y:none;
}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}

/* grain — снимает пластиковость градиентов */
.grain{
  position:fixed; inset:0; z-index:9; pointer-events:none; opacity:.4;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
html[data-scheme="light"] .grain{opacity:.22;mix-blend-mode:multiply}

/* ===== HERO ===== */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; align-items:center;
  padding: calc(env(safe-area-inset-top) + 84px) var(--pad) 64px;
  overflow:hidden;
  isolation:isolate;
}

.plasma{position:absolute;inset:-30% -20%;z-index:-1;filter:blur(58px) saturate(140%)}
.blob{position:absolute;display:block;border-radius:50%;will-change:transform}
.blob--1{
  width:78vw;height:78vw;left:-6vw;top:2vh;
  background:radial-gradient(circle at 35% 35%, #4d84ff 0%, #2f6bff 42%, rgba(47,107,255,0) 71%);
  animation:drift1 19s var(--ease) infinite alternate;
}
.blob--2{
  width:64vw;height:64vw;right:-14vw;top:26vh;
  background:radial-gradient(circle at 60% 40%, #7f5cff 0%, #2f4fd6 46%, rgba(47,79,214,0) 72%);
  animation:drift2 23s var(--ease) infinite alternate;
}
.blob--3{
  width:52vw;height:52vw;left:14vw;bottom:-6vh;
  background:radial-gradient(circle at 50% 50%, #26a17b 0%, rgba(38,161,123,.55) 40%, rgba(38,161,123,0) 70%);
  animation:drift3 27s var(--ease) infinite alternate;
  opacity:.75;
}
html[data-scheme="light"] .plasma{filter:blur(70px) saturate(120%);opacity:.5}

@keyframes drift1{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(6vw,-5vh,0) scale(1.14)}
  100%{transform:translate3d(-4vw,6vh,0) scale(.94)}
}
@keyframes drift2{
  0%{transform:translate3d(0,0,0) scale(1.04)}
  50%{transform:translate3d(-8vw,7vh,0) scale(.9)}
  100%{transform:translate3d(3vw,-4vh,0) scale(1.16)}
}
@keyframes drift3{
  0%{transform:translate3d(0,0,0) scale(.92)}
  100%{transform:translate3d(9vw,-9vh,0) scale(1.2)}
}
@media (prefers-reduced-motion:reduce){
  .blob{animation:none}
}

.hero__inner{position:relative;width:100%;max-width:520px;margin:0 auto}

.hero__fade{
  position:absolute;left:0;right:0;bottom:0;height:22vh;
  background:linear-gradient(to bottom, transparent, var(--bg));
}

/* brand */
.brand{display:inline-flex;align-items:center;gap:10px;margin-bottom:34px}
.brand__mark{
  display:grid;place-items:center;width:30px;height:30px;border-radius:9px;
  background:linear-gradient(145deg,var(--blue-hi),var(--blue-lo));
  font-weight:800;font-size:16px;color:#fff;
  box-shadow:0 6px 18px rgba(47,107,255,.45);
}
.brand__name{font-weight:800;font-size:16px;letter-spacing:-.01em}
.brand__thin{font-weight:500;color:var(--muted)}

.hero__title{
  font-size:clamp(38px, 12.4vw, 56px);
  font-weight:800; line-height:1.02; letter-spacing:-.045em;
  margin-bottom:18px;
}
.hero__title em{
  font-style:normal;
  background:linear-gradient(100deg,var(--blue-hi) 0%,#fff 46%,var(--usdt-hi) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
html[data-scheme="light"] .hero__title em{
  background:linear-gradient(100deg,var(--blue) 0%,#1a2233 52%,var(--usdt) 100%);
  -webkit-background-clip:text; background-clip:text;
}

.hero__sub{
  font-size:16px; color:var(--ink-2); font-weight:500;
  max-width:26em; margin-bottom:32px;
}

/* ticker */
.ticker{
  display:flex; align-items:center;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:16px 18px; margin-bottom:26px;
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
.ticker__box{flex:1;min-width:0}
.ticker__div{width:1px;align-self:stretch;background:var(--line);margin:0 18px}
.ticker__label{
  display:block;font-size:11px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);margin-bottom:5px;
}
.ticker__value{
  display:block;font-size:23px;font-weight:800;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
}
.ticker__value small{font-size:13px;font-weight:600;color:var(--muted);margin-left:3px}

.cta{
  display:flex;align-items:center;justify-content:center;gap:9px;
  width:100%;padding:17px 24px;border-radius:16px;
  font-weight:700;font-size:16px;color:#fff;
  background:linear-gradient(135deg,var(--blue-hi),var(--blue-lo));
  box-shadow:0 12px 34px rgba(47,107,255,.42), inset 0 1px 0 rgba(255,255,255,.25);
  transition:transform .18s var(--ease), box-shadow .25s;
}
.cta:active{transform:scale(.975);box-shadow:0 6px 18px rgba(47,107,255,.36)}
.cta svg{animation:nudge 2.4s ease-in-out infinite}
@keyframes nudge{0%,72%,100%{transform:translateY(0)}84%{transform:translateY(3px)}}

/* reveal */
[data-reveal]{opacity:0;transform:translateY(22px);animation:reveal .85s var(--ease) forwards;animation-delay:var(--d,0ms)}
@keyframes reveal{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  [data-reveal]{animation:none;opacity:1;transform:none}
  .cta svg{animation:none}
}

/* ===== MARKET ===== */
.market{
  position:relative; z-index:1;
  max-width:520px; margin:0 auto;
  padding:8px var(--pad) calc(env(safe-area-inset-bottom) + 56px);
}
.market__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.market__head h2{font-size:21px;font-weight:800;letter-spacing:-.03em}
.refresh{
  display:grid;place-items:center;width:38px;height:38px;border-radius:11px;
  background:var(--surface);border:1px solid var(--line);color:var(--ink-2);
  transition:transform .2s var(--ease), color .2s;
}
.refresh:active{transform:scale(.92)}
.refresh.is-spin svg{animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.list{display:flex;flex-direction:column;gap:12px}

.card{
  position:relative;
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  background:var(--surface);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  padding:20px;
  overflow:hidden;
  animation:cardIn .6s var(--ease) backwards;
  animation-delay:var(--d,0ms);
}
@keyframes cardIn{from{opacity:0;transform:translateY(14px)}}

/* лучшая цена подсвечена сверху световой линией */
.card--best{border-color:var(--line-hi)}
.card--best::before{
  content:"";position:absolute;top:0;left:14%;right:14%;height:1px;
  background:linear-gradient(90deg,transparent,var(--blue-hi),transparent);
}
.badge{
  position:absolute;top:0;right:20px;
  padding:5px 11px 6px;border-radius:0 0 9px 9px;
  font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  background:linear-gradient(180deg,var(--blue),var(--blue-lo));color:#fff;
}

.card__price{display:flex;align-items:baseline;gap:8px;margin-bottom:16px}
.card__num{font-size:34px;font-weight:800;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.card__cur{font-size:13px;font-weight:600;color:var(--muted)}

.rows{display:flex;flex-direction:column;gap:9px;margin-bottom:18px}
.row{display:flex;align-items:center;justify-content:space-between;gap:14px;font-size:14px}
.row__k{color:var(--muted);font-weight:500;flex-shrink:0}
.row__v{font-weight:700;text-align:right;font-variant-numeric:tabular-nums}

.banks{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.bank{
  padding:4px 9px;border-radius:7px;font-size:11.5px;font-weight:600;
  background:var(--surface-2);border:1px solid var(--line);color:var(--ink-2);
}

.buy{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;padding:14px;border-radius:var(--r-md);
  font-weight:700;font-size:15px;color:#fff;
  background:linear-gradient(135deg,var(--usdt-hi),var(--usdt));
  box-shadow:0 8px 22px rgba(38,161,123,.32), inset 0 1px 0 rgba(255,255,255,.22);
  transition:transform .18s var(--ease), opacity .2s;
}
.buy:active{transform:scale(.98)}
.buy[disabled]{opacity:.6;pointer-events:none}
.buy .spin{
  width:15px;height:15px;border-radius:50%;
  border:2px solid rgba(255,255,255,.35);border-top-color:#fff;
  animation:spin .6s linear infinite;
}

/* skeleton / empty */
.skel{
  display:block;border-radius:8px;
  background:linear-gradient(100deg,var(--surface) 30%,var(--surface-2) 50%,var(--surface) 70%);
  background-size:220% 100%;
  animation:shimmer 1.4s linear infinite;
}
@keyframes shimmer{to{background-position:-220% 0}}
.skel--rate{width:110px;height:26px}
.skel--vol{width:88px;height:26px}
.skel--card{width:100%;height:150px;border-radius:var(--r-xl)}
.card--skel{padding:0;border:none;background:none;backdrop-filter:none}

.empty{
  text-align:center;padding:44px 20px;border:1px dashed var(--line);
  border-radius:var(--r-xl);color:var(--muted);font-size:14.5px;font-weight:500;
}
.empty strong{display:block;color:var(--ink);font-size:16px;font-weight:700;margin-bottom:6px}

.foot{
  margin-top:26px;text-align:center;font-size:12.5px;line-height:1.7;
  color:var(--muted);font-weight:500;
}

/* toast */
.toast{
  position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + 22px);
  transform:translate(-50%,140%);
  z-index:20;max-width:calc(100% - 40px);
  padding:12px 18px;border-radius:13px;
  background:#12182a;border:1px solid var(--line-hi);color:var(--ink);
  font-size:13.5px;font-weight:600;
  box-shadow:0 18px 40px rgba(0,0,0,.5);
  transition:transform .45s var(--ease);
}
html[data-scheme="light"] .toast{background:#fff;box-shadow:0 18px 40px rgba(16,24,40,.18)}
.toast.is-on{transform:translate(-50%,0)}