/* Приложение Pelque. Те же цвета, что на лендинге и баннере, но без
   переворота темы: здесь всё рисуется своё, инвертировать нечего.

   Палитра снята с баннера: белые поверхности, чёрные чернила и неоновая
   развёртка от холодного к тёплому. Смотри ворк/pelque/tools/palette.py. */

@font-face{font-family:Inter;
  src:url(/assets/inter-400.woff2) format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Inter;
  src:url(/assets/inter-600.woff2) format('woff2');
  font-weight:600;font-style:normal;font-display:swap}

:root{
  --ink:#101010; --base:#fafaf9; --muted:#5f6068; --line:#e6e6ea;
  --panel:#ffffff; --code:#f4f4f7; --ok:#0f7a4a; --warn:#8a5a00;
  --cyan:#b6ecfe; --blue:#cad7fe; --violet:#f7e0ff;
  --magenta:#ffdef6; --peach:#feddd2;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

*{box-sizing:border-box}
/* Цвет холста живёт на html. У body фона быть не должно: слой света
   лежит на z-index -1, и непрозрачный body закрыл бы его собой. */
html{background:var(--base)}
body{margin:0;background:transparent;color:var(--ink)}
body{
  font:400 16px/1.6 Inter,ui-sans-serif,system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;min-height:100vh;
}
a{color:inherit}

/* живой свет, тот же, что на лендинге */
#pelque-aurora{position:fixed;inset:0;z-index:-1;pointer-events:none}
#pelque-aurora i{position:absolute;display:block;border-radius:50%;will-change:transform;opacity:.9}
#pelque-aurora i:nth-child(1){width:78vmax;height:66vmax;left:-24vmax;top:-26vmax;
  background:radial-gradient(closest-side,var(--cyan),rgba(0,0,0,0) 72%);
  animation:pa 15s ease-in-out infinite alternate}
#pelque-aurora i:nth-child(2){width:70vmax;height:60vmax;left:24vmax;top:-30vmax;
  background:radial-gradient(closest-side,var(--violet),rgba(0,0,0,0) 72%);
  animation:pb 19s ease-in-out infinite alternate}
#pelque-aurora i:nth-child(3){width:80vmax;height:66vmax;right:-26vmax;top:-22vmax;
  background:radial-gradient(closest-side,var(--magenta),rgba(0,0,0,0) 72%);
  animation:pc 17s ease-in-out infinite alternate}
#pelque-aurora i:nth-child(4){width:86vmax;height:70vmax;right:-30vmax;bottom:-34vmax;
  background:radial-gradient(closest-side,var(--peach),rgba(0,0,0,0) 72%);
  animation:pd 22s ease-in-out infinite alternate}
#pelque-aurora i:nth-child(5){width:74vmax;height:62vmax;left:-26vmax;bottom:-30vmax;
  background:radial-gradient(closest-side,var(--blue),rgba(0,0,0,0) 72%);
  animation:pe 25s ease-in-out infinite alternate}
@keyframes pa{to{transform:translate3d(30vmax,18vmax,0) scale(1.35)}}
@keyframes pb{from{transform:scale(1.08)}to{transform:translate3d(-26vmax,24vmax,0) scale(.78)}}
@keyframes pc{to{transform:translate3d(-32vmax,20vmax,0) scale(1.3)}}
@keyframes pd{from{transform:scale(1.05)}to{transform:translate3d(-28vmax,-24vmax,0) scale(.8)}}
@keyframes pe{from{transform:scale(.96)}to{transform:translate3d(32vmax,-20vmax,0) scale(1.32)}}
@media (prefers-reduced-motion:reduce){#pelque-aurora i{animation-duration:70s!important}}

/* ─── шапка ─── */
.top{position:sticky;top:0;z-index:20;backdrop-filter:blur(14px);
  background:rgba(250,250,249,.8);border-bottom:1px solid var(--line)}
.top::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:linear-gradient(90deg,var(--cyan),var(--blue),var(--violet),var(--magenta),var(--peach))}
.top .in{max-width:1180px;margin:0 auto;padding:13px 22px;display:flex;align-items:center;gap:20px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;font-weight:600;font-size:19px}
.brand .tile{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--cyan),var(--blue),var(--violet),var(--magenta),var(--peach))}
.brand svg{width:20px;height:20px}
.top nav{display:flex;gap:6px;margin-left:12px}
.top nav a{padding:8px 14px;border-radius:999px;text-decoration:none;color:var(--muted);font-size:15px}
.top nav a:hover{color:var(--ink);background:var(--panel)}
.top nav a[aria-current]{color:var(--ink);background:var(--panel);font-weight:600;
  box-shadow:0 1px 0 var(--line)}
.top .sp{margin-left:auto}

/* ─── кнопки ─── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:12px 22px;border-radius:999px;border:1px solid transparent;
  background:var(--ink);color:#fff;font:600 15px/1 Inter,sans-serif;
  text-decoration:none;cursor:pointer;transition:.15s}
.btn:hover{transform:translateY(-1px)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
/* кружок в кнопке убран, как и на сайте */
.btn.ghost{background:var(--panel);color:var(--ink);border-color:var(--line)}
.btn.wide{width:100%}

/* ─── каркас ─── */
.wrap{max-width:1180px;margin:0 auto;padding:36px 22px 90px}
h1{font-size:34px;line-height:1.15;letter-spacing:-.02em;margin:0 0 8px;font-weight:600}
.lede{color:var(--muted);margin:0 0 30px;max-width:64ch}
h2{font-size:21px;margin:0 0 14px;font-weight:600}

.panel{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:22px}
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}

/* карточка монеты */
.coin{display:block;text-decoration:none;background:var(--panel);
  border:1px solid var(--line);border-radius:16px;padding:20px;transition:.16s}
.coin:hover{transform:translateY(-2px);border-color:#d3d3db}
.coin .head{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.coin .sym{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;
  font:600 14px/1 Inter,sans-serif;color:var(--ink);
  background:linear-gradient(135deg,var(--cyan),var(--violet),var(--peach))}
.coin .nm{font-weight:600}
.coin .tk{color:var(--muted);font:400 13px/1.4 var(--mono)}
.coin dl{display:grid;grid-template-columns:auto auto;gap:7px 12px;margin:0}
.coin dt{color:var(--muted);font-size:13px}
.coin dd{margin:0;text-align:right;font:400 13.5px/1.4 var(--mono)}

/* показатели */
.stats{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin:0 0 22px}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px 18px}
.stat .k{color:var(--muted);font:600 11px/1 Inter,sans-serif;letter-spacing:.09em;text-transform:uppercase}
.stat .v{margin-top:9px;font:400 20px/1.2 var(--mono)}

/* формы */
label{display:block;font:600 11px/1 Inter,sans-serif;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);margin:0 0 8px}
input[type=text],input[type=url]{width:100%;padding:13px 15px;border-radius:11px;
  border:1px solid var(--line);background:var(--panel);color:var(--ink);font:inherit}
input:focus{outline:none;border-color:#b9b9c4}
.field{margin:0 0 20px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.hint{color:var(--muted);font-size:13px;margin:7px 0 0}

/* таблица параметров */
table{width:100%;border-collapse:collapse;font-size:14.5px}
th,td{text-align:left;padding:10px 0;border-bottom:1px solid var(--line)}
th{color:var(--muted);font:600 11px/1 Inter,sans-serif;letter-spacing:.09em;text-transform:uppercase}
td:last-child,th:last-child{text-align:right;font-family:var(--mono)}
tr:last-child td{border-bottom:none}

.note{border:1px solid var(--line);border-radius:14px;padding:16px 18px;
  background:linear-gradient(135deg,rgba(182,236,254,.4),rgba(255,222,246,.4));
  color:#2b2c33;font-size:15px;margin:0 0 22px}
.mono{font-family:var(--mono)}
.muted{color:var(--muted)}
.empty{text-align:center;padding:64px 20px;color:var(--muted)}
.empty .big{font-size:19px;color:var(--ink);font-weight:600;margin-bottom:8px}

/* уведомления */
.toasts{position:fixed;right:18px;bottom:18px;z-index:80;display:flex;flex-direction:column;gap:9px}
.toast{background:var(--ink);color:#fff;padding:12px 16px;border-radius:12px;
  font-size:14px;max-width:340px;transition:opacity .35s}
.toast.err{background:#7a1020}
.toast.ok{background:#0f4d33}

/* выбор кошелька */
.wallets{display:flex;flex-direction:column;gap:8px}
.wallets button{display:flex;align-items:center;gap:11px;padding:12px 14px;border-radius:12px;
  border:1px solid var(--line);background:var(--panel);cursor:pointer;font:inherit;text-align:left}
.wallets button:hover{border-color:#cfcfd8}
.wallets img{width:22px;height:22px;border-radius:6px}

dialog{border:none;border-radius:18px;padding:0;max-width:380px;width:92vw;
  box-shadow:0 30px 80px rgba(16,16,16,.22)}
dialog::backdrop{background:rgba(16,16,16,.32);backdrop-filter:blur(3px)}
dialog .in{padding:22px}
dialog h3{margin:0 0 16px;font-size:18px}

@media (max-width:760px){
  .top nav{display:none}
  .wrap{padding:26px 18px 70px}
  h1{font-size:27px}
  .row2{grid-template-columns:1fr}
}

/* ─── форма запуска ─── */
textarea{width:100%;min-height:92px;padding:13px 15px;border-radius:11px;resize:vertical;
  border:1px solid var(--line);background:var(--panel);color:var(--ink);font:inherit;line-height:1.45}
textarea:focus{outline:none;border-color:#b9b9c4}
.pair{display:grid;grid-template-columns:1.6fr 1fr;gap:12px}
.logo-row{display:grid;grid-template-columns:96px 1fr;gap:14px;align-items:start}
.logo-tile{width:96px;height:96px;border-radius:18px;border:1px dashed #c9c9d3;background:var(--code);
  display:grid;place-items:center;overflow:hidden;cursor:pointer;padding:0;
  font:600 10.5px/1.35 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-align:center}
.logo-tile.drag{border-color:var(--ink);background:#fff}
.logo-tile img{width:100%;height:100%;object-fit:cover;display:block}
.logo-side{display:grid;gap:10px}
.links{display:grid;gap:10px}
.links .in{position:relative}
.links .in span{position:absolute;left:14px;top:50%;translate:0 -50%;color:var(--muted);
  font:600 12px/1 var(--mono);pointer-events:none}
.links .in input{padding-left:44px}
input.bad{border-color:#e0a1a1}
.count{float:right;color:var(--muted);font:400 11px/1 var(--mono);letter-spacing:0;text-transform:none}

/* ─── карточка монеты: предпросмотр и шапка страницы монеты ─── */
.coincard{display:grid;grid-template-columns:64px 1fr;gap:14px;align-items:start}
.coincard .pic{width:64px;height:64px;border-radius:16px;background:var(--code);overflow:hidden;
  display:grid;place-items:center;color:var(--muted);font:600 18px/1 Inter,sans-serif}
.coincard .pic img{width:100%;height:100%;object-fit:cover;display:block}
.coincard .nm{font:600 18px/1.25 Inter,sans-serif;margin:2px 0 3px;word-break:break-word}
.coincard .tk{color:var(--muted);font:500 13px/1.3 var(--mono)}
.coincard .ds{color:var(--muted);font-size:14px;line-height:1.5;margin:10px 0 0;white-space:pre-line;word-break:break-word}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.chips a{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;
  border:1px solid var(--line);background:var(--panel);color:var(--ink);text-decoration:none;font:500 13px/1 Inter,sans-serif}
.chips a:hover{border-color:#b9b9c4}
.coinhead{display:grid;grid-template-columns:88px 1fr;gap:20px;align-items:center;margin:0 0 24px}
.coinhead .pic{width:88px;height:88px;border-radius:22px;background:var(--code);overflow:hidden;
  display:grid;place-items:center;color:var(--muted);font:600 26px/1 Inter,sans-serif}
.coinhead .pic img{width:100%;height:100%;object-fit:cover;display:block}
.coinhead h1{margin:0 0 4px}
.coinhead .ds{color:var(--muted);margin:8px 0 0;max-width:64ch;white-space:pre-line;word-break:break-word}
@media (max-width:640px){
  .pair{grid-template-columns:1fr}
  .coinhead{grid-template-columns:64px 1fr;gap:14px}
  .coinhead .pic{width:64px;height:64px;border-radius:16px}
}