:root{
  --fog:#E9ECF4; --paper:#FFFFFF; --sunk:#F3F5FA; --ink:#1C1F3A; --muted:#646A85; --line:#D5D9E6;
  --blood:#B3123A; --focus:#2F5BEA; --ok:#1E8A52; --warn:#C27C0E;
  --r-godly:#D9307F; --r-ancient:#7A4BD6; --r-unique:#B3123A; --r-legendary:#D39410;
  --r-rare:#2B86D1; --r-uncommon:#2F9B63; --r-common:#878EA3; --r-classic:#5B6178;
  --r-halloween:#E2661A; --r-christmas:#1E9A57;
  --ease:cubic-bezier(.2,.75,.25,1); --spring:cubic-bezier(.34,1.56,.64,1);
  --t-fast:.15s; --t:.25s;
  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"]){
    --fog:#15172A; --paper:#1E2138; --sunk:#191B30; --ink:#ECEEF7; --muted:#9AA0BC; --line:#2E3250;
    --blood:#F0476E; --focus:#7C9BFF; --ok:#3CC47F; --warn:#F0B13C;
  }
}
:root[data-theme="dark"]{
  --fog:#15172A; --paper:#1E2138; --sunk:#191B30; --ink:#ECEEF7; --muted:#9AA0BC; --line:#2E3250;
  --blood:#F0476E; --focus:#7C9BFF; --ok:#3CC47F; --warn:#F0B13C;
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--fog);color:var(--ink);font:400 16px/1.5 "Onest",system-ui,-apple-system,"Segoe UI",sans-serif}
img{max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
code{font-size:.92em}
.wrap{max-width:1240px;margin:0 auto;padding:0 20px}
h1,h2,h3{font-family:"Unbounded",system-ui,sans-serif;letter-spacing:-.01em;margin:0}
h1{font-weight:700;font-size:clamp(26px,4.5vw,40px);line-height:1.05}
h2{font-weight:500;font-size:20px;line-height:1.2}
.muted{color:var(--muted)}

/* шапка */
.top{background:var(--paper);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:20px;height:60px}
.logo{font:700 18px "Unbounded",sans-serif;text-decoration:none;white-space:nowrap}
.logo span{color:var(--blood)}
.nav{display:flex;gap:4px;flex:1}
.nav a{text-decoration:none;padding:8px 12px;border-radius:10px;color:var(--muted);font-weight:500}
.nav a[aria-current=page]{color:var(--ink);background:var(--sunk)}
.wallet{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:600}
.wallet .bal{font-family:"Unbounded",sans-serif;font-weight:500;font-size:15px}
.ava{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:var(--paper);font:700 14px "Unbounded",sans-serif;flex:none}
@media (max-width:640px){.nav a{padding:8px}.wallet .who{display:none}.logo{font-size:15px}}

/* кнопки и поля */
.btn{font:600 15px/1 "Onest",sans-serif;border:0;border-radius:10px;padding:12px 16px;cursor:pointer;background:var(--blood);color:#fff;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn:hover{filter:brightness(1.08)}
.btn:disabled{opacity:.5;cursor:not-allowed;filter:none}
.btn.ghost{background:var(--sunk);color:var(--ink);border:1px solid var(--line)}
.btn.small{padding:8px 12px;font-size:14px}
.btn.okb{background:var(--ok)}
label.f{display:flex;flex-direction:column;gap:6px;font-weight:500;font-size:14px}
input,select,textarea{font:inherit;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:11px 12px;width:100%}
input:focus,select:focus{border-color:var(--focus);outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--focus) 25%,transparent)}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--muted)}
.check input{width:18px;height:18px;margin:2px 0 0;flex:none}
.error{color:var(--blood);font-size:14px;min-height:1.2em}

.panel{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:20px}

/* статусы */
.st{display:inline-block;font-size:13px;font-weight:600;padding:3px 9px;border-radius:999px;background:var(--sunk);white-space:nowrap}
.st.pending{color:var(--warn)}
.st.accepted{color:var(--focus)}
.st.received,.st.paid{color:var(--ok)}
.st.rejected{color:var(--blood)}

/* модальное окно */
dialog{border:0;border-radius:18px;padding:0;background:var(--paper);color:var(--ink);width:min(480px,calc(100% - 24px));max-height:calc(100% - 24px)}
dialog::backdrop{background:rgba(15,17,35,.55)}
.dlg{padding:22px;display:flex;flex-direction:column;gap:16px}
.dlg header{display:flex;justify-content:space-between;align-items:center;gap:12px}
.x{background:none;border:0;font-size:26px;line-height:1;color:var(--muted);cursor:pointer;padding:4px}

/* банк: иконка или запасной кружок с буквой */
.bank-ico{width:28px;height:28px;border-radius:8px;flex:none;object-fit:contain;background:var(--sunk)}
.bank-ph{width:28px;height:28px;border-radius:8px;flex:none;display:grid;place-items:center;color:#fff;font:700 13px "Unbounded",sans-serif}

.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--paper);padding:12px 18px;border-radius:12px;font-weight:500;z-index:50;max-width:calc(100% - 32px)}

.foot{border-top:1px solid var(--line);margin-top:56px;padding:40px 0 44px;color:var(--muted);font-size:15px;background:color-mix(in srgb,var(--paper) 45%,var(--fog))}
body:has(.bar.show) .foot{padding-bottom:120px}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1.3fr auto;gap:32px}
@media (max-width:860px){.foot-grid{grid-template-columns:1fr 1fr}.foot-copy{grid-column:1/-1}}
@media (max-width:480px){.foot-grid{grid-template-columns:1fr}}
.foot-brand{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.foot-brand .logo{font-size:22px;color:var(--ink)}
.foot-contacts{border-radius:999px;padding:10px 16px}
.chat-ico{width:16px;height:14px;border:2px solid currentColor;border-radius:8px 8px 8px 2px;position:relative}
.foot-col{display:flex;flex-direction:column;gap:12px}
.foot-col b{color:var(--ink);font-size:15px;margin-bottom:2px}
.foot-col a{color:var(--muted);text-decoration:none;width:max-content;max-width:100%;transition:color var(--t-fast)}
.foot-col a:hover{color:var(--ink)}
.foot-copy{font-size:13px;letter-spacing:.02em;text-transform:uppercase;white-space:nowrap}
.socials{display:flex;gap:10px}
.soc{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:#fff;text-decoration:none;font:700 16px "Onest",system-ui,sans-serif;flex:none;
  transition:transform .2s var(--spring),box-shadow var(--t-fast),filter var(--t-fast)}
a.soc:hover{transform:translateY(-3px);box-shadow:0 8px 18px rgba(20,22,45,.18)}
a.soc:active{transform:scale(.94)}
.soc-ico{width:20px;height:20px;background:#fff;-webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat}
.soc-telegram{background:#26A5E4}
.soc-vk{background:#0077FF}
.soc-discord{background:#5865F2}
.soc-mail{background:var(--ink);color:var(--paper)}
.contact-row{display:flex;align-items:center;gap:14px;padding:12px;border:1px solid var(--line);border-radius:14px;text-decoration:none;color:var(--ink);
  transition:background-color var(--t-fast),border-color var(--t-fast),transform .15s var(--ease)}
.contact-row:hover{background:var(--sunk);transform:translateY(-1px)}
.contact-row > span:last-child{display:flex;flex-direction:column}
.contact-row .muted{font-size:14px}
/* ---------- движение ---------- */
/* плавный переход между страницами (Chrome/Edge/Safari 18+, остальные просто откроют страницу) */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .18s ease both}
::view-transition-new(root){animation:vt-in .24s var(--ease) both}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0;transform:translateY(6px)}}

html{scroll-behavior:smooth}
body{transition:background-color var(--t),color var(--t)}
.top,.panel,.bar,.foot{transition:background-color var(--t),border-color var(--t)}

.btn{transition:background-color var(--t-fast),filter var(--t-fast),transform .12s var(--ease),box-shadow var(--t-fast),opacity var(--t-fast)}
.btn:hover:not(:disabled){box-shadow:0 4px 14px rgba(20,22,45,.12)}
.btn:active:not(:disabled){transform:scale(.97);box-shadow:none}
input,select,textarea{transition:border-color var(--t-fast),box-shadow var(--t-fast),background-color var(--t)}
.nav a,.wallet,.chip,.tabs button,.seg button,.side a,.side button,.tabs-nav a,.linkbtn,.copy,.ulink,.x,.combo-list li{
  transition:color var(--t-fast),background-color var(--t-fast),border-color var(--t-fast),box-shadow var(--t-fast),transform .12s var(--ease)}
.chip:active,.seg button:active,.tabs button:active{transform:scale(.96)}
.x:hover{color:var(--ink);transform:rotate(90deg)}
.st{transition:color var(--t),background-color var(--t)}

/* появление контента при смене раздела */
.enter > *{animation:rise .3s var(--ease) both}
.enter > *:nth-child(2){animation-delay:.03s}
.enter > *:nth-child(3){animation-delay:.06s}
.enter > *:nth-child(4){animation-delay:.09s}
.enter > *:nth-child(n+5){animation-delay:.12s}
@keyframes rise{from{opacity:0;transform:translateY(8px)}}
@keyframes fade{from{opacity:0}}
@keyframes bump{40%{transform:scale(1.08)}}

/* модальные окна: открытие и закрытие */
dialog[open]{animation:dlg-in .26s var(--ease)}
dialog[open]::backdrop{animation:fade .26s ease}
dialog.closing{animation:dlg-out .18s ease forwards}
dialog.closing::backdrop{animation:fade .18s ease reverse forwards}
dialog::backdrop{backdrop-filter:blur(2px)}
@keyframes dlg-in{from{opacity:0;transform:translateY(12px) scale(.97)}}
@keyframes dlg-out{to{opacity:0;transform:translateY(8px) scale(.98)}}

/* уведомления */
.toast{animation:toast-in .3s var(--spring)}
.toast.out{animation:toast-out .2s ease forwards}
@keyframes toast-in{from{opacity:0;transform:translate(-50%,16px) scale(.96)}}
@keyframes toast-out{to{opacity:0;transform:translate(-50%,10px)}}

/* заглушки при загрузке */
.skel{background:linear-gradient(90deg,var(--sunk) 25%,var(--line) 50%,var(--sunk) 75%);background-size:200% 100%;animation:shimmer 1.3s linear infinite}
@keyframes shimmer{from{background-position:200% 0}to{background-position:-200% 0}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after,::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){transition:none!important;animation:none!important}
  html{scroll-behavior:auto}
}

/* ---------- выпадающие списки ---------- */
.ns{position:relative;display:inline-flex;vertical-align:middle;min-width:0}
.ns-native{position:absolute!important;inset:0;width:100%!important;height:100%;opacity:0;pointer-events:none}
.ns-btn{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:10px 12px 10px 14px;cursor:pointer;text-align:left;
  font:500 15px "Onest",system-ui,sans-serif;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:10px;
  transition:border-color var(--t-fast),box-shadow var(--t-fast),background-color var(--t)}
.ns-btn:hover{border-color:color-mix(in srgb,var(--ink) 25%,var(--line))}
.ns-btn:focus-visible,.ns-btn.open{outline:none;border-color:var(--focus);box-shadow:0 0 0 3px color-mix(in srgb,var(--focus) 22%,transparent)}
.ns-btn:disabled{opacity:.5;cursor:not-allowed}
.ns-val{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ns-arrow{width:10px;height:10px;flex:none;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:translateY(-3px) rotate(45deg);transition:transform var(--t) var(--ease)}
.ns-btn.open .ns-arrow{transform:translateY(2px) rotate(225deg)}
.ns-list{position:fixed;z-index:1000;max-height:300px;overflow:auto;padding:6px;border-radius:14px;
  background:var(--paper);border:1px solid var(--line);box-shadow:0 16px 40px rgba(15,17,35,.18),0 2px 6px rgba(15,17,35,.08);
  opacity:0;transform:translateY(-6px) scale(.98);transform-origin:top center;transition:opacity .15s ease,transform .2s var(--ease)}
.ns-list.up{transform-origin:bottom center;transform:translateY(6px) scale(.98)}
.ns-list.in{opacity:1;transform:none}
.ns-opt{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:9px 12px;border-radius:9px;cursor:pointer;
  font:500 15px "Onest",system-ui,sans-serif;white-space:nowrap;transition:background-color .1s}
.ns-opt.act{background:var(--sunk)}
.ns-opt.sel{font-weight:700}
.ns-opt.dis{opacity:.45;cursor:default}
.ns-check{width:6px;height:11px;border-right:2px solid var(--blood);border-bottom:2px solid var(--blood);transform:rotate(45deg) translate(-2px,-2px);opacity:0}
.ns-opt.sel .ns-check{opacity:1}
.ns-lbl{display:flex;align-items:center;gap:10px;min-width:0}
.ns-ic{display:flex;flex:none;margin:-4px 0 -4px -4px}
.ns-img{width:30px;height:30px;border-radius:9px;flex:none;object-fit:cover;background:var(--sunk);display:grid;place-items:center}
.ns-btn .ns-img{width:28px;height:28px;border-radius:8px}
.ns-img.ph{font:700 13px "Unbounded",system-ui,sans-serif;color:var(--muted)}
.ns-img.plus{background:transparent;border:1.5px dashed var(--line);position:relative}
.ns-img.plus::before,.ns-img.plus::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;background:var(--muted);transform:translate(-50%,-50%)}
.ns-img.plus::after{transform:translate(-50%,-50%) rotate(90deg)}
.ns-opt.has-ic{padding:7px 12px 7px 8px}
.ns-group{padding:10px 12px 4px;font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}

/* системные списки, оставленные в таблицах (data-native) — тоже аккуратные */
select[data-native]{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:30px;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 15px) 52%,calc(100% - 10px) 52%;background-size:5px 5px;background-repeat:no-repeat}

/* ---------- шаги сделки ---------- */
.tsteps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.ts{display:grid;grid-template-columns:28px 1fr;gap:12px;position:relative;padding-bottom:16px}
.ts:last-child{padding-bottom:0}
.ts::before{content:"";position:absolute;left:13px;top:26px;bottom:-2px;width:2px;background:var(--line)}
.ts:last-child::before{display:none}
.ts.ok::before{background:var(--ok)}
.ts-dot{width:28px;height:28px;border-radius:50%;border:2px solid var(--line);background:var(--paper);display:grid;place-items:center;position:relative;z-index:1}
.ts.ok .ts-dot{background:var(--ok);border-color:var(--ok)}
.ts.ok .ts-dot::after{content:"";width:6px;height:11px;border-right:2.5px solid #fff;border-bottom:2.5px solid #fff;transform:translateY(-1px) rotate(45deg)}
.ts.now .ts-dot{border-color:var(--focus)}
.ts.now .ts-dot::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--focus);animation:pulse 1.4s ease-in-out infinite}
.ts.later{opacity:.55}
.ts-body{display:flex;flex-direction:column;gap:6px;padding-top:3px;min-width:0}
.ts-body > b{font-weight:600}
.ts-text{color:var(--muted);font-size:14px;line-height:1.5;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.ts-hint{font-size:13px}
.ts-items{list-style:none;margin:0;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--sunk);width:100%;max-height:170px;overflow:auto}
.ts-items li{display:flex;justify-content:space-between;gap:10px;padding:3px 0;color:var(--ink)}
.nick-hl{background:color-mix(in srgb,var(--focus) 14%,transparent);color:var(--ink);padding:1px 6px;border-radius:6px}
.ts-rej{display:flex;flex-direction:column;gap:6px;border-left:3px solid var(--blood);background:var(--sunk);border-radius:0 12px 12px 0;padding:12px 14px;animation:rise .3s var(--ease)}
.tsteps .ts{transition:opacity .3s ease}
.ts-warn{font-size:13px;color:var(--muted);border-left:3px solid var(--warn);padding:6px 0 6px 10px}
@keyframes pulse{50%{opacity:.3;transform:scale(.7)}}