/* Wallet Wrapped — visual system.
   Reference: fomo.family. Taken from it: the indigo-black ground, glass buttons,
   a geometric grotesk set tight and lowercase, short sentences that end with a
   period. Not taken: its imagery, wordmark or layouts. Dark-only on purpose —
   the reference is one world, and a light variant of it would be a different
   product. Every color is painted explicitly for that reason. */

:root{
  --bg:#060510; --bg-2:#0B0A17; --surface:#12111A; --surface-2:#1A1926;
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.14);
  --text:#F7F7F7; --text-2:#9899A3; --text-3:#5D6170;
  --accent:#516AF6; --accent-2:#8B9AFF; --accent-soft:rgba(96,106,247,.18);
  --glass:rgba(255,255,255,.10); --glass-2:rgba(255,255,255,.16);
  --up:#3DDC97; --down:#FF6B6B; --warn:#F5B84A;
  --r:12px; --r-lg:18px; --r-sm:8px;
  --font:"Manrope",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;
  background-image:radial-gradient(70% 45% at 50% -8%,rgba(81,106,246,.28),transparent 70%);background-repeat:no-repeat}
a{color:var(--accent-2);text-decoration:none} a:hover{text-decoration:underline;text-underline-offset:3px}
::selection{background:var(--accent);color:#fff}

.wrap{max-width:1040px;margin:0 auto;padding:0 clamp(18px,4vw,40px)}
.nav{display:flex;align-items:center;gap:18px;padding:22px 0 8px}
.brand{font-weight:800;font-size:22px;letter-spacing:-.04em;color:var(--text);white-space:nowrap}
.brand:hover{text-decoration:none}
.nav nav{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap}
.nav nav a{font-size:14px;color:var(--text-2);padding:8px 12px;border-radius:var(--r-sm)}
.nav nav a:hover,.nav nav a[aria-current]{background:var(--glass);color:var(--text);text-decoration:none}
/* На узких экранах ссылки не должны обтекать вордмарк, ломая шапку на две
   рваные строки: меню уходит на свою строку целиком и прокручивается вбок,
   если не влезло. */
@media (max-width:760px){
  .nav{flex-wrap:wrap;gap:10px}
  .nav nav{margin-left:0;width:100%;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .nav nav::-webkit-scrollbar{display:none}
  .nav nav a{white-space:nowrap}
}

h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.035em;line-height:1.05;text-wrap:balance}
h1{font-size:clamp(38px,7vw,68px);text-transform:lowercase;color:var(--text)}
h2{font-size:clamp(26px,4vw,40px);text-transform:lowercase}
h3{font-size:20px;letter-spacing:-.02em}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--accent-2);text-transform:uppercase}
.lede{font-size:clamp(17px,2.2vw,20px);color:var(--text-2);max-width:56ch;margin:14px 0 0}
.hero{padding:clamp(44px,9vw,110px) 0 36px;text-align:center}
.hero .lede{margin:16px auto 0}
.section{padding:34px 0}
.muted{color:var(--text-2)} .dim{color:var(--text-3)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

.field{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:30px auto 0;max-width:720px}
.input{flex:1;min-width:260px;font-family:var(--mono);font-size:15px;padding:16px 18px;background:var(--surface);color:var(--text);border:1px solid var(--line-2);border-radius:var(--r);outline:none;transition:border-color .15s,box-shadow .15s}
.input::placeholder{color:var(--text-3)}
.input:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font);font-weight:600;font-size:15px;letter-spacing:-.01em;padding:14px 22px;border-radius:var(--r);border:1px solid transparent;cursor:pointer;text-decoration:none;transition:background .15s,transform .05s,border-color .15s;white-space:nowrap}
.btn:hover{text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--accent-2);outline-offset:3px}
.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover{background:#6478FF}
.btn-glass{background:var(--glass);color:var(--text);border-color:var(--line)}.btn-glass:hover{background:var(--glass-2)}
.btn-ghost{background:transparent;color:var(--text-2);border-color:var(--line-2)}.btn-ghost:hover{color:var(--text);border-color:var(--text-3)}
.btn-sm{padding:9px 14px;font-size:13px;border-radius:var(--r-sm)}
.btn:disabled{opacity:.45;cursor:default;transform:none}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.card-head{padding:20px 22px;border-bottom:1px solid var(--line)}
.card-body{padding:20px 22px}
.addr{font-family:var(--mono);font-size:14px;word-break:break-all;color:var(--text-2)}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1px;background:var(--line)}
.stat{background:var(--surface);padding:18px 20px}
.stat dt{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);margin:0 0 8px}
.stat dd{margin:0;font-family:var(--mono);font-size:24px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.stat dd small{display:block;font-family:var(--font);font-size:12.5px;font-weight:400;color:var(--text-2);margin-top:4px;letter-spacing:0;line-height:1.35}
.stat.up dd{color:var(--up)} .stat.down dd{color:var(--down)} .stat.warn dd{color:var(--warn)} .stat.accent dd{color:var(--accent-2)}

.badges{display:flex;gap:8px;flex-wrap:wrap}
.badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11px;letter-spacing:.02em;padding:5px 10px;border-radius:999px;background:var(--glass);color:var(--text-2);border:1px solid var(--line)}
.badge.ok{background:rgba(61,220,151,.14);color:var(--up);border-color:rgba(61,220,151,.3)}
.badge.warn{background:rgba(245,184,74,.14);color:var(--warn);border-color:rgba(245,184,74,.3)}
.badge.accent{background:var(--accent-soft);color:var(--accent-2);border-color:rgba(96,106,247,.35)}
.badge.down{background:rgba(255,107,107,.12);color:var(--down);border-color:rgba(255,107,107,.3)}

.scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);padding:12px 14px;border-bottom:1px solid var(--line)}
td{padding:13px 14px;border-bottom:1px solid var(--line);color:var(--text-2);vertical-align:top}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover td{background:rgba(255,255,255,.025)}
td:first-child{color:var(--text)}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.pos{color:var(--up)} .neg{color:var(--down)}
th.sortable{cursor:pointer;user-select:none} th.sortable:hover{color:var(--text)} th[aria-sort]{color:var(--accent-2)}

.seg{display:inline-flex;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:3px;gap:2px}
.seg button{font-family:var(--font);font-weight:600;font-size:13px;padding:8px 13px;border:0;border-radius:var(--r-sm);background:transparent;color:var(--text-2);cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--glass-2);color:var(--text)}
.seg button:focus-visible{outline:2px solid var(--accent-2);outline-offset:1px}
.controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:22px 0 14px}
.controls .input{flex:1;min-width:200px;padding:11px 14px;font-size:14px}

.note{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 22px;margin-top:22px;max-width:70ch}
.note p{margin:0;font-size:14.5px;color:var(--text-2)} .note p+p{margin-top:9px} .note b{color:var(--text);font-weight:600}
.note-label{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);display:block;margin-bottom:10px}
.status{font-family:var(--mono);font-size:13px;color:var(--text-2);margin:18px 0;min-height:1.4em;text-align:center}
.status.err{color:var(--down)}
.empty{border:1px dashed var(--line-2);border-radius:var(--r-lg);padding:32px 24px;text-align:center;color:var(--text-2)}
pre.tweet{margin:0;padding:14px 16px;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);font-family:var(--mono);font-size:13px;white-space:pre-wrap;word-break:break-word;color:var(--text)}
code{font-family:var(--mono);font-size:.88em;background:var(--glass);padding:.1em .4em;border-radius:4px}
details>summary{cursor:pointer;list-style:none;font-weight:600;color:var(--text-2);padding:14px 0}
details>summary::-webkit-details-marker{display:none}
details>summary::before{content:"+";display:inline-block;width:1.4em;color:var(--accent-2)} details[open]>summary::before{content:"–"}
footer{margin-top:60px;padding:22px 0 40px;border-top:1px solid var(--line);font-size:13px;color:var(--text-3);display:flex;flex-wrap:wrap;gap:8px 18px}
footer a{color:var(--text-2)}
/* ═══════════════ ДВИЖЕНИЕ ═══════════════
   Карточка считается 5–40 секунд — это самое уязвимое место продукта: человек
   вставил адрес и смотрит в пустоту. Поэтому анимация здесь не украшение, а
   работа: она сообщает, что процесс идёт, и держит внимание до результата.

   Три правила, чтобы движение не превратилось в шум:
     * появление — один раз и быстро (180–420 мс), бесконечно крутится только
       индикатор ожидания;
     * очередь — через --d на элементе, а не отдельным правилом на каждый;
     * всё, кроме мгновенной обратной связи на нажатие, живёт внутри
       prefers-reduced-motion: no-preference. У человека с вестибулярными
       нарушениями страница просто появляется — и остаётся полностью рабочей.

   Анимируются только transform и opacity: остальное заставляет браузер
   пересчитывать раскладку в каждом кадре и даёт рывки на слабом телефоне. */

@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes riseFar{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes pop{0%{opacity:0;transform:scale(.86)}60%{transform:scale(1.04)}100%{opacity:1;transform:none}}
@keyframes slideIn{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
/* Бегущий блик по индикатору ожидания. */
@keyframes sweep{from{transform:translateX(-100%)}to{transform:translateX(320%)}}
/* Дыхание кнопки «поделиться» — единственный элемент, которому позволено
   привлекать внимание после того, как карточка уже показана. */
@keyframes breathe{0%,100%{box-shadow:0 0 0 0 rgba(81,106,246,.42)}70%{box-shadow:0 0 0 12px rgba(81,106,246,0)}}
@keyframes spin{to{transform:rotate(360deg)}}

@media (prefers-reduced-motion:no-preference){
  .card,.note{animation:rise .24s ease-out both}
  /* Очередь появления: элемент сам объявляет свой номер через --d. */
  .reveal{animation:riseFar .42s cubic-bezier(.2,.7,.3,1) both;animation-delay:calc(var(--d,0) * 70ms)}
  .hero .eyebrow{animation:fadeIn .5s ease-out both}
  .hero h1{animation:riseFar .5s cubic-bezier(.2,.7,.3,1) both;animation-delay:.05s}
  .hero .lede{animation:riseFar .5s cubic-bezier(.2,.7,.3,1) both;animation-delay:.12s}
  .hero .field{animation:riseFar .5s cubic-bezier(.2,.7,.3,1) both;animation-delay:.19s}
  .hero .ex{animation:fadeIn .6s ease-out both;animation-delay:.3s}
  .badges .badge{animation:pop .32s cubic-bezier(.2,.7,.3,1) both;animation-delay:calc(var(--d,0) * 55ms)}
  .stats .stat{animation:rise .34s ease-out both;animation-delay:calc(var(--d,0) * 45ms)}
  .positions tbody tr{animation:slideIn .3s ease-out both;animation-delay:calc(var(--d,0) * 26ms)}
  .btn:hover{transform:translateY(-1px)}
  .share .btn-primary,.earn .btn-primary{animation:breathe 2.6s ease-out 3}
  .spinner{animation:spin .9s linear infinite}
  .scan::after{animation:sweep 1.15s ease-in-out infinite}
  .wrapped img{animation:pop .44s cubic-bezier(.2,.7,.3,1) both}
}
.btn:active{transform:translateY(1px) scale(.985)}
.input:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}

/* Ожидание. Полоса живёт своей жизнью, а подпись под ней меняется по ходу
   расчёта — человек видит не «крутилку», а этапы работы. */
.scan{position:relative;overflow:hidden;height:3px;border-radius:2px;background:var(--surface-2);margin:0 auto 14px;max-width:420px}
.scan::after{content:"";position:absolute;inset:0 auto 0 0;width:32%;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent)}
.spinner{display:inline-block;width:13px;height:13px;vertical-align:-2px;margin-right:8px;
  border:2px solid var(--line-2);border-top-color:var(--accent-2);border-radius:50%}
/* Крупное число «оживает», когда счётчик добегает до конца. */
.tick{font-variant-numeric:tabular-nums}