:root {
  --bg: #111111; --bar: #161616; --card: #1c1c1c; --card2: #242424; --line: #2b2b2b;
  --text: #f2f2f2; --muted: #8f8f8f; --dim: #5f5f5f;
  --y: #ffd60a; --y-ink: #1a1500; --y-soft: rgba(255,214,10,.14);
  --green: #34c759; --red: #ff5b5b;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
/* App chrome should behave like buttons, while editable text and payment details stay selectable. */
body { -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
input, textarea, [contenteditable]:not([contenteditable="false"]), .copyrow code { -webkit-user-select:text; user-select:text; -webkit-touch-callout:default; }
img, .brand svg, .hero-art svg { -webkit-user-drag:none; user-select:none; -webkit-user-select:none; }
html, body { margin: 0; background: var(--bg); color: var(--text); }
body { font: 500 14px/1.35 Manrope, -apple-system, "Segoe UI", Roboto, sans-serif; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
a { color: inherit; text-decoration: none; }
:where(.app, .nav, #sheet, #bulk, #toast) svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }
[hidden] { display: none !important; }
.app { max-width: 1280px; margin: 0 auto; padding: 10px 10px 92px; }

/* шапка */
.hd { display: flex; align-items: center; gap: 8px; padding: 4px 2px 10px; }
.brand { display: flex; align-items: center; gap: 9px; }
.brand .mark { width: 32px; height: 32px; border-radius: 9px; background: var(--y); color: var(--y-ink); display: grid; place-items: center; }
.brand .mark svg { width: 19px; height: 19px; stroke-width: 2.2; }
.brand b { font-size: 17px; font-weight: 800; letter-spacing: .14em; }
.bal { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 6px 0 11px; border-radius: 17px; background: var(--card); border: 1px solid var(--line); font-weight: 700; font-size: 14px; }
.bal .plus { width: 18px; height: 18px; border-radius: 50%; background: #3a3a3a; color: #cfcfcf; display: grid; place-items: center; font-size: 13px; line-height: 1; }
.sp { flex: 1; }
.ib { width: 34px; height: 34px; border-radius: 10px; background: transparent; display: grid; place-items: center; color: #d8d8d8; position: relative; }
.ib .cnt { position: absolute; top: -4px; right: -4px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--y); color: var(--y-ink); font-size: 10px; font-weight: 800; display: grid; place-items: center; }
.gem { display: inline-block; width: 12px; height: 12px; flex: none; background: currentColor; clip-path: polygon(50% 100%, 0 32%, 22% 0, 78% 0, 100% 32%); }
.bal .gem { color: var(--y); }

/* вкладки и поиск */
.cats { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.cat { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 10px; background: var(--card2); border: 1px solid #3a3a3a; font-weight: 700; font-size: 15px; }
.srow { display: flex; gap: 8px; margin-bottom: 10px; }
.search { flex: 1; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border-radius: 10px; background: var(--card); border: 1px solid var(--line); color: var(--muted); min-width: 0; }
.search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); }
.search input::placeholder { color: var(--dim); }
.feedbtn { display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border-radius: 10px; background: var(--card2); font-weight: 700; }

/* строка фильтров */
.frow { display: flex; gap: 6px; align-items: center; margin-bottom: 10px; }
.fscroll { flex: 1; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; min-width: 0; }
.fscroll::-webkit-scrollbar { display: none; }
.fb { flex: none; display: flex; align-items: center; gap: 5px; height: 34px; padding: 0 10px; border-radius: 9px; background: var(--card2); font-size: 13px; font-weight: 600; white-space: nowrap; }
.fb svg { width: 15px; height: 15px; color: var(--muted); }
.fb.on { background: var(--y-soft); color: var(--y); }
.fb.on svg { color: var(--y); }
.fb .n { min-width: 16px; height: 16px; padding: 0 4px; border-radius: 4px; background: var(--y); color: var(--y-ink); font-size: 10px; font-weight: 800; display: grid; place-items: center; }
.fb.icon { width: 34px; padding: 0; justify-content: center; }
.fb.icon svg { width: 18px; height: 18px; color: #cfcfcf; }
.meta { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin: 0 2px 8px; }

/* сетка лотов */
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 560px) { .grid { grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 12px; } }
.lot { background: var(--card); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; }
.lot .pic { position: relative; aspect-ratio: 1; background: var(--card2); }
.lot .pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lot .tag { position: absolute; left: 6px; top: 6px; padding: 2px 7px; border-radius: 6px; background: rgba(0,0,0,.65); font-size: 11px; font-weight: 700; }
.lot .tag.y { background: var(--y); color: var(--y-ink); }
.lot .bd { padding: 8px 8px 9px; display: flex; flex-direction: column; gap: 6px; }
.lot .nm { display: flex; flex-direction: column; min-width: 0; }
.lot .nm b { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lot .nm span { font-size: 12px; color: var(--muted); }
.lot .act { display: flex; gap: 6px; }
.buy { flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px; height: 34px; border-radius: 8px; background: var(--y); color: var(--y-ink); font-weight: 800; font-size: 14px; }
.cartb { width: 34px; height: 34px; border-radius: 8px; background: var(--card2); display: grid; place-items: center; color: #d0d0d0; }
.cartb svg { width: 17px; height: 17px; }
.cartb.in { background: var(--y-soft); color: var(--y); }
.empty { padding: 40px 10px; text-align: center; color: var(--muted); }
.more { width: 100%; height: 42px; margin-top: 10px; border-radius: 10px; background: var(--card2); font-weight: 700; }

/* нижнее меню */
.nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; background: var(--bar); border-top: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 0 4px env(safe-area-inset-bottom); height: calc(62px + env(safe-area-inset-bottom)); }
.nav a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--dim); font-size: 11px; font-weight: 700; }
.nav a svg { width: 22px; height: 22px; }
.nav a.on { color: var(--text); }
.nav a.on::before { content: ""; position: absolute; top: 0; width: 28px; height: 2px; border-radius: 0 0 2px 2px; background: var(--y); }
.bulk { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(72px + env(safe-area-inset-bottom)); z-index: 6; display: flex; align-items: center; gap: 8px;
  height: 42px; padding: 0 16px; border-radius: 12px; background: #2a2a2a; border: 1px solid #3a3a3a; font-weight: 700; box-shadow: 0 6px 20px rgba(0,0,0,.5); }
.bulk b { color: var(--y); }

/* листы */
.shade { position: fixed; inset: 0; z-index: 20; background: rgba(0,0,0,.6); display: flex; align-items: flex-end; animation: fade .15s; }
@keyframes fade { from { opacity: 0; } }
.sheet { width: 100%; max-width: 480px; margin: 0 auto; background: #1a1a1a; border-radius: 20px 20px 0 0; display: flex; flex-direction: column;
  max-height: 90vh; padding-bottom: env(safe-area-inset-bottom); animation: up .2s ease-out; }
@keyframes up { from { transform: translateY(30px); opacity: .5; } }
.sheet.tall { height: 90vh; }
.sh-h { display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 10px; }
.sh-h h3 { margin: 0; font-size: 20px; font-weight: 700; }
.x { width: 32px; height: 32px; display: grid; place-items: center; color: var(--muted); }
.sh-b { padding: 0 16px; overflow-y: auto; flex: 1; min-height: 0; }
.sh-f { display: grid; grid-template-columns: auto 1fr; gap: 8px; padding: 12px 16px 14px; }
.btn { height: 46px; border-radius: 10px; font-weight: 700; font-size: 15px; padding: 0 16px; }
.btn.g { background: #2a2a2a; }
.btn.y { background: var(--y); color: var(--y-ink); font-weight: 800; }
.btn:disabled { opacity: .4; cursor: default; }
.btn.full { width: 100%; }
.sh-search { margin-bottom: 8px; }
.selall { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); color: var(--muted); font-weight: 600; }
.cols { display: grid; grid-template-columns: minmax(0, 1fr) 62px 74px; gap: 6px; align-items: center; }
.cols .fl { font-size: 13px; }
.cols .thumb { width: 34px; height: 34px; }
.cols .h { font-size: 12px; color: var(--muted); font-weight: 700; display: flex; align-items: center; gap: 3px; }
.cols .h svg { width: 12px; height: 12px; }
.cols .h.on { color: var(--text); }
.item { display: flex; align-items: center; gap: 12px; padding: 9px 0; cursor: pointer; }
.item.cols { display: grid; }
.top { flex: none; padding: 2px 6px; border-radius: 5px; background: var(--y); color: var(--y-ink); font-size: 10px; font-weight: 800; letter-spacing: .04em; }
.item .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.item .tx b { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item .r { align-self: flex-start; padding: 1px 6px; border-radius: 4px; background: var(--y-soft); color: var(--y); font-size: 11px; font-weight: 800; }
.item .fl { display: flex; align-items: center; gap: 4px; font-weight: 700; white-space: nowrap; }
.item .fl .gem, .num .gem { width: 10px; height: 10px; }
.item .fl small { color: var(--muted); font-weight: 600; }
.thumb { width: 38px; height: 38px; border-radius: 9px; object-fit: cover; background: var(--card2); flex: none; }
.sw { width: 38px; height: 38px; border-radius: 9px; flex: none; }
.ck { width: 20px; height: 20px; border-radius: 5px; border: 2px solid #4a4a4a; flex: none; display: grid; place-items: center; }
.ck.on { background: var(--y); border-color: var(--y); }
.ck.on::after { content: ""; width: 9px; height: 5px; border-left: 2.5px solid var(--y-ink); border-bottom: 2.5px solid var(--y-ink); transform: rotate(-45deg) translate(1px, -1px); }
.rd { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #4a4a4a; flex: none; display: grid; place-items: center; }
.rd.on { border-color: var(--y); }
.rd.on::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--y); }
.hint { padding: 20px 0; color: var(--muted); text-align: center; }

/* цена и номер */
.range { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; }
.inp { display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 12px; border-radius: 10px; background: #242424; }
.inp input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-weight: 600; }
.inp .gem { color: #cfcfcf; width: 11px; height: 11px; }
.slider { position: relative; height: 30px; margin: 10px 4px 2px; }
.slider .tr { position: absolute; left: 0; right: 0; top: 14px; height: 2px; background: #3a3a3a; }
.slider .fill { position: absolute; top: 14px; height: 2px; background: var(--y); }
.slider input { position: absolute; left: 0; width: 100%; top: 5px; margin: 0; pointer-events: none; -webkit-appearance: none; appearance: none; background: transparent; height: 20px; }
.slider input::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 18px; height: 18px; border-radius: 4px; background: var(--y); cursor: pointer; }
.slider input::-moz-range-thumb { pointer-events: auto; width: 18px; height: 18px; border: 0; border-radius: 4px; background: var(--y); cursor: pointer; }

/* все фильтры */
.acc { border-bottom: 1px solid var(--line); }
.acc-h { width: 100%; display: flex; align-items: center; gap: 8px; padding: 15px 0; font-weight: 700; font-size: 13px; letter-spacing: .03em; color: #cfcfcf; text-align: left; }
.acc-h .n { min-width: 16px; height: 16px; padding: 0 4px; border-radius: 4px; background: var(--y-soft); color: var(--y); font-size: 10px; font-weight: 800; display: grid; place-items: center; }
.acc-h .rs { margin-left: auto; color: var(--y); font-weight: 700; letter-spacing: 0; }
.acc-h svg { width: 16px; height: 16px; color: var(--muted); }
.acc-h .rs + svg { margin-left: 0; }
.acc-h > svg:last-child { margin-left: auto; }
.acc-h .rs ~ svg:last-child { margin-left: 0; }
.save { width: 100%; height: 36px; margin: 6px 0 12px; border-radius: 8px; background: #242424; color: #cfcfcf; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 6px; }
.saved { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 10px; }
.saved button { height: 30px; padding: 0 10px; border-radius: 8px; background: var(--card2); font-size: 12px; font-weight: 700; }

/* карточка подарка */
.gs { display: grid; grid-template-columns: 40px 1fr 40px; gap: 10px; padding: 8px 16px 12px; }
.gs .side { display: flex; flex-direction: column; gap: 8px; }
.gs .side button { width: 40px; height: 40px; border-radius: 10px; background: #242424; display: grid; place-items: center; color: #d0d0d0; }
.gs .side button.y { background: var(--y); color: var(--y-ink); }
.gcard { background: #242424; border-radius: 14px; overflow: hidden; justify-self: center; width: 100%; max-width: 200px; }
.gcard img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.gcard div { padding: 8px 10px 10px; display: flex; flex-direction: column; }
.gcard b { font-size: 15px; } .gcard span { font-size: 12px; color: var(--muted); }
.arow { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; margin: 0 16px 6px; border-radius: 10px; background: #222; }
.arow .k { font-weight: 700; color: #bdbdbd; font-size: 13px; letter-spacing: .03em; }
.arow .fl { color: var(--muted); font-size: 12px; display: flex; align-items: center; gap: 4px; }
.arow .fl .gem { width: 9px; height: 9px; }
.arow .v { margin-left: auto; display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13px; }
.arow .v .r { padding: 1px 6px; border-radius: 4px; background: var(--y-soft); color: var(--y); font-size: 11px; font-weight: 800; }
.arow .v svg { width: 13px; height: 13px; color: var(--muted); }
.gs-f { display: flex; gap: 8px; padding: 12px 16px 14px; }
.gs-f .sq { width: 46px; height: 46px; border-radius: 10px; background: #2a2a2a; display: grid; place-items: center; color: #d0d0d0; }
.gs-f .sq.in { background: var(--y-soft); color: var(--y); }
.gs-f .btn.y { flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 16px; }

/* ордеры */
.tabs2 { display: flex; gap: 18px; align-items: center; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.tabs2 button { padding: 10px 0; color: var(--muted); font-weight: 700; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs2 button.on { color: var(--text); border-color: var(--text); }
.tabs2 .add { margin-left: auto; width: 40px; height: 32px; border-radius: 8px; background: var(--y); color: var(--y-ink); font-size: 22px; font-weight: 700; display: grid; place-items: center; padding: 0; border: 0; }
.otable { display: flex; flex-direction: column; gap: 6px; }
.orow { display: grid; grid-template-columns: 36px minmax(0, 1fr) 52px auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; background: var(--card); }
.orow.h { background: none; padding: 4px 10px; font-size: 12px; color: var(--muted); font-weight: 700; }
.orow b { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qty { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--muted); }
.qty i { height: 4px; border-radius: 2px; background: #3a3a3a; position: relative; overflow: hidden; }
.qty i::after { content: ""; position: absolute; inset: 0; width: var(--p, 0%); background: var(--y); }
.num { display: flex; align-items: center; gap: 4px; font-weight: 700; white-space: nowrap; font-size: 13px; }
.form { display: flex; flex-direction: column; gap: 8px; padding-bottom: 10px; }
.form label, .form .lb { font-weight: 700; font-size: 14px; color: #d8d8d8; margin-top: 6px; }
.form .lb i { color: var(--y); font-style: normal; }
.sel { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 12px; border-radius: 10px; background: #222; color: var(--text); width: 100%; text-align: left; }
.sel:disabled { opacity: .45; }
.sel span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sel .ph { color: var(--dim); }
.sel svg { width: 16px; height: 16px; color: var(--muted); }
.sel img { width: 26px; height: 26px; border-radius: 6px; }
.small { font-size: 12px; color: var(--muted); }

/* хранилище и передача */
.dep { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: 12px; background: var(--card); margin-bottom: 10px; }
.dep .ic { width: 42px; height: 42px; border-radius: 10px; background: var(--y-soft); color: var(--y); display: grid; place-items: center; flex: none; }
.dep .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dep .tx span { font-size: 12px; color: var(--muted); }
.dep .btn { height: 36px; font-size: 13px; padding: 0 12px; }
.lot .act3 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.lot .act3 .full { grid-column: span 2; }
.mini { height: 32px; border-radius: 8px; background: var(--card2); font-size: 12px; font-weight: 700; }
.mini.y { background: var(--y); color: var(--y-ink); }
.giftline { display: flex; gap: 12px; align-items: center; padding: 10px; border-radius: 12px; background: #222; margin-bottom: 10px; }
.giftline img { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; }
.giftline div { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--muted); min-width: 0; }
.giftline b { font-size: 15px; color: var(--text); }
.agree { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border-radius: 10px; background: #222; cursor: pointer; margin-top: 8px; }
.who { display: flex; align-items: center; gap: 10px; font-size: 13px; margin-top: 6px; }
.who.ok { color: var(--green); } .who.bad { color: var(--red); }
.steps { margin: 0; padding: 12px 12px 12px 30px; border-radius: 10px; background: var(--y-soft); display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.seg2 { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 10px; background: #222; margin-bottom: 10px; }
.seg2 button { height: 34px; border-radius: 8px; color: var(--muted); font-weight: 700; }
.seg2 button.on { background: #333; color: var(--text); }
.feed { display: flex; flex-direction: column; }
.fi { display: flex; gap: 10px; align-items: center; padding: 10px 2px; border-bottom: 1px solid var(--line); }
.fi img { width: 40px; height: 40px; border-radius: 9px; object-fit: cover; }
.fi .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fi .tx span { font-size: 12px; color: var(--muted); }
.fi time { font-size: 12px; color: var(--muted); }
.demo { font-size: 11px; color: var(--muted); text-align: center; margin: 14px 0 0; }
#toast > div { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(124px + env(safe-area-inset-bottom)); z-index: 40; background: #2a2a2a; border: 1px solid #3a3a3a;
  padding: 10px 14px; border-radius: 10px; font-weight: 600; max-width: 90vw; box-shadow: 0 6px 20px rgba(0,0,0,.5); }

/* подтверждение покупки */
.sumcard { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 10px; background: #222; margin-top: 8px; }
.sumcard div { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--muted); }
.sumcard b { color: var(--text); font-weight: 700; display: flex; align-items: center; gap: 5px; }
.sumcard b .gem { width: 10px; height: 10px; }
.sumcard b.bad { color: var(--red); }

/* карточка лучшего ордера */
.ocard .otop { background: var(--y); color: var(--y-ink); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.ocard .otop svg { width: 46px; height: 46px; stroke-width: 2; }
.ocard .otop b { display: flex; align-items: center; gap: 6px; font-size: 22px; font-weight: 800; }
.ocard .otop b .gem { width: 14px; height: 14px; }
.ocard .otop span { font-size: 11px; font-weight: 700; opacity: .7; }
.ocard .oinfo { position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border-radius: 7px; background: rgba(0,0,0,.12); color: var(--y-ink); font-weight: 900; font-size: 13px; }
.ocard .ob { gap: 6px; }
.ocard .ob .mini { height: 34px; display: grid; place-items: center; font-size: 13px; }
.ocard .ob .mini:disabled { opacity: .4; }

/* компьютер: широкое окно мини-аппа или сайт */
@media (min-width: 720px) {
  .app { padding: 16px 24px 100px; }
  .hd { padding-bottom: 14px; }
  .srow, .frow, .meta { max-width: none; }
  .search { height: 42px; }
  .lot .nm b { font-size: 15px; }
  /* листы — окном по центру */
  .shade { align-items: center; padding: 24px; }
  .sheet { border-radius: 20px; max-height: 86vh; width: 520px; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
  .sheet.tall { height: 80vh; }
  /* меню — по центру, не на всю ширину */
  .nav { grid-template-columns: repeat(4, 150px); justify-content: center; }
  .bulk { bottom: 84px; }
  /* формы и списки — читаемой ширины */
  .form, .feed, .tabs2, .otable, .seg2, .dep, h2 + .small { max-width: 760px; }
  .tabs2, .otable, .feed { margin-left: auto; margin-right: auto; }
  .seg2, .dep { margin-left: auto; margin-right: auto; }
  .orow { grid-template-columns: 40px minmax(0, 1fr) 90px 200px; padding: 10px 14px; }
}
@media (min-width: 1100px) {
  .grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}
.narrow { max-width: 640px; margin: 0 auto; }

/* ---------- анимации ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(10px) scale(.98); } }
@keyframes shimmer { from { background-position: -200% 0; } to { background-position: 200% 0; } }
@keyframes fadeout { to { opacity: 0; } }
@keyframes down { to { transform: translateY(40px); opacity: 0; } }
@keyframes pop { 0% { transform: scale(.9); opacity: 0; } 60% { transform: scale(1.03); } 100% { transform: none; opacity: 1; } }
#view.enter { animation: rise .22s ease-out; }
#view.enter .lot, .lot.new { animation: rise .32s ease-out both; animation-delay: calc(var(--i, 0) * 25ms); }
.shade, .sheet { animation: none; }
.shade.in { animation: fade .15s; }
.shade.in .sheet { animation: up .22s ease-out; }
.lot .pic img, .gcard img, .thumb, .giftline img { opacity: 0; transition: opacity .3s; }
.lot .pic img.ok, .gcard img.ok { opacity: 1; }
.thumb, .giftline img { opacity: 1; }
.lot .pic, .gpic { background: linear-gradient(90deg, #202020 25%, #2a2a2a 50%, #202020 75%); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
.lot .pic:has(img.ok) { animation: none; background: var(--card2); }
.lot .pic img { transition: opacity .3s, transform .35s ease; }
.lot .pic:hover img.ok { transform: scale(1.05); }
button, .mini, .btn, .buy, .cartb, .fb, a.ib { transition: transform .12s ease, background-color .15s, color .15s, opacity .15s; }
button:active:not(:disabled), a.mini:active, a.btn:active, a.ib:active { transform: scale(.95); }
.cartb.in svg, .gs-f .sq.in svg { animation: pop .3s ease-out; }
.ck.on, .rd.on, .sw2 { transition: background-color .15s, border-color .15s; }
.ck.on::after { animation: pop .2s ease-out; }
.shade.out { animation: fadeout .18s forwards; }
.shade.out .sheet { animation: down .18s forwards; }
.gpic { position: relative; aspect-ratio: 1; }
.gpic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gpic:has(img.ok) { animation: none; }
.glottie { position: absolute; inset: 0; opacity: 0; transition: opacity .35s; }
.glottie.on { opacity: 1; }
.glottie svg { width: 100% !important; height: 100% !important; display: block; }
.shade.in .gcard { animation: pop .35s ease-out; }
.nav a svg { transition: transform .2s; }
.nav a.on svg { transform: translateY(-1px) scale(1.06); }
#toast > div { animation: rise .2s ease-out; }
body.noanim *, body.noanim *::before, body.noanim *::after { animation: none !important; transition: none !important; }
body.noanim .lot .pic img, body.noanim .gcard img { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------- меню ---------- */
.menu { padding-bottom: 4px; }
.msec { font-size: 13px; font-weight: 700; color: var(--muted); letter-spacing: .03em; margin: 6px 0 10px; }
.mbtns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mbtns button { height: 40px; border-radius: 8px; background: #242424; display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; }
.mbtns svg { width: 17px; height: 17px; color: #bdbdbd; }
.mrow { width: 100%; display: flex; align-items: center; gap: 12px; padding: 8px 0; font-weight: 700; font-size: 16px; text-align: left; }
.mrow svg { width: 22px; height: 22px; color: #bdbdbd; }
.mrow.dim { font-size: 14px; color: var(--muted); font-weight: 600; }
.msep { height: 1px; background: var(--line); margin: 14px 0; }
.mtoggle { display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: 16px; cursor: pointer; color: #d8d8d8; }
.sw2 { width: 44px; height: 26px; border-radius: 13px; background: #3a3a3a; position: relative; flex: none; }
.sw2::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #e6e6e6; transition: transform .2s; }
.sw2.on { background: var(--y); }
.sw2.on::after { transform: translateX(18px); background: #fff; }

/* Feed */
.feedbtn.on { background: var(--y); color: var(--y-ink); }
.feedlist { display: flex; flex-direction: column; gap: 6px; }
.fev { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 12px; border-radius: 10px; background: var(--card); text-align: left; }
#view.enter .fev { animation: rise .3s ease-out both; animation-delay: calc(var(--i, 0) * 20ms); }
.fev .thumb { width: 40px; height: 40px; }
.fev .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fev .tx b { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fev .tx span { font-size: 12px; color: var(--muted); }
.fev .ev { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: none; text-align: right; }
.fev .ev .t { font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 4px; }
.fev .ev .t .gem { width: 10px; height: 10px; }
.fev .ev .t.buy { color: var(--green); }
.fev .ev .t.list { color: var(--y); }
.fev .ev .t.unlist, .fev .ev .t.withdraw, .fev .ev .t.send { color: #cfcfcf; }
.fev .ev .t.price { color: #9ec5ff; }
.fev .ev time { font-size: 12px; color: var(--muted); }
.refresh { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(72px + env(safe-area-inset-bottom)); z-index: 6; display: flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 16px; border-radius: 10px; background: #2a2a2a; border: 1px solid #3a3a3a; font-weight: 700; box-shadow: 0 6px 20px rgba(0,0,0,.5); }
.refresh svg { width: 17px; height: 17px; }
.refresh.spin svg { animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (min-width: 720px) { .feedlist { max-width: 900px; margin: 0 auto; } .refresh { bottom: 84px; } }

/* языки */
.langs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.langs button { height: 38px; border-radius: 8px; background: #242424; display: flex; align-items: center; justify-content: center; gap: 7px; font-weight: 600; font-size: 13px; padding: 0 6px; }
.langs button i { font-style: normal; font-size: 9px; font-weight: 800; letter-spacing: .04em; padding: 2px 4px; border-radius: 4px; background: #333; color: #bdbdbd; }
.langs button.on { background: #2f2f2f; outline: 1px solid #4a4a4a; color: var(--text); }
.langs button.on i { background: var(--y); color: var(--y-ink); }
[dir="rtl"] .fev .ev { align-items: flex-start; text-align: left; }

/* заглушки при загрузке */
.lot.sk .bd i { display: block; height: 12px; border-radius: 6px; background: #262626; }
.lot.sk .bd i:nth-child(2) { width: 45%; height: 10px; }
.lot.sk .bd i.b { height: 34px; border-radius: 8px; }
.lot.sk .pic, .lot.sk .bd i { background: linear-gradient(90deg, #202020 25%, #2a2a2a 50%, #202020 75%); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }

/* баннер комиссии */
.promo { display: flex; align-items: center; gap: 12px; padding: 10px 14px; margin-bottom: 10px; border-radius: 12px;
  background: linear-gradient(100deg, rgba(255,214,10,.16), rgba(255,214,10,.04) 70%); border: 1px solid rgba(255,214,10,.28); }
.promo .pc { flex: none; min-width: 46px; height: 38px; padding: 0 8px; border-radius: 10px; background: var(--y); color: var(--y-ink); display: grid; place-items: center; font-weight: 800; font-size: 18px; }
.promo div { display: flex; flex-direction: column; min-width: 0; }
.promo b { font-weight: 800; font-size: 15px; }
.promo span { font-size: 12px; color: #d9c98a; }
.sumcard .tot { padding-top: 8px; border-top: 1px solid #333; }
.sumcard .tot span, .sumcard .tot b { color: var(--text); font-weight: 800; }

/* выставление на продажу */
.lsell { display: flex; flex-direction: column; gap: 8px; }
.lcard { align-self: center; width: 180px; background: #242424; border-radius: 12px; overflow: hidden; margin-bottom: 6px; }
.lcard img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; opacity: 0; transition: opacity .3s; }
.lcard img.ok { opacity: 1; }
.lcard div { padding: 8px 10px 10px; display: flex; flex-direction: column; }
.lcard b { font-size: 15px; } .lcard span { font-size: 12px; color: var(--muted); }
.lsell .lb { font-weight: 700; color: #d8d8d8; margin-top: 4px; }
.lsell .inp { height: 44px; }
.lrows { display: flex; flex-direction: column; gap: 6px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.lrows div, .lfloors div { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.lrows span { color: #cfcfcf; font-size: 15px; }
.lrows b { display: flex; align-items: center; gap: 5px; font-weight: 700; }
.lrows b small { color: var(--muted); font-weight: 600; }
.lrows b.g { color: var(--green); }
.lrows .gem, .lfloors .gem, .ltot .gem { width: 10px; height: 10px; }
.lfloors { display: flex; flex-direction: column; gap: 4px; font-size: 12px; padding-top: 4px; }
.lfloors span { color: var(--muted); } .lfloors em { font-style: normal; color: var(--y); font-weight: 700; }
.lfloors b { display: flex; align-items: center; gap: 5px; }
.lfoot { grid-template-columns: 1fr !important; }
.lconf { margin: 8px 0 0; text-align: center; font-size: 22px; font-weight: 700; }
.lhint { text-align: center; color: var(--muted); }
.ltot { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 10px 0 4px; }
.ltot span { color: var(--muted); font-size: 13px; }
.ltot b { display: flex; align-items: center; gap: 7px; font-size: 26px; font-weight: 800; }
.ltot b .gem { width: 16px; height: 16px; }
.ltot small { color: var(--green); font-weight: 700; display: flex; align-items: center; gap: 4px; }

/* ---------- настоящий маркет: площадка лота, реквизиты пополнения, ссылки-кнопки ---------- */
.lot .mk { position: absolute; right: 6px; bottom: 6px; padding: 2px 6px; border-radius: 6px; background: rgba(0,0,0,.6); color: #ddd; font-size: 10px; font-weight: 700; letter-spacing: .02em; }
.lot .mk.k { background: var(--y); color: var(--y-ink); }
.copyrow { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; padding: 8px 10px; margin-top: 8px; border-radius: 10px; background: var(--card2); }
.copyrow .k { font-size: 12px; color: var(--muted); }
.copyrow code { font-size: 12px; word-break: break-all; color: var(--text); }
.copyrow .ib { width: 32px; height: 32px; }
.lnk { border: 0; background: none; padding: 0; color: var(--y); font: inherit; cursor: pointer; text-decoration: underline; }
.fi .ic2 { width: 40px; height: 40px; border-radius: 10px; background: var(--y-soft); display: grid; place-items: center; flex: none; }

/* KING — royal graphite visual system */
:root { --bg:#0d0e10; --bar:#141518; --card:#191a1e; --card2:#232429; --line:#2d2e33; --text:#f5f3ed; --muted:#96979f; --dim:#74757f; --y:#f0cc76; --y-ink:#241b09; --y-soft:rgba(240,204,118,.12); }
body { background:radial-gradient(ellipse at 80% 0,rgba(153,115,45,.07),transparent 42%),var(--bg); }
.app { max-width:1320px; padding:20px 18px 124px; }
.hd { padding:0 0 22px; gap:12px; }
.brand .mark { width:40px; height:40px; border-radius:13px; background:linear-gradient(135deg,#fff0b1,#d6a64a); box-shadow:0 4px 22px #d6a64a20; }
.brand b { font-size:20px; letter-spacing:.17em; }
.bal { height:40px; padding:0 7px 0 14px; gap:9px; background:#1b1c20; border-color:#37332a; }
.bal .plus { background:var(--y-soft); color:var(--y); width:24px; height:24px; }
.ib { width:40px; height:40px; border:1px solid var(--line); background:#191a1e; border-radius:13px; }
.king-hero { position:relative; isolation:isolate; display:grid; grid-template-columns:1.2fr 1fr; min-height:306px; overflow:hidden; border:1px solid #64533565; border-radius:26px; margin:0 0 26px; background:radial-gradient(ellipse at 80% 40%,#68502038,transparent 56%),linear-gradient(115deg,#23211c,#18191c 62%); }
.king-hero::before { content:''; position:absolute; inset:0; z-index:-1; opacity:.18; background-image:linear-gradient(#b99a5725 1px,transparent 1px),linear-gradient(90deg,#b99a5725 1px,transparent 1px); background-size:44px 44px; mask-image:linear-gradient(90deg,transparent,#000); }
.hero-copy { padding:32px 36px; }
.hero-eyebrow { display:flex; align-items:center; gap:8px; color:#d5bd84; font-size:9px; font-weight:800; letter-spacing:.2em; }
.hero-eyebrow i { width:6px; height:6px; background:var(--y); border-radius:50%; box-shadow:0 0 12px #f0cc7677; }
.hero-copy h1 { margin:17px 0 12px; font-size:clamp(34px,4.7vw,64px); font-weight:800; line-height:.98; letter-spacing:-.065em; }
.hero-copy h1>span { display:block; color:var(--y); }
.hero-dot { color:#f5f3ed; }
.hero-copy p { margin:0; max-width:365px; font-size:12px; line-height:1.7; color:#aaa79f; }
.hero-bottom { display:flex; align-items:center; gap:25px; margin-top:24px; }
.hero-fee { display:flex; align-items:center; gap:10px; }
.hero-fee>b { color:var(--y); font-size:26px; letter-spacing:-.06em; }
.hero-fee>span { max-width:90px; color:#bcb8ac; font-size:10px; line-height:1.5; }
.hero-label { color:#77756d; font-size:8px; letter-spacing:.12em; }
.hero-art { position:relative; display:grid; place-items:center; min-width:0; }
.royal-crown { width:190px; height:190px; display:grid; place-items:center; transform:rotate(-12deg); animation:royalFloat 7s ease-in-out infinite; filter:drop-shadow(0 25px 18px #0009) drop-shadow(0 0 35px #e9b64e25); }
.royal-crown svg { width:100%; height:100%; fill:var(--y); stroke:none; }
.royal-orbit { position:absolute; width:260px; height:260px; border:1px solid #cbaa5540; border-radius:50%; transform:rotateX(55deg) rotate(-25deg); }
.orbit-two { width:330px; height:330px; border-color:#cbaa551c; transform:rotateX(48deg) rotate(30deg); }
.hero-spark { position:absolute; color:var(--y); animation:royalTwinkle 4s ease-in-out infinite; }
.spark-one { top:21%; right:23%; font-size:24px; }.spark-two { bottom:26%; left:18%; font-size:15px; animation-delay:2s; }
.hero-art-label { position:absolute; bottom:24px; color:#98835a; font-size:8px; letter-spacing:.3em; }
.srow { gap:10px; margin-bottom:12px; }.search { height:48px; border-radius:14px; background:#191a1e; padding:0 16px; }.search:focus-within { border-color:#ac8a46; box-shadow:0 0 0 3px #f0cc760a; }
.feedbtn { height:48px; border-radius:14px; padding:0 18px; background:#222328; border:1px solid var(--line); }.feedbtn.on { color:var(--y); background:var(--y-soft); }
.frow { margin-bottom:20px; gap:8px; }.fscroll { gap:8px; }.fb { height:38px; border-radius:11px; padding:0 13px; background:#1b1c20; border:1px solid #2a2b30; font-size:12px; }.fb.icon { width:38px; }.fb.on { border-color:#b8994a55; }
.meta { margin:0 2px 14px; font-size:11px; letter-spacing:.02em; }
.grid { gap:12px; }.lot { border:1px solid #303137; border-radius:19px; background:linear-gradient(145deg,#202126,#17181c); transition:transform .28s,box-shadow .28s,border-color .28s; }.lot .pic { margin:7px 7px 0; border-radius:13px; overflow:hidden; }.lot .bd { padding:13px; gap:12px; }.lot .nm { flex-direction:row; align-items:center; justify-content:space-between; gap:5px; }.lot .nm b { font-size:13px; }.lot .nm span { font-size:10px; white-space:nowrap; color:#9d9da5; }.lot .buy { height:38px; border-radius:10px; background:linear-gradient(120deg,#f4d992,#deb85d); font-size:13px; }.cartb { width:38px; height:38px; border-radius:10px; border:1px solid #37383e; }.lot .mk { border:1px solid #ffffff20; backdrop-filter:blur(12px); border-radius:7px; background:#1111119c; font-size:9px; letter-spacing:.05em; }.lot .mk.k { color:var(--y); background:#211c12d9; }
.nav { left:50%; right:auto; bottom:calc(14px + env(safe-area-inset-bottom)); transform:translateX(-50%); width:min(520px,calc(100% - 28px)); height:68px; padding:6px; grid-template-columns:repeat(4,minmax(0,1fr)); border:1px solid #ffffff12; border-radius:22px; background:#1b1c22ed; backdrop-filter:blur(24px); box-shadow:0 12px 40px #0008; }
.nav a { border-radius:16px; font-size:10px; gap:5px; }.nav a.on { background:linear-gradient(145deg,#e3be6120,#e3be6109); color:var(--y); }.nav a.on::before { display:none; }.nav a svg { width:20px; height:20px; }
.bulk { bottom:calc(96px + env(safe-area-inset-bottom)); border-color:#b5974c66; background:#252218ed; backdrop-filter:blur(16px); border-radius:16px; }
.sheet { background:linear-gradient(145deg,#24252a,#18191d); border:1px solid #ffffff14; border-radius:26px 26px 0 0; }.shade { backdrop-filter:blur(8px); }.sh-h { padding:22px 20px 16px; }.sh-b { padding:0 20px; }.sh-f { padding:16px 20px 20px; }.btn { border-radius:13px; }.btn.y { background:linear-gradient(120deg,#f4d992,#deb85d); }.inp { border:1px solid #37383e; background:#1a1b20; border-radius:12px; }.inp:focus-within { border-color:#ac8a46; }.empty { border:1px dashed #36373c; border-radius:18px; margin:12px 0; padding:48px 20px; }.more { height:48px; border:1px solid var(--line); border-radius:14px; }.demo { line-height:1.8; opacity:.7; }.x { border-radius:50%; background:#ffffff06; }button:focus-visible,a:focus-visible { outline:2px solid var(--y); outline-offset:4px; }
@keyframes royalFloat { 0%,100% { transform:translateY(0) rotate(-12deg); } 50% { transform:translateY(-12px) rotate(-7deg); } }
@keyframes royalTwinkle { 0%,100% { opacity:.35; transform:scale(.8); } 50% { opacity:1; transform:scale(1.15); } }
@media(hover:hover) { .lot:not(.sk):hover { transform:translateY(-5px); border-color:#b99a5766; box-shadow:0 16px 32px #0005; }.fb:hover,.ib:hover,.cartb:hover { border-color:#b99a5777; background-color:#303035; }.buy:hover,.btn.y:hover { filter:brightness(1.08); }.nav a:hover { color:var(--y); } }
@media(min-width:720px) { .app { padding:28px 32px 128px; }.hd { padding-bottom:28px; }.grid { grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:18px; }.sheet { border-radius:26px; }.hero-copy { padding:36px 42px; }.king-hero { min-height:340px; }.royal-crown { width:220px; height:220px; }.hero-art-label { bottom:30px; } }
@media(max-width:480px) { .app { padding:16px 12px 116px; }.brand b { font-size:17px; }.hd { gap:8px; }.king-hero { min-height:244px; grid-template-columns:1.25fr .75fr; border-radius:21px; margin-bottom:20px; }.hero-copy { padding:24px 0 24px 22px; }.hero-eyebrow { font-size:6px; letter-spacing:.12em; }.hero-copy h1 { font-size:40px; margin-top:18px; }.hero-copy p { font-size:10px; line-height:1.6; }.hero-bottom { gap:8px; margin-top:17px; }.hero-label { display:none; }.hero-fee>b { font-size:23px; }.hero-fee>span { font-size:9px; }.royal-crown { width:115px; height:130px; }.royal-orbit { width:155px; height:155px; }.orbit-two { width:200px; height:200px; }.hero-art-label { font-size:5px; letter-spacing:.15em; bottom:32px; }.spark-one { right:10%; top:24%; }.spark-two { left:8%; }.lot .bd { padding:10px; }.lot .nm { align-items:flex-start; flex-direction:column; gap:3px; }.feedbtn { padding:0 12px; }.fb { padding:0 10px; }.grid { gap:10px; } }
@media(prefers-reduced-motion:reduce) { .royal-crown,.hero-spark { animation:none; }.lot { transition:none; } }

/* Animated KING signature: quiet idle motion, a periodic sweep of light. */
/* One entrance sweep; a shared timeline survives catalogue and filter redraws. */
.king-hero::after { content:''; position:absolute; inset:-40% -60%; z-index:2; pointer-events:none; background:linear-gradient(110deg,transparent 37%,#f5cc7410 43%,#ffe9a94a 49%,#fff5d96b 50%,#e9b85d16 56%,transparent 63%); opacity:0; transform:translateX(-65%); animation:heroEntranceSheen 3.6s cubic-bezier(.22,.61,.36,1) both; animation-delay:var(--hero-delay,0ms); }
.hero-copy h1>span { width:fit-content; background:linear-gradient(110deg,#f0cc76 20%,#f0cc76 36%,#fff8da 48%,#fff0b1 52%,#d4a544 63%,#f0cc76 80%); background-size:260% 100%; background-clip:text; -webkit-background-clip:text; color:transparent; animation:heroGoldFlow 3.6s ease-in-out both; animation-delay:var(--hero-delay,0ms); }
.royal-crown svg { animation:heroCrownLight 3.6s ease-in-out both; animation-delay:var(--hero-delay,0ms); }
@keyframes heroEntranceSheen { 0% { opacity:0; transform:translateX(-65%); } 12% { opacity:.7; } 62% { opacity:1; } 100% { opacity:0; transform:translateX(65%); } }
@keyframes heroGoldFlow { from { background-position:100% 50%; } to { background-position:0% 50%; } }
@keyframes heroCrownLight { 0%,100% { filter:brightness(1); } 45% { filter:brightness(1.35) drop-shadow(0 0 12px #ffe5a53b); } }
body.noanim .hero-copy h1>span { background:none; color:var(--y); }
body.noanim .king-hero::after { display:none; }
@media(prefers-reduced-motion:reduce) { .king-hero::after { display:none; }.hero-copy h1>span,.royal-crown svg { animation:none; }.hero-copy h1>span { background:none; color:var(--y); } }
.brand .mark { position:relative; overflow:hidden; isolation:isolate; animation:kingGlow 5s ease-in-out infinite; }
.brand .mark svg { position:relative; z-index:1; transform-origin:50% 70%; animation:kingBow 5s ease-in-out infinite; }
.brand .mark::after { content:''; pointer-events:none; position:absolute; inset:-35% -80%; background:linear-gradient(110deg,transparent 38%,#fff9dc00 42%,#fff9dcaa 50%,#fff9dc00 58%,transparent 62%); transform:translateX(-65%); animation:kingShine 7s ease-in-out infinite; }
.brand b { animation:kingWordGlow 5s ease-in-out infinite; }
@keyframes kingBow { 0%,12%,48%,100% { transform:translateY(0) rotate(0); } 24% { transform:translateY(-2px) rotate(-9deg); } 34% { transform:translateY(-2px) rotate(7deg); } }
@keyframes kingGlow { 0%,100% { box-shadow:0 4px 22px #d6a64a20; } 30% { box-shadow:0 4px 26px #d6a64a45,0 0 8px #f0cc7618; } }
@keyframes kingShine { 0%,55% { transform:translateX(-65%); opacity:0; } 60% { opacity:1; } 79%,100% { transform:translateX(65%); opacity:0; } }
@keyframes kingWordGlow { 0%,100% { text-shadow:0 0 0 transparent; } 30% { text-shadow:0 0 16px #f0cc7640; } }
@media(hover:hover) { .brand:hover .mark svg { animation:kingBow 1.2s ease-in-out infinite; }.brand:hover b { color:var(--y); } }
@media(prefers-reduced-motion:reduce) { .brand .mark,.brand .mark svg,.brand .mark::after,.brand b,.brand:hover .mark svg { animation:none; }.brand .mark::after { display:none; } }
.tc-card { margin:10px 0 18px; padding:18px; border:1px solid #d7b56730; border-radius:18px; background:radial-gradient(ellipse at 0 0,#f0cc7610,transparent 75%),#191a1e; }
.tc-heading { display:flex; align-items:center; gap:12px; margin-bottom:14px; }.tc-heading>div { display:flex; flex-direction:column; gap:3px; }.tc-heading b { font-size:18px; }.tc-heading span:not(.tc-icon) { color:var(--muted); font-size:11px; }.tc-icon { display:grid; place-items:center; width:42px; height:42px; border-radius:13px; background:var(--y-soft); color:var(--y); }.tc-icon .gem { width:20px; height:20px; }.tc-card .small { line-height:1.7; margin:0 0 18px; }.tc-label { display:block; color:var(--muted); font-size:12px; margin-bottom:8px; }.tc-amount { height:54px; border-radius:13px; }.tc-amount input { font-size:24px; width:100%; }.tc-amount>span { font-size:12px; color:var(--y); font-weight:800; }.tc-pay { margin-top:12px; }.tc-note { font-size:11px; line-height:1.6; color:var(--muted); text-align:center; margin:12px 0 0; }.tc-account { display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:space-between; border:1px solid var(--line); padding:10px; border-radius:10px; margin-bottom:16px; font-size:11px; }.tc-account>span { display:flex; gap:6px; align-items:center; }.tc-account i { background:var(--green); width:6px; height:6px; border-radius:50%; }.tc-account button { color:var(--y); font-size:11px; }.tc-account button:disabled { opacity:.4; }
.balance-controls { display:flex; align-items:center; border:1px solid #37332a; background:#1b1c20; border-radius:22px; padding-right:6px; gap:3px; flex:none; }
.balance-controls .bal { border:0; background:transparent; padding-right:0; }
.balance-withdraw { display:grid; place-items:center; width:24px; height:24px; flex:none; border-radius:50%; background:#ffffff09; color:#d8cfbc; font-size:17px; line-height:1; }
.balance-withdraw:hover { background:var(--y-soft); color:var(--y); }
@media(max-width:360px) { .hd { gap:5px; }.brand { gap:6px; }.brand b { font-size:14px; }.balance-controls .bal { padding-left:9px; gap:6px; } }
.tc-destination { display:block; font-size:12px; line-height:1.7; overflow-wrap:anywhere; padding:10px; border:1px solid var(--line); border-radius:10px; color:var(--muted); user-select:text; -webkit-user-select:text; }