/* ============ ROBIN TERMINAL — LAYOUT ============ */
/* Zero literałów kolorów: wszystko przez var(--token) z theme.css. */
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg); color: var(--text);
  font-family: var(--font-ui);
  overflow-x: hidden;
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-2); }
button { font-family: var(--font-ui); }
input { font-family: var(--font-data); }
[hidden] { display: none !important; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ta-r { text-align: right; } .ta-c { text-align: center; } .ml-auto { margin-left: auto; }
.up { color: var(--up) !important; } .down { color: var(--down) !important; } .flat { color: var(--text-mid) !important; }
.dim { color: var(--text-3); }
.noscript-note { padding: 40px; text-align: center; font: 600 15px var(--font-ui); color: var(--text-2); }

@keyframes orbA { 0%,100% { transform: translate(0,0); } 50% { transform: translate(60px,-40px); } }
@keyframes orbB { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-50px,50px); } }
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes slideIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes pulseSkel { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------- glow na hover: pseudo-element + opacity (nie animujemy box-shadow) ---------- */
.glow-card { position: relative; transition: border-color .35s ease; }
.glow-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s ease; box-shadow: 0 0 34px var(--accent-glow-08); }
.glow-card:hover { border-color: var(--accent-border-dim); }
.glow-card:hover::after { opacity: 1; }
.glow-host { position: relative; }
.glow-host::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s ease; box-shadow: 0 0 38px rgba(204,255,0,.45); }
.glow-host:hover::after { opacity: 1; }

/* ---------- przyciski ---------- */
.btn-primary { background: var(--accent); border: none; color: var(--bg); font: 700 12.5px var(--font-ui); padding: 10px 18px; border-radius: var(--radius-xs); cursor: pointer; box-shadow: 0 0 20px rgba(204,255,0,.3); }
.btn-primary:active { transform: translateY(1px); }
.btn-ghost { background: transparent; border: 1px solid rgba(255,255,255,.2); color: var(--text); font: 600 12.5px var(--font-ui); padding: 10px 18px; border-radius: var(--radius-xs); cursor: pointer; transition: border-color .3s ease, color .3s ease; }
.btn-ghost:hover { border-color: var(--accent-border); color: var(--accent); }
.btn-lg { font-size: 15.5px; padding: 14px 28px; }
.btn-sm { font-size: 13px; padding: 8px 0; width: 92px; flex: none; }
.mini-pill { background: var(--surface-2); border: 1px solid var(--border-strong); color: var(--ink-2); font: 600 11.5px var(--font-data); padding: 5px 12px; border-radius: 999px; cursor: pointer; transition: border-color .25s ease, color .25s ease; }
.mini-pill:hover { border-color: var(--accent-border); color: var(--accent); }
.chip-btn { font: 600 11px var(--font-data); border-radius: 999px; padding: 7px 14px; cursor: pointer; white-space: nowrap; border: 1px solid var(--border-12); color: var(--ink-2); background: transparent; transition: border-color .25s ease, color .25s ease; }
.chip-btn:hover { border-color: var(--accent-border); }
.chip-btn.on { border-color: var(--accent-border); color: var(--accent); background: var(--accent-glow-08); }
.chip-static { color: var(--text-2); font-size: 15.5px; cursor: default; }
.chip-static em, .chip-btn em { color: var(--accent); font-style: normal; }
.link-btn { background: none; border: none; font: 600 11.5px var(--font-data); color: var(--text-2); letter-spacing: .06em; cursor: pointer; }
.link-btn:hover { color: var(--accent); }

/* ---------- topbar ---------- */
.topbar { display: flex; align-items: center; gap: 22px; padding: 0 20px; height: 52px; border-bottom: 1px solid var(--border); position: relative; z-index: var(--z-popover); }
.brand { display: flex; align-items: center; gap: 9px; cursor: pointer; background: none; border: none; padding: 0; color: var(--text); }
.brand-mark { width: 22px; height: 22px; background: var(--accent); border-radius: 5px; display: grid; place-items: center; font: 700 13px var(--font-data); color: var(--bg); }
.brand-name { font: 700 17px var(--font-ui); letter-spacing: .04em; }
.brand-name em { color: var(--accent); font-style: normal; }
.main-nav { display: flex; gap: 4px; }
.main-nav button { background: none; border: none; padding: 6px 12px; border-radius: 7px; cursor: pointer; font: 600 16.5px var(--font-ui); color: var(--text-2); }
.main-nav button:hover { color: var(--accent-2); }
.main-nav button.on { background: var(--accent-glow-12); color: var(--accent); }
.search-wrap { flex: 1; max-width: 340px; margin-left: auto; position: relative; }
#global-search { width: 100%; background: var(--input-bg); border: 1px solid var(--border-mid); border-radius: 8px; color: var(--text); font: 500 13.5px var(--font-data); padding: 9px 12px; outline: none; appearance: none; }
#global-search::placeholder { color: var(--text-3); }
.search-pop { position: absolute; top: 44px; left: 0; right: 0; z-index: 50; background: var(--popover); border: 1px solid var(--border-strong); border-radius: 12px; box-shadow: 0 22px 60px rgba(0,0,0,.75); overflow: hidden; animation: fadeUp .15s ease; }
.search-pop-head { display: flex; justify-content: space-between; padding: 9px 14px 7px; font: 600 12px var(--font-data); color: var(--text-3); letter-spacing: .06em; border-bottom: 1px solid var(--border); }
.search-row { display: flex; align-items: center; gap: 10px; padding: 9px 14px; cursor: pointer; border-bottom: 1px solid var(--border-soft); width: 100%; background: none; border-left: none; border-right: none; border-top: none; text-align: left; color: var(--text); }
.search-row:hover { background: var(--accent-bg-05); }
.sr-av { width: 30px; height: 30px; border-radius: 9px; flex: none; display: grid; place-items: center; font: 700 12px var(--font-data); color: var(--bg); background-size: cover; background-position: center; background-color: var(--avatar-bg); }
.sr-main { min-width: 0; flex: 1; }
.sr-syms { display: flex; align-items: center; gap: 6px; }
.sr-syms strong { font: 700 13px var(--font-data); }
.sr-syms span { font: 400 11.5px var(--font-ui); color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-addr { font: 400 11.5px var(--font-data); color: var(--text-mid); margin-top: 2px; }
.sr-price { text-align: right; flex: none; font: 600 12px var(--font-data); }
.sr-price em { display: block; font-style: normal; margin-top: 2px; }
.sr-mc { text-align: right; flex: none; width: 74px; font: 500 12px var(--font-data); color: var(--text-2); }
.sr-mc em { display: block; font-style: normal; color: var(--text-3); margin-top: 2px; }
.search-empty { padding: 18px 14px; text-align: center; font: 500 11.5px var(--font-data); color: var(--text-3); }
.search-empty em { font-style: normal; color: var(--text-2); }
.topbar-right { display: flex; align-items: center; gap: 8px; }
.gas-chip { font: 600 11.5px var(--font-data); color: var(--text-2); border: 1px solid var(--border-mid); border-radius: 8px; padding: 7px 10px; white-space: nowrap; }
.btn-connect { background: var(--accent); border: none; color: var(--bg); font: 700 12px var(--font-ui); padding: 8px 16px; border-radius: 8px; cursor: pointer; }
.btn-connect:hover { background: var(--accent-2); }

/* ---------- ticker ---------- */
.ticker { height: 28px; border-bottom: 1px solid var(--border); background: var(--bg-deep); display: flex; align-items: center; }
.ticker-tag { flex: none; font: 700 11px var(--font-data); color: var(--accent); background: var(--accent-bg-10); border-radius: 4px; padding: 2px 8px; margin: 0 6px 0 14px; letter-spacing: .06em; }
.ticker-scroll { cursor: grab; flex: 1; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; height: 28px; min-width: 0; overscroll-behavior: contain; }
.ticker-scroll::-webkit-scrollbar { display: none; }
.ticker-scroll.dragging { cursor: grabbing; }
.ticker-track { display: flex; width: max-content; height: 28px; align-items: center; padding-right: 8px; }
.ticker-item { display: flex; align-items: center; gap: 6px; padding: 0 14px; font: 500 12.5px var(--font-data); white-space: nowrap; border: none; border-left: 1px solid var(--chart-grid); cursor: pointer; background: none; height: 28px; color: var(--text-soft); }
.ticker-item:hover { background: var(--accent-bg-05); }
.ticker-item .tk-rank { color: var(--accent); font-weight: 700; }
.ticker-item .tk-s { color: var(--text-dim); }

/* ---------- widoki ---------- */
#app { max-width: 1680px; margin: 0 auto; border-left: 1px solid var(--border); border-right: 1px solid var(--border); min-height: calc(100vh - 81px); }
.view { min-height: 680px; }
.view-terminal, .view-pulse, .view-token, .view-bridge, .view-perps, .view-earn { height: calc(100vh - 81px); min-height: 620px; }

/* ---------- landing ---------- */
.view-landing { position: relative; overflow: hidden; background: var(--bg); }
.orb { position: absolute; border-radius: 50%; pointer-events: none; }
.orb-a { width: 520px; height: 520px; background: radial-gradient(circle, rgba(204,255,0,.13), transparent 65%); top: -160px; right: -80px; animation: orbA 11s ease-in-out infinite; }
.orb-b { width: 380px; height: 380px; background: radial-gradient(circle, rgba(204,255,0,.08), transparent 65%); bottom: -140px; left: -60px; animation: orbB 14s ease-in-out infinite; }
.hero { display: grid; grid-template-columns: 1fr 740px; gap: 36px; align-items: center; position: relative; padding: 56px 60px 44px 52px; perspective: 1600px; }
.hero-badge { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--accent-border); background: var(--accent-bg-07); border-radius: 999px; padding: 7px 15px; font: 600 13px var(--font-data); color: var(--accent); margin-bottom: 22px; }
.blink-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: blink 1.6s infinite; }
.hero-copy h1 { margin: 0 0 18px; font: 700 52px/1.05 var(--font-ui); letter-spacing: -.01em; }
.hero-copy h1 em { color: var(--accent); font-style: normal; }
.hero-sub { margin: 0 0 26px; font: 400 16.5px/1.6 var(--font-ui); color: var(--text-2); max-width: 470px; text-wrap: pretty; }
.hero-sub strong { color: var(--text); font-weight: 600; }
.hero-cta { display: flex; gap: 12px; margin-bottom: 32px; }
.hero-stats { display: flex; gap: 36px; margin-bottom: 26px; }
.hero-stats strong { font: 700 23px var(--font-data); display: block; }
.hero-stats i { font-style: normal; color: var(--text-2); font-size: 15px; }
.stat-accent { color: var(--accent); }
.hero-stats div > span { font: 500 12px var(--font-ui); color: var(--text-dim); margin-top: 2px; display: block; }
#stat-pool { font: inherit; color: inherit; display: inline; }
.arcus-pill { display: inline-flex; align-items: center; gap: 9px; font: 500 12.5px var(--font-data); color: var(--text-dim); border: 1px solid rgba(255,255,255,.09); border-radius: 999px; padding: 7px 14px; cursor: pointer; transition: border-color .3s ease, color .3s ease; position: relative; }
.arcus-pill::after { content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: 0; transition: opacity .3s ease; box-shadow: 0 0 26px var(--accent-glow-12); pointer-events: none; }
.arcus-pill:hover { border-color: rgba(204,255,0,.45); color: var(--text-2); }
.arcus-pill:hover::after { opacity: 1; }
.arcus-pill img { border-radius: 5px; }
.arcus-pill strong { color: var(--text-soft); }
.ap-short { display: none; }
.hero-shot { position: relative; background: var(--surface); border: 1px solid var(--border-mid); border-radius: 14px; overflow: hidden; box-shadow: -24px 30px 80px rgba(0,0,0,.65), 0 0 60px rgba(204,255,0,.06), 0 0 0 1px var(--accent-glow-08); transform: rotateY(-4.5deg) rotateX(1.5deg) translateX(-44px); transform-style: preserve-3d; transition: transform .5s ease; }
.hero-shot:hover { transform: rotateY(-8deg) rotateX(2.5deg) translateX(-44px); }
.shot-bar { display: flex; align-items: center; gap: 6px; padding: 11px 14px; border-bottom: 1px solid var(--border); }
.shot-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--dot-dim); }
.shot-url { margin-left: 10px; flex: 1; max-width: 280px; background: var(--surface-3); border: 1px solid var(--border); border-radius: 6px; font: 500 10.5px var(--font-data); color: var(--text-3); padding: 4px 10px; }
.shot-body { filter: saturate(.7) brightness(.92); }
.shot-head, .shot-row { display: grid; grid-template-columns: 1.5fr 1fr 1fr .8fr .8fr; align-items: center; padding: 0 16px; }
.shot-head { height: 28px; border-bottom: 1px solid var(--border); font: 600 10px var(--font-data); color: var(--text-3); letter-spacing: .06em; }
.shot-row { height: 41px; border-bottom: 1px solid var(--border-faint); font: 500 12px var(--font-data); color: var(--ink-2); }
.shot-row .sh-pair { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--text); }
.sh-av { width: 22px; height: 22px; border-radius: 7px; flex: none; background-size: cover; background-position: center; background-color: var(--avatar-bg); box-shadow: 0 0 0 1px rgba(204,255,0,.3); }
.shot-row strong { font: 700 12px var(--font-data); }
.shot-row .sh-tx { color: var(--text-2); }
.shot-row.hl-up { background: rgba(204,255,0,.09); }
.shot-row.hl-up-soft { background: var(--accent-bg-05); }
.shot-row.hl-down { background: var(--down-bg-07); }
.shot-glaze { position: absolute; inset: 44px 0 0; pointer-events: none; background: radial-gradient(ellipse at 30% 15%, var(--accent-bg-05), transparent 45%), radial-gradient(ellipse at 85% 80%, rgba(204,255,0,.04), transparent 40%), radial-gradient(ellipse at center, transparent 40%, rgba(6,6,6,.3) 95%); }
.promo-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; padding: 0 52px 40px; position: relative; }
.promo-card { border: 1px solid var(--border-mid); background: var(--surface); border-radius: 12px; padding: 22px 24px; position: relative; }
.promo-hot { border-color: var(--accent-border-soft); background: linear-gradient(160deg, rgba(204,255,0,.09), rgba(204,255,0,.02)); }
.promo-hot::after { box-shadow: 0 0 44px rgba(204,255,0,.18); }
.promo-big { font: 700 27px var(--font-data); color: var(--accent); }
.promo-card h3 { font: 600 14.5px var(--font-ui); margin: 6px 0 4px; }
.promo-card p { font: 400 13px/1.5 var(--font-ui); color: var(--text-2); margin: 0; }
.live-chip { position: absolute; top: 14px; right: 14px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--accent-border); background: var(--accent-bg-07); border-radius: 999px; padding: 4px 10px; font: 600 11px var(--font-data); color: var(--accent); }
.live-chip .blink-dot { animation-duration: 1.4s; }
.steps-block { padding: 0 52px 48px; position: relative; }
.steps-block h2 { font: 700 24px var(--font-ui); margin: 0 0 18px; }
.steps-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.step-card { border: 1px solid var(--border); border-radius: 12px; padding: 20px 22px; background: var(--panel); }
.step-no { font: 700 13px var(--font-data); color: var(--accent); margin-bottom: 10px; }
.step-card h3 { font: 600 15px var(--font-ui); margin: 0 0 5px; letter-spacing: .08em; }
.step-card p { font: 400 13px/1.5 var(--font-ui); color: var(--text-2); margin: 0; }

/* ---------- terminal ---------- */
.view-terminal { display: flex; flex-direction: column; }
.term-toolbar { display: flex; align-items: center; gap: 20px; padding: 10px 20px; border-bottom: 1px solid var(--border); }
.term-modes { display: flex; gap: 18px; align-items: baseline; }
.term-modes button { background: none; border: none; padding: 0 0 3px; font: 600 14px var(--font-ui); color: var(--text-dim); cursor: pointer; border-bottom: 2px solid transparent; }
.term-modes button.on { color: var(--text); border-bottom-color: var(--accent); }
.tf-chips { display: flex; gap: 3px; }
.tf-chips button, .slip-chips button { background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border); font: 600 11.5px var(--font-data); padding: 4px 10px; border-radius: 6px; cursor: pointer; }
.tf-chips button.on, .slip-chips button.on { background: var(--accent-dim); color: var(--accent); border-color: rgba(204,255,0,.5); }
.toolbar-right { display: flex; gap: 8px; margin-left: auto; align-items: center; }
.pop-anchor { position: relative; }
.filter-pop { position: absolute; top: 38px; right: 0; z-index: var(--z-popover); width: 400px; max-height: min(68vh,600px); overflow-y: auto; scrollbar-width: thin; background: var(--popover); border: 1px solid var(--border-strong); border-radius: 14px; padding: 14px 16px; box-shadow: var(--shadow-pop); display: flex; flex-direction: column; gap: 10px; animation: fadeUp .15s ease; overscroll-behavior: contain; }
.pop-title-row { display: flex; align-items: center; justify-content: space-between; }
.pop-title-row strong { font: 700 14px var(--font-ui); }
.pop-icons { display: flex; gap: 12px; }
.pop-icons button { background: none; border: none; font: 600 15.5px var(--font-data); color: var(--text-2); cursor: pointer; padding: 0; }
.pop-icons button:hover { color: var(--accent); }
.f-label { font: 500 15.5px var(--font-data); color: var(--text-dim); margin-bottom: 6px; display: block; }
.filter-pop input, .psearch-pop input { width: 100%; background: var(--input-bg); border: 1px solid var(--border-mid); border-radius: 8px; color: var(--text); font: 500 15.5px var(--font-data); padding: 8px 10px; outline: none; }
.f-sec { font: 600 15.5px var(--font-data); color: var(--text-3); letter-spacing: .06em; }
.f-sec-row { display: flex; align-items: center; justify-content: space-between; }
.plat-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.plat-chip { display: inline-flex; align-items: center; gap: 6px; font: 600 12px var(--font-data); border-radius: 999px; padding: 6px 14px; cursor: pointer; white-space: nowrap; border: 1px solid var(--border-mid); background: rgba(255,255,255,.05); color: var(--ink-2); }
.plat-chip.off { color: var(--text-3); border-color: rgba(255,255,255,.09); background: transparent; filter: grayscale(1); opacity: .6; }
.metric-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.metric-col { display: flex; flex-direction: column; gap: 8px; max-height: 210px; overflow-y: auto; }
.metric-field .f-label { margin-bottom: 5px; font-size: 13.5px; }
.metric-field .mm { display: flex; gap: 8px; }
.metric-field .mm input { flex: 1; min-width: 0; }
.btn-apply { border-radius: 999px; padding: 10px 0; flex: none; }
.ax-scroll { overflow-y: auto; flex: 1; overscroll-behavior: contain; }
.ax-head, .ax-row { display: grid; grid-template-columns: minmax(300px,1.5fr) 190px 1fr .8fr 1fr 1fr 1fr 110px; align-items: center; padding: 0 24px; }
.ax-head { height: 38px; border-bottom: 1px solid var(--border); font: 500 11px var(--font-ui); color: var(--text-mid); position: sticky; top: 0; background: var(--bg); z-index: 2; }
.ax-head button { background: none; border: none; padding: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.ax-head button:hover { color: var(--ink-2); }
.ax-head i { font-style: normal; }
.ax-row { height: 64px; border-bottom: 1px solid var(--border-soft); cursor: pointer; transition: background .6s; }
.ax-row:hover { background: rgba(204,255,0,.04); }
.ax-row.flash-up { background: var(--flash-up); }
.ax-row.flash-down { background: var(--flash-down); }
.ax-row.fresh { animation: slideIn .1s ease; }
.ax-pair { display: flex; align-items: center; gap: 11px; min-width: 0; }
.ax-av { width: 46px; height: 46px; border-radius: 12px; flex: none; display: grid; place-items: center; font: 700 14px var(--font-data); color: var(--bg); box-shadow: 0 0 0 1px var(--accent-border-soft); background-size: cover; background-position: center; background-color: var(--avatar-bg); }
.ax-id { min-width: 0; }
.ax-syms { display: flex; align-items: center; gap: 7px; }
.ax-syms strong { font: 700 16.5px var(--font-ui); }
.ax-syms .nm { font: 400 14px var(--font-ui); color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.copy-ico { background: none; border: none; color: var(--text-3); font-size: 13px; cursor: pointer; padding: 0; }
.copy-ico:hover { color: var(--accent); }
.copy-ico.ok { color: var(--accent); }
.badge-new { font: 700 12px var(--font-data); background: var(--badge-new-fg); color: var(--bg); border-radius: 3px; padding: 1.5px 4px; }
.ax-meta { display: flex; align-items: center; gap: 10px; margin-top: 6px; font: 500 13.5px var(--font-data); color: var(--text-mid); }
.ax-meta .age { color: var(--accent); font-weight: 700; }
.ax-meta a { color: var(--text-3); display: inline-flex; }
.ax-meta a:hover { color: var(--accent); }
.ax-meta .views { display: flex; align-items: center; gap: 5px; }
.ax-row .num { font: 600 14.5px var(--font-data); color: var(--text-soft); }
.ax-row .num-mc { font: 700 15px var(--font-data); }
.ax-tx strong { font: 600 14.5px var(--font-data); display: block; }
.ax-tx span { font: 500 12.5px var(--font-data); margin-top: 4px; display: block; }
.ax-tx .b { color: var(--up); } .ax-tx .sep { color: var(--text-3); } .ax-tx .s { color: var(--down); }
.btn-rowbuy { justify-self: center; background: var(--accent); border: none; color: var(--bg); font: 700 12.5px var(--font-ui); padding: 10px 26px; border-radius: 999px; cursor: pointer; position: relative; box-shadow: 0 0 16px rgba(204,255,0,.25); }
.btn-rowbuy::after { content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: 0; transition: opacity .25s ease; box-shadow: 0 0 28px rgba(204,255,0,.55); }
.btn-rowbuy:hover::after { opacity: 1; }
.spark { justify-self: start; }

/* stany ---------- */
.skeleton-list { padding: 10px 24px; display: flex; flex-direction: column; gap: 10px; }
.skeleton-list .sk { height: 46px; border-radius: 10px; background: linear-gradient(90deg, var(--surface), var(--surface-2), var(--surface)); animation: pulseSkel 1.2s ease-in-out infinite; }
.empty-state, .error-state { padding: 46px 20px; text-align: center; font: 500 13.5px var(--font-data); color: var(--text-3); }
.error-state button { margin-left: 8px; background: var(--surface-2); color: var(--accent); border: 1px solid var(--accent-border); border-radius: 8px; padding: 6px 14px; font: 600 12px var(--font-ui); cursor: pointer; }

/* ---------- token detail ---------- */
.view-token { display: grid; grid-template-columns: 1fr 336px; gap: 1px; background: var(--border); }
.tk-main { background: var(--bg); display: flex; flex-direction: column; min-width: 0; }
.tk-header { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.btn-back { background: var(--surface-2); border: 1px solid var(--border-mid); color: var(--text-2); font: 600 12px var(--font-data); padding: 6px 10px; border-radius: 8px; cursor: pointer; }
.btn-back:hover { color: var(--accent); }
.tk-av { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; font: 700 11px var(--font-data); color: var(--bg); background-size: cover; background-position: center; background-color: var(--avatar-bg); }
.tk-symrow { display: flex; align-items: center; gap: 7px; }
.tk-symrow strong { font: 700 15px var(--font-data); }
.tk-quote { font: 500 12px var(--font-data); color: var(--text-dim); }
.tk-agechip { font: 700 11.5px var(--font-data); background: var(--accent-glow-12); color: var(--accent); border-radius: 4px; padding: 2px 6px; }
.tk-addrrow { display: flex; gap: 10px; font: 400 12px var(--font-data); color: var(--text-3); margin-top: 3px; }
.tk-addrrow button { background: none; border: none; color: var(--text-3); font: inherit; cursor: pointer; padding: 0; }
.tk-addrrow button:hover { color: var(--accent); }
.tk-addrrow button.ok i { color: var(--accent); }
.tk-addrrow i { font-style: normal; }
.btn-star { margin-left: 4px; background: transparent; border: 1px solid var(--border-strong); color: var(--ink-2); font: 600 12.5px var(--font-ui); padding: 6px 14px; border-radius: 999px; cursor: pointer; }
.btn-star:hover { border-color: var(--accent-border); color: var(--accent); }
.tk-mc { font: 700 22px var(--font-data); margin-left: 10px; }
.tk-stats { display: flex; gap: 20px; margin-left: auto; }
.tk-stats span { font: 500 11.5px var(--font-ui); color: var(--text-dim); display: block; }
.tk-stats strong { font: 600 12.5px var(--font-data); margin-top: 2px; display: block; }
.tk-tfrow { display: flex; gap: 4px; padding: 7px 14px; border-bottom: 1px solid var(--border); align-items: center; }
.tf-note-btn { background: none; border: none; font: 500 11.5px var(--font-data); color: var(--text-3); margin-left: 10px; cursor: pointer; }
.tf-note-btn:hover { color: var(--ink-2); }
.tk-ohlc { margin-left: auto; font: 500 11.5px var(--font-data); color: var(--text-mid); white-space: nowrap; }
.chart-wrap { flex: 1; min-height: 300px; position: relative; }
#chart { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; touch-action: none; }
.zoom-bar { position: absolute; right: 70px; top: 8px; display: flex; gap: 5px; font: 600 11.5px var(--font-data); align-items: center; }
.zoom-bar .zl { color: var(--text-3); font-size: 9px; }
.zoom-bar button { border: 1px solid var(--border-12); background: none; border-radius: 5px; padding: 2px 8px; cursor: pointer; color: var(--text-2); font: 600 11.5px var(--font-data); }
.zoom-bar button:hover { color: var(--accent); }
.zoom-bar .zreset { margin-left: 5px; }
.tk-tabs-row { display: flex; gap: 2px; padding: 5px 12px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); align-items: center; }
#tk-tabs button { background: transparent; border: none; border-bottom: 2px solid transparent; cursor: pointer; padding: 6px 10px 8px; font: 600 11px var(--font-data); color: var(--text-2); }
#tk-tabs button.on { border-bottom-color: var(--accent); color: var(--accent); }
.tk-tabs-row .btn-zap { margin-left: auto; margin-bottom: 5px; }
.tk-tables { overflow-y: auto; flex: none; height: 210px; overscroll-behavior: contain; }
.tx-head, .tx-row { display: grid; grid-template-columns: .7fr .7fr 1fr 1.1fr 1.1fr 1.3fr; padding: 0 16px; align-items: center; }
.tx-head { height: 26px; position: sticky; top: 0; background: var(--surface); border-bottom: 1px solid var(--border); font: 600 12px var(--font-data); color: var(--text-mid); letter-spacing: .05em; z-index: 2; }
.tx-row { height: 31px; border-bottom: 1px solid var(--border-faint); font: 500 12px var(--font-data); transition: background .6s; }
.tx-row.fresh { animation: slideIn .4s ease; background: var(--accent-bg-05); }
.tx-row .age { color: var(--text-mid); }
.tx-row .typ { font-weight: 700; }
.tx-row .amt, .tx-row .prc { color: var(--ink-2); text-align: right; }
.tx-row .mkr { color: var(--text-dim); text-align: right; }
.hold-head, .hold-row { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; padding: 0 16px; align-items: center; }
/* Bogata tabela holderów (7 kolumn): WALLET | ETH | BOUGHT | SOLD | PNL |
 * REMAINING | FUNDING. Osobny selektor, żeby zwykła 5-kolumnowa (dev-pane)
 * została nietknięta. */
.hold-head-rich, .hold-rows-rich .hold-row { grid-template-columns: 1.5fr 0.85fr 1fr 1fr 0.9fr 1.1fr 1fr; }
.hold-head { height: 26px; position: sticky; top: 0; background: var(--surface); border-bottom: 1px solid var(--border); font: 600 12px var(--font-data); color: var(--text-mid); letter-spacing: .05em; z-index: 2; }
.hold-row { height: 40px; border-bottom: 1px solid var(--border-faint); font: 500 12px var(--font-data); }
.hold-row.is-pool { background: var(--accent-bg-07, rgba(190,255,80,.05)); }
.hold-row .wal { display: flex; align-items: center; gap: 6px; color: var(--ink-2); white-space: nowrap; overflow: hidden; }
.hold-tag { font: 600 9.5px var(--font-data); background: var(--accent-bg-07); color: var(--accent); border: 1px solid var(--accent-border-dim); border-radius: 4px; padding: 1px 5px; letter-spacing: .04em; flex: none; }
.hold-row .own { color: var(--text-soft); text-align: right; }
.hold-row .bal, .hold-row .val { color: var(--ink-2); text-align: right; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; }
.hold-row .bal small, .hold-row .val small { color: var(--text-soft); font-size: 10px; }
.hold-row .fnd { color: var(--text-mid); text-align: right; display: flex; justify-content: flex-end; }
/* Sociale + lupka w nagłówku tokena (żądanie operatora). */
.tk-links { display: inline-flex; gap: 6px; margin-left: 8px; align-items: center; }
.tk-links .tk-link { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 22px; padding: 0 5px; border: 1px solid var(--border, #333); border-radius: 6px; color: var(--text-mid); text-decoration: none; font-size: 12px; line-height: 1; }
.tk-links .tk-link:hover { border-color: var(--accent, #bef050); color: var(--accent, #bef050); }
/* A10: badge launchu (DEV%, blokada LP). */
.tk-links .tk-badge { display: inline-flex; align-items: center; height: 22px; padding: 0 7px; border: 1px solid var(--border, #333); border-radius: 6px; color: var(--text-mid); font-size: 11px; font-weight: 600; line-height: 1; }
.tk-links .tk-badge.warn { color: #ff6b6b; border-color: rgba(255,107,107,0.4); }
.tk-links .tk-badge.ok { color: var(--accent, #bef050); border-color: rgba(190,240,80,0.4); }
/* Pasek ratio sell/buy. */
.tk-ratio { display: flex; align-items: center; gap: 8px; padding: 4px 16px 8px; font: 500 11px var(--font-data); color: var(--text-mid); }
.tk-ratio .ratio-track { position: relative; flex: 1; height: 8px; background: var(--chart-candle-down, #e5484d); border-radius: 4px; overflow: hidden; }
.tk-ratio .ratio-track i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--chart-candle-up, #46a758); }
.tk-ratio .ratio-track em { position: absolute; right: 6px; top: -1px; font-size: 10px; color: var(--text-soft); font-style: normal; }
.tk-rail { background: var(--bg); display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; }
.rail-quad { display: grid; grid-template-columns: repeat(4,1fr); border-bottom: 2px solid var(--accent-border-soft); }
.rail-quad div { padding: 10px 0; }
.rail-quad div:first-child { padding-left: 14px; }
.rail-quad div:last-child { padding-right: 14px; }
.rail-quad span { font: 500 9.5px var(--font-ui); color: var(--text-dim); display: block; }
.rail-quad strong { font: 700 12px var(--font-data); margin-top: 3px; display: block; }
.rail-body { padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.side-btns { display: flex; gap: 6px; }
.side-btn { flex: 1; padding: 8px 0; border-radius: 8px; font: 700 13px var(--font-ui); cursor: pointer; border: 1px solid var(--border); background: var(--popover); color: var(--text-2); }
.side-btn.on { border-color: rgba(204,255,0,.5); background: var(--accent-glow-12); color: var(--accent); }
.side-btn.on.sell { border-color: rgba(255,92,106,.5); background: rgba(255,92,106,.12); color: var(--down-2); }
.order-modes { display: flex; gap: 14px; border-bottom: 1px solid var(--border); padding: 0 2px; align-items: center; }
.order-modes button { background: transparent; border: none; border-bottom: 2px solid transparent; cursor: pointer; padding: 5px 2px 8px; font: 600 11.5px var(--font-ui); color: var(--text-mid); }
.order-modes button.on { border-bottom-color: var(--accent); color: var(--text); }
.om-note { margin-left: auto; font: 600 11.5px var(--font-data); color: var(--text-3); }
.amt-box { background: var(--popover); border: 1px solid var(--border); border-radius: 9px; padding: 10px 12px; display: flex; align-items: center; gap: 8px; }
.amt-box span { color: var(--text-3); font: 600 11.5px var(--font-data); }
.amt-box input, .amt-box strong { flex: 1; min-width: 0; background: transparent; border: none; outline: none; color: var(--text); font: 700 15px var(--font-data); padding: 0; text-align: right; }
.amt-box em { color: var(--accent); font: 700 12px var(--font-data); font-style: normal; }
.amt-box.tall input, .amt-box.tall strong { text-align: left; font-size: 20px; }
.preset-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 5px; }
.preset-grid button { background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--border); font: 600 11px var(--font-data); padding: 8px 0; border-radius: 7px; cursor: pointer; }
.preset-grid button.on { background: var(--accent-dim); color: var(--accent); border-color: rgba(204,255,0,.5); }
.slip-row { display: flex; justify-content: space-between; align-items: center; padding: 0 2px; font: 500 12px var(--font-data); color: var(--text-dim); gap: 8px; }
.tk-balrow { margin-top: -4px; }
.tk-balv { color: var(--ink-2); }
.slip-chips { display: flex; gap: 4px; align-items: center; }
.slip-custom { display: flex; align-items: center; background: var(--input-bg); border: 1px solid var(--border-mid); border-radius: 6px; padding: 0 7px; color: var(--text-3); font: 600 11.5px var(--font-data); }
.slip-custom input { width: 44px; background: transparent; border: none; outline: none; color: var(--text); font: 600 11.5px var(--font-data); padding: 4px 0; text-align: right; }
.fee-row { display: flex; gap: 10px; font: 500 11.5px var(--font-data); color: var(--text-dim); padding: 0 2px; }
.btn-swap { width: 100%; border-radius: 999px; font-size: 14px; padding: 13px 0; box-shadow: 0 0 26px rgba(204,255,0,.35); }
.btn-swap.sell { background: var(--down); box-shadow: 0 0 26px rgba(255,77,94,.35); }
.pos-quad { display: grid; grid-template-columns: repeat(4,1fr); border: 1px solid var(--border); border-radius: 9px; background: var(--surface); }
.pos-quad div { padding: 9px 0; }
.pos-quad div:first-child { padding-left: 12px; }
.pos-quad span { font: 500 12px var(--font-ui); color: var(--text-dim); display: block; }
.pos-quad strong { font: 700 11px var(--font-data); margin-top: 2px; display: block; }
.ti-head { display: flex; justify-content: space-between; align-items: center; padding: 2px 2px 0; }
.ti-head strong { font: 700 12.5px var(--font-ui); }
.ti-head span { color: var(--text-3); font-size: 11px; cursor: pointer; }
.ti-tiles { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.ti-tile { text-align: center; padding: 9px 0; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.ti-tile strong { font: 700 12px var(--font-data); display: block; }
.ti-tile span { font: 500 12px var(--font-ui); color: var(--text-dim); margin-top: 3px; display: block; }
.ca-box { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 8px 11px; display: flex; align-items: center; gap: 8px; font: 500 12px var(--font-data); }
.ca-box span { color: var(--text-3); flex: none; }
.ca-box em { color: var(--ink-2); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-style: normal; }
.ca-box button { background: none; border: none; color: var(--text-3); cursor: pointer; flex: none; font-size: 12px; padding: 0; }
.ca-box button.ok, .ca-box button:hover { color: var(--accent); }
.bond-block { margin-top: 2px; }
.bond-lbls { display: flex; justify-content: space-between; font: 600 12px var(--font-data); color: var(--ink-2); margin-bottom: 6px; }
.bond-lbls em { color: var(--accent); font-style: normal; }
.bar-track { height: 5px; border-radius: 3px; background: var(--track); overflow: hidden; position: relative; }
.bar-track.thin { height: 3px; }
.bar-track.big { height: 6px; overflow: visible; }
.bar-fill { height: 100%; width: 0; border-radius: 3px; background: linear-gradient(90deg, var(--accent-deep), var(--accent)); transition: width .5s; }
.bar-fill.solid { background: var(--accent); }

/* ---------- pulse ---------- */
.view-pulse { display: flex; flex-direction: column; }
.pulse-toolbar { display: flex; align-items: center; gap: 14px; padding: 10px 20px; border-bottom: 1px solid var(--border); }
.pulse-title { font: 700 16.5px var(--font-ui); margin: 0; }
.robin-chip { display: inline-flex; align-items: center; gap: 6px; font: 700 15px var(--font-data); background: var(--accent-dim); color: var(--accent); border: 1px solid rgba(204,255,0,.5); border-radius: 999px; padding: 6px 12px; cursor: pointer; white-space: nowrap; }
.robin-chip .sq { width: 7px; height: 7px; border-radius: 2px; background: var(--accent); }
.disp-pop { position: absolute; top: 38px; right: 0; z-index: var(--z-popover); width: 230px; background: var(--popover); border: 1px solid var(--border-strong); border-radius: 12px; padding: 12px; box-shadow: var(--shadow-pop); display: flex; flex-direction: column; gap: 8px; animation: fadeUp .15s ease; }
.disp-pop button { display: flex; align-items: center; justify-content: space-between; font: 500 14px var(--font-data); color: var(--ink-2); cursor: pointer; padding: 5px 6px; border-radius: 7px; background: none; border: none; width: 100%; }
.disp-pop button:hover { background: rgba(255,255,255,.05); }
.disp-pop button i { color: transparent; font-style: normal; }
.disp-pop button.on i { color: var(--accent); }
.pulse-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-auto-rows: minmax(0, 1fr); gap: 1px; background: var(--border); flex: 1; min-height: 0; }
.pulse-col { background: var(--bg); display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.pcol-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.pcol-title { font: 700 17px var(--font-ui); white-space: nowrap; }
.pcol-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; animation: blink 1.4s infinite; }
.pcol-dot.c0 { background: var(--accent); } .pcol-dot.c1 { background: var(--warn); } .pcol-dot.c2 { background: var(--migrated); }
.pcol-search-btn { font: 500 11px var(--font-data); border-radius: 6px; padding: 3px 8px; cursor: pointer; white-space: nowrap; border: 1px solid var(--border); color: var(--text-3); background: none; }
.pcol-search-btn.on { border-color: rgba(204,255,0,.5); color: var(--accent); background: var(--accent-glow-08); }
.psearch-pop { position: absolute; top: 28px; right: 0; z-index: var(--z-popover); width: 280px; background: var(--popover); border: 1px solid var(--border-strong); border-radius: 12px; padding: 14px; box-shadow: var(--shadow-pop); display: flex; flex-direction: column; gap: 10px; animation: fadeUp .15s ease; }
.psearch-pop .f-label { font-size: 13.5px; margin-bottom: 5px; }
.psearch-pop .f-sec { font-size: 13.5px; }
.pcol-cards { overflow-y: auto; flex: 1; padding: 8px; display: flex; flex-direction: column; gap: 8px; overscroll-behavior: contain; }
.pulse-card { border: 1px solid var(--border); border-radius: 11px; background: var(--surface); padding: 11px 12px; cursor: pointer; transition: background .6s, border-color .25s ease; }
.pulse-card:hover { border-color: var(--accent-border); }
.pulse-card.flash-up { background: rgba(204,255,0,.06); }
.pulse-card.flash-down { background: rgba(255,92,106,.06); }
.pulse-card.fresh { animation: slideIn .1s ease; }
.pc-top { display: flex; align-items: center; gap: 10px; }
.pc-av { width: 46px; height: 46px; border-radius: 12px; flex: none; display: grid; place-items: center; font: 700 14px var(--font-data); color: var(--bg); background-size: cover; background-position: center; background-color: var(--avatar-bg); }
.pulse-col[data-col="0"] .pc-av { box-shadow: 0 0 0 1px var(--accent); }
.pulse-col[data-col="1"] .pc-av { box-shadow: 0 0 0 1px var(--warn); }
.pulse-col[data-col="2"] .pc-av { box-shadow: 0 0 0 1px var(--migrated); }
.pc-id { min-width: 0; flex: 1; }
.pc-syms { display: flex; align-items: center; gap: 6px; }
.pc-syms strong { font: 700 16.5px var(--font-ui); }
.pc-syms span { font: 400 14px var(--font-ui); color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-meta { display: flex; align-items: center; gap: 8px; font: 500 13.5px var(--font-data); color: var(--text-mid); margin-top: 5px; }
.pc-meta .age-hot { color: var(--accent); }
.pc-nums { text-align: right; flex: none; }
.pc-nums strong { font: 700 15px var(--font-data); display: block; }
.pc-nums strong em { color: var(--accent); font-style: normal; }
.pc-nums span { font: 600 14px var(--font-data); color: var(--text-2); margin-top: 2px; display: block; }
.pc-audit { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 9px; }
.pc-audit span { display: inline-flex; gap: 4px; font: 500 13.5px var(--font-data); background: var(--avatar-bg); border-radius: 4px; padding: 2.5px 6px; color: var(--text-3); }
.pc-audit em { font-style: normal; font-weight: 700; }
.pc-foot { display: flex; align-items: center; gap: 8px; margin-top: 9px; }
.pc-foot .kv { font: 500 14px var(--font-data); color: var(--text-2); }
.pc-foot .kv em { color: var(--text-soft); font-style: normal; }
.buy-ratio { flex: 1; height: 3px; border-radius: 2px; overflow: hidden; background: var(--track); display: flex; min-width: 30px; }
.buy-ratio i { background: var(--accent); display: block; }
.buy-ratio em { flex: 1; background: var(--down); display: block; }
.btn-zap { background: var(--accent-bg-10); border: 1px solid var(--accent-border); color: var(--accent); font: 700 11.5px var(--font-data); padding: 6px 12px; border-radius: 999px; cursor: pointer; white-space: nowrap; transition: background .2s ease, color .2s ease; }
.btn-zap:hover { background: var(--accent); color: var(--bg); }
.pulse-grid.no-audit .pc-audit { display: none; }
.pulse-grid.no-bond .buy-ratio { visibility: hidden; }
.pulse-grid.compact .pulse-card { padding: 7px 10px; }
.pulse-grid.compact .pc-av { width: 34px; height: 34px; }
.pulse-grid.compact .pc-audit { display: none; }

/* ---------- bridge ---------- */
.view-bridge { overflow-y: auto; display: flex; justify-content: center; align-items: flex-start; padding: 40px 0; }
.bridge-card { width: 480px; border: 1px solid var(--border-mid); border-radius: 20px; background: var(--surface); padding: 24px; box-shadow: var(--shadow-card); }
.bridge-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.bridge-head strong { font: 700 20px var(--font-ui); display: flex; align-items: center; gap: 9px; }
.bridge-head em { color: var(--accent); font-style: normal; }
.hist-btn { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; cursor: pointer; background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border-12); }
.hist-btn.on { background: var(--accent-dim); color: var(--accent); border-color: rgba(204,255,0,.5); }
.br-box { background: var(--popover); border: 1px solid var(--border); border-radius: 14px; padding: 16px; }
.br-box-to { border-color: var(--accent-border-dim); }
.br-box-head { display: flex; justify-content: space-between; align-items: center; font: 500 11.5px var(--font-data); color: var(--text-dim); margin-bottom: 12px; }
.addr-pill { border: 1px solid var(--border-mid); border-radius: 999px; padding: 4px 10px; display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); }
.dot-on { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); display: inline-block; }
.br-amt-row { display: flex; align-items: center; gap: 10px; }
.token-pill { display: flex; align-items: center; gap: 8px; background: var(--chip); border: 1px solid var(--border-mid); border-radius: 999px; padding: 8px 14px; font: 700 13px var(--font-data); color: var(--text); }
button.token-pill { cursor: pointer; }
button.token-pill:hover { border-color: var(--accent-border); }
.token-pill i { color: var(--text-3); font-size: 10px; font-style: normal; }
.tok-ic { width: 20px; height: 20px; border-radius: 50%; display: inline-block; }
.tok-ic.eth { background: linear-gradient(135deg, var(--eth-a), var(--eth-b)); }
.tok-ic.robin { background: var(--accent); border-radius: 6px; }
#br-amt, .br-out { flex: 1; min-width: 0; background: transparent; border: none; outline: none; color: var(--text); font: 700 30px var(--font-data); padding: 0; text-align: right; }
.br-out { color: var(--text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.br-box-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; font: 500 11.5px var(--font-data); color: var(--text-mid); }
.br-quick { display: flex; gap: 12px; }
.br-quick button { background: none; border: none; color: var(--text-2); font: 600 11.5px var(--font-data); cursor: pointer; padding: 0; }
.br-quick button:hover { color: var(--accent); }
.br-swapicon { display: grid; place-items: center; height: 14px; }
.br-swapicon span { width: 34px; height: 34px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--border-12); display: grid; place-items: center; color: var(--accent); font-size: 15px; margin-top: -4px; box-shadow: 0 0 0 5px var(--surface); }
.br-rate { display: flex; justify-content: space-between; font: 500 12px var(--font-data); color: var(--text-mid); margin-top: 12px; padding: 0 4px; }
.br-rate span:last-child { color: var(--ink-2); }
.btn-bridge { width: 100%; margin-top: 16px; border-radius: 999px; letter-spacing: .08em; text-transform: uppercase; font-size: 14px; padding: 13px 0; }
.btn-bridge:disabled { background: var(--surface-2); color: var(--text-3); border: 1px solid var(--border-mid); box-shadow: none; cursor: default; }
.br-progress { border: 1px solid rgba(204,255,0,.25); background: rgba(204,255,0,.04); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.br-prog-head { display: flex; justify-content: space-between; font: 600 12px var(--font-data); color: var(--ink-2); }
.br-prog-head em { color: var(--accent); font-style: normal; }
.br-step { display: flex; align-items: center; gap: 9px; font: 500 12px var(--font-data); color: var(--text-3); }
.br-step i { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font: 700 11.5px var(--font-data); flex: none; font-style: normal; background: var(--surface-2); color: var(--text-3); border: 1px solid var(--border-mid); }
.br-step.act { color: var(--accent); }
.br-step.act i { background: var(--accent-glow-12); color: var(--accent); border-color: rgba(204,255,0,.5); }
.br-step.done { color: var(--text-soft); }
.br-step.done i { background: var(--accent); color: var(--bg); border: none; }
.br-step .note { margin-left: auto; color: var(--text-3); }
.br-hist-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.br-hist-head strong { font: 600 13px var(--font-ui); }
.brh-row { border-bottom: 1px solid var(--border-soft); }
.brh-main { display: grid; grid-template-columns: 100px 1fr 80px 70px; align-items: center; height: var(--row-h-touch); font: 500 12px var(--font-data); cursor: pointer; width: 100%; background: none; border: none; padding: 0; text-align: left; color: var(--text-soft); }
.brh-main .rt { color: var(--text-dim); }
.brh-main .st-done { color: var(--accent); } .brh-main .st-pend { color: var(--warn); }
.brh-main .tm { color: var(--text-3); text-align: right; }
.brh-det { padding: 2px 0 14px; display: flex; flex-direction: column; gap: 6px; font: 500 12px var(--font-data); }
.brh-det div { display: flex; justify-content: space-between; }
.brh-det span { color: var(--text-3); }
.brh-det em { color: var(--text-2); font-style: normal; }
.brh-det .hash { color: var(--accent); cursor: pointer; }

/* ---------- perps ---------- */
.view-perps { position: relative; overflow: hidden; }
.perps-overlay { position: absolute; inset: 0; z-index: 20; background: rgba(4,4,4,.88); display: grid; place-items: center; }
.perps-msg { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 40px; }
.perps-msg img { border-radius: 18px; box-shadow: 0 0 50px rgba(204,255,0,.15); }
.perps-msg h2 { font: 700 30px var(--font-ui); letter-spacing: -.01em; margin: 0; }
.perps-msg p { font: 400 14px/1.6 var(--font-ui); color: var(--text-2); max-width: 420px; margin: 0; }
.perps-msg strong { color: var(--text); font-weight: 600; }
.arcus-badge { display: inline-flex; align-items: center; gap: 8px; font: 600 11.5px var(--font-data); color: var(--accent); border: 1px solid var(--accent-border); background: var(--accent-bg-07); border-radius: 999px; padding: 8px 16px; }
.perps-dim { display: grid; grid-template-columns: 1fr 340px; gap: 1px; background: var(--border); height: 100%; opacity: .45; pointer-events: none; }
.perps-left { background: var(--bg); min-width: 0; display: flex; flex-direction: column; }
.perps-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--border); border-bottom: 1px solid var(--border); }
.perps-stats div { background: var(--bg); padding: 14px 18px; }
.perps-stats strong { font: 700 17px var(--font-data); display: block; }
.perps-stats span { font: 500 11.5px var(--font-data); color: var(--text-dim); margin-top: 2px; display: block; }
.perp-head, .perp-row { display: grid; grid-template-columns: 170px 110px 80px 100px 100px 100px; padding: 0 16px; align-items: center; }
.perp-head { height: 30px; border-bottom: 1px solid var(--border); font: 600 12px var(--font-data); color: var(--text-dim); letter-spacing: .05em; }
.perp-row { height: 42px; border-bottom: 1px solid var(--border-faint); font: 500 12px var(--font-data); color: var(--ink-2); }
.perp-row .mkt { display: flex; align-items: center; gap: 8px; color: var(--text); font: 700 11.5px var(--font-data); }
.perp-row .pav { width: 20px; height: 20px; border-radius: 50%; }
.perp-row.sel { background: var(--accent-bg-05); box-shadow: inset 2px 0 0 var(--accent); }
.perps-rail { background: var(--bg); padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.lev-row { display: flex; align-items: center; justify-content: space-between; font: 500 12px var(--font-data); color: var(--text-dim); }
.perp-kv { display: flex; flex-direction: column; gap: 6px; font: 500 12px var(--font-data); color: var(--text-dim); padding: 0 2px; }
.perp-kv div { display: flex; justify-content: space-between; }
.perp-kv em { color: var(--text-soft); font-style: normal; }
.perp-note { border: 1px solid var(--border); border-radius: var(--radius-xs); padding: 12px; font: 400 12px/1.5 var(--font-ui); color: var(--text-dim); margin: auto 0 0; }

/* ---------- earn ---------- */
.view-earn { overflow-y: auto; padding: 24px 28px; overscroll-behavior: contain; }
.earn-tabs { display: flex; gap: 8px; align-items: center; }
.earn-tab { border-radius: 999px; padding: 9px 20px; font: 700 14.5px var(--font-ui); cursor: pointer; background: transparent; color: var(--text-2); border: 1px solid var(--border-12); }
.earn-tab.on { background: var(--accent-dim); color: var(--accent); border-color: rgba(204,255,0,.5); }
.earn-tab i { opacity: .65; font-size: .85em; font-style: normal; }
.reset-note { margin-left: auto; font: 500 12.5px var(--font-data); color: var(--text-dim); }
.reset-note em { color: var(--accent); font-style: normal; }
.earn-quad { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; padding: 16px 0; }
.eq-card { border: 1px solid var(--border); border-radius: 12px; padding: 16px; background: var(--surface); display: flex; flex-direction: column; justify-content: center; text-align: center; }
.eq-hot { border-color: rgba(204,255,0,.3); background: linear-gradient(160deg, rgba(204,255,0,.07), rgba(204,255,0,.01)); }
.eq-lbl { font: 500 13px var(--font-data); color: var(--text-3); letter-spacing: .06em; }
.eq-card > strong { font: 700 28px var(--font-data); margin: 8px 0 4px; }
.eq-accent { font: 500 14px var(--font-data); color: var(--accent); font-style: normal; }
.eq-accent2 { color: var(--accent); }
.eq-foot { font: 400 12.5px var(--font-data); color: var(--text-dim); margin-top: 6px; font-style: normal; }
.eq-card .bar-track { margin-top: 4px; }
.eq-streak { text-align: left; justify-content: flex-start; }
.eq-row { display: flex; justify-content: space-between; align-items: center; }
.eq-row.small { margin-top: 8px; font: 500 12px var(--font-data); color: var(--text-mid); }
.eq-row.small em { font-style: normal; color: var(--text-2); }
.eq-row.small em.ok { color: var(--accent); }
.streak-dots { display: flex; gap: 4px; margin: 10px 0; }
.streak-dots span { flex: 1; height: 30px; border-radius: 7px; display: grid; place-items: center; font: 600 10.5px var(--font-data); background: var(--avatar-bg); color: var(--text-3); border: 1px solid var(--border); }
.streak-dots span.on { background: rgba(204,255,0,.15); color: var(--accent); border-color: rgba(204,255,0,.45); }
.check-box { width: 100%; text-align: center; border-radius: var(--radius-xs); padding: 11px 0; font: 700 12.5px var(--font-ui); background: var(--surface-2); color: var(--text-2); border: 1px dashed rgba(255,255,255,.15); }
.check-box.ok { background: var(--accent-glow-12); color: var(--accent); border: 1px solid rgba(204,255,0,.5); }
.eq-streak .bar-track { margin-top: 6px; height: 4px; }
.earn-mid { display: grid; grid-template-columns: 1.15fr 2fr; gap: 12px; margin-bottom: 16px; }
.ref-card, .code-card { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.seg { display: flex; gap: 2px; background: var(--surface-2); border-radius: 7px; padding: 2px; }
.seg button { border: none; border-radius: 7px; padding: 5px 12px; font: 600 12px var(--font-ui); cursor: pointer; background: transparent; color: var(--text-2); }
.seg button.on { background: var(--accent-dim); color: var(--accent); }
.ref-big { flex: 1; display: flex; align-items: center; justify-content: center; gap: 10px; }
.ref-big strong { font: 700 32px var(--font-data); letter-spacing: -.02em; }
.ref-big span { font: 500 14px var(--font-data); color: var(--text-3); }
.ref-big em { font: 500 14px var(--font-data); color: var(--accent); font-style: normal; }
#claim-btn { width: 100%; margin-top: auto; font-size: 13px; }
#claim-btn:disabled { background: var(--surface-2); color: var(--text-3); border: 1px solid var(--border-mid); box-shadow: none; cursor: default; }
.code-card { justify-content: center; gap: 12px; }
.code-card hr { border: none; height: 1px; background: rgba(255,255,255,.06); margin: 0; width: 100%; }
.code-row { display: flex; align-items: center; gap: 10px; }
.code-row .eq-lbl { width: 110px; flex: none; }
.code-edit, .code-show { display: flex; align-items: center; gap: 10px; flex: 1; }
#code-input { background: var(--input-bg); border: 1px solid var(--border-12); border-radius: 8px; padding: 7px 12px; font: 700 15px var(--font-data); color: var(--text); flex: 1; text-align: center; outline: none; min-width: 0; }
#code-save:disabled { background: var(--surface-2); color: var(--text-3); box-shadow: none; cursor: default; }
.code-show em { background: var(--surface-2); border: 1px solid rgba(204,255,0,.3); border-radius: 8px; padding: 7px 12px; font: 700 15px var(--font-data); color: var(--accent); flex: 1; text-align: center; font-style: normal; }
.code-applied { background: var(--surface-2); border: 1px solid var(--border-mid); border-radius: 8px; padding: 7px 12px; font: 700 15px var(--font-data); color: var(--text-soft); flex: 1; text-align: center; font-style: normal; }
.code-active { flex: none; width: 92px; text-align: center; font: 700 12px var(--font-data); color: var(--accent); }
.lb-titlerow { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.lb-titlerow h3 { font: 700 16px var(--font-ui); margin: 0; }
.lb-titlerow > span { font: 500 12px var(--font-data); color: var(--text-dim); }
.lb-titlerow .slip-chips { margin-left: auto; }
.lb-titlerow .slip-chips button { padding: 5px 12px; font-size: 12px; }
.lb-card { border: 1px solid rgba(255,255,255,.09); border-radius: 14px; background: var(--surface); padding: 10px 22px 6px; margin-bottom: 8px; }
.gl-grid { display: grid; grid-template-columns: 70px 1fr 260px 220px; column-gap: 0; }
.cl-grid { display: grid; grid-template-columns: 80px 1.3fr 1fr 1fr 1fr .9fr; column-gap: 18px; }
.lb-you { border: 1px solid var(--accent-border-soft); background: var(--accent-bg-05); border-radius: var(--radius-xs); align-items: center; height: 44px; padding: 0 6px; font: 600 14.5px var(--font-data); margin: 2px 0 8px; }
.lb-you .acc { color: var(--accent); font-weight: 700; }
.lb-head { padding: 4px 6px 10px; font: 600 12px var(--font-data); letter-spacing: .05em; border-bottom: 1px solid var(--border); color: var(--text-mid); }
.lb-head button { background: none; border: none; padding: 0; font: inherit; color: var(--text-mid); cursor: pointer; text-align: left; }
.lb-head button.ta-r { text-align: right; } .lb-head button.ta-c { text-align: center; }
.lb-head button.on { color: var(--accent); }
.lb-row { align-items: center; height: 48px; padding: 0 6px; border-bottom: 1px solid var(--border-soft); font: 500 14.5px var(--font-data); }
.lb-row:hover { background: rgba(204,255,0,.03); }
.lb-row .rk { color: var(--text-3); font-weight: 700; font-size: 15.5px; }
.lb-row .rk.top3 { color: var(--accent); }
.lb-row .nm { color: var(--text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-row .v2 { color: var(--ink-2); }
.tix { white-space: nowrap; }
.lb-row .bns { color: var(--accent); }
.lb-you.hl { box-shadow: 0 0 0 1px var(--accent-border-soft); }
.num-slot { display: inline-block; min-width: 68px; text-align: left; }
.num-slot.w44 { min-width: 44px; } .num-slot.w48 { min-width: 48px; } .num-slot.w52 { min-width: 52px; }

/* competition hero */
.comp-hero { position: relative; border: 1px solid var(--border-mid); border-radius: var(--radius); background: var(--surface); overflow: hidden; padding: 28px 32px; margin: 16px 0; }
.comp-art { position: absolute; right: 60px; top: 50%; transform: translateY(-50%) perspective(700px) rotateX(18deg) rotateZ(-6deg); width: 230px; height: 230px; pointer-events: none; transform-style: preserve-3d; }
.comp-art i { position: absolute; display: block; }
.comp-art .ca1 { inset: -36px; border-radius: 50%; background: radial-gradient(circle, rgba(204,255,0,.13), transparent 62%); filter: blur(12px); }
.comp-art .ca2 { inset: 0; border-radius: 50%; border: 1px solid rgba(204,255,0,.14); background: radial-gradient(circle at 30% 22%, rgba(204,255,0,.09), rgba(0,0,0,.35) 70%); box-shadow: 0 26px 50px rgba(0,0,0,.65), 0 0 46px var(--accent-glow-08), inset 0 14px 26px var(--accent-bg-05), inset 0 -18px 30px rgba(0,0,0,.6); }
.comp-art .ca3 { inset: 24px; border-radius: 50%; border: 1px solid rgba(204,255,0,.16); background: conic-gradient(from 210deg, var(--accent-bg-10), transparent 35%, rgba(255,255,255,.05) 55%, transparent 80%); box-shadow: 0 16px 30px rgba(0,0,0,.5), inset 0 -12px 22px rgba(0,0,0,.55), inset 0 10px 18px rgba(204,255,0,.06); }
.comp-art .ca4 { inset: 52px; border-radius: 28px; border: 1px solid rgba(204,255,0,.3); transform: rotate(45deg) translateZ(24px); background: linear-gradient(135deg, rgba(204,255,0,.16), rgba(0,0,0,.4) 65%); box-shadow: 0 18px 34px rgba(0,0,0,.6), 0 0 26px var(--accent-dim), inset 0 8px 14px var(--accent-bg-10), inset 0 -10px 18px rgba(0,0,0,.65); }
.comp-art .ca5 { inset: 82px; border-radius: var(--radius-md); border: 1px solid rgba(204,255,0,.55); transform: rotate(45deg) translateZ(52px); background: linear-gradient(315deg, rgba(204,255,0,.28), rgba(90,112,0,.18) 45%, rgba(0,0,0,.3)); box-shadow: 0 22px 40px rgba(0,0,0,.7), 0 0 38px rgba(204,255,0,.3), inset 0 6px 10px rgba(255,255,255,.14), inset 0 -8px 14px rgba(0,0,0,.55); }
.comp-art .ca6 { inset: 104px; border-radius: 12px; transform: rotate(45deg) translateZ(64px); background: linear-gradient(135deg, rgba(204,255,0,.5), var(--accent-glow-12) 70%); filter: blur(1px); box-shadow: 0 0 30px rgba(204,255,0,.45); }
.comp-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(80% 120% at 85% 50%, rgba(255,255,255,.03), transparent 60%); pointer-events: none; }
.comp-live { position: absolute; top: 20px; right: 24px; font: 600 14px var(--font-data); color: var(--accent); background: var(--accent-glow-08); border: 1px solid var(--accent-border); border-radius: 999px; padding: 6px 14px; display: inline-flex; align-items: center; gap: 7px; }
.comp-live em { font-style: normal; }
.comp-body { position: relative; }
.comp-kicker { font: 500 16px var(--font-data); color: var(--text-2); letter-spacing: .04em; }
.comp-pool { font: 700 54px var(--font-data); letter-spacing: -.02em; margin: 4px 0 10px; }
.comp-desc { font: 400 15px/1.65 var(--font-ui); color: var(--text-2); text-wrap: pretty; margin: 0; }
.comp-desc em { color: var(--accent); font-weight: 600; font-style: normal; }
.comp-desc strong { color: var(--text); font-weight: 500; }
.comp-stats { display: flex; align-items: flex-end; gap: 64px; margin: 18px 0 14px; padding-right: 300px; }
.comp-stats span { font: 600 14.5px var(--font-ui); color: var(--accent); display: block; }
.comp-stats strong { font: 700 28px var(--font-data); letter-spacing: -.02em; margin-top: 3px; display: flex; align-items: baseline; gap: 7px; }
.comp-stats strong em { font-style: normal; }
.comp-stats .coin { width: 18px; height: 18px; border-radius: 50%; background: var(--accent); display: inline-grid; place-items: center; font: 700 11.5px var(--font-data); color: var(--bg); align-self: center; font-style: normal; }
.comp-stats .at { font: 600 13.5px var(--font-data); color: var(--text-dim); font-style: normal; }
.comp-progress { position: relative; padding-top: 26px; margin-right: 300px; }
.comp-prog-flag { position: absolute; top: 0; left: 0; transform: translateX(-50%); font: 700 13px var(--font-data); color: var(--accent); white-space: nowrap; }
.prog-knob { position: absolute; top: 50%; left: 0; transform: translate(-50%,-50%); width: 13px; height: 13px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px rgba(204,255,0,.7); }
.comp-prog-ends { display: flex; justify-content: space-between; font: 500 13.5px var(--font-data); color: var(--text-mid); margin-top: 7px; }
.comp-foot { font: 400 13.5px var(--font-data); color: var(--text-3); margin: 8px 0 0; }
.comp-foot em { color: var(--accent); font-style: normal; }

/* ---------- quick-buy dialog ---------- */
dialog#qb-modal { width: 340px; background: var(--popover); border: 1px solid var(--border-strong); border-radius: var(--radius-md); padding: 22px; box-shadow: 0 30px 90px rgba(0,0,0,.8); color: var(--text); z-index: var(--z-modal); }
dialog#qb-modal::backdrop { background: var(--scrim); }
dialog#qb-modal[open] { animation: fadeUp .15s ease; }
.qb-head { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.qb-w { width: 22px; height: 22px; border-radius: 7px; background: var(--accent); display: grid; place-items: center; font: 700 12px var(--font-data); color: var(--bg); }
.qb-head strong { font: 700 13px var(--font-ui); }
.qb-box { background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.qb-box hr { border: none; height: 1px; background: var(--chart-grid); margin: 0; }
.qb-row { display: flex; justify-content: space-between; align-items: center; font: 500 11.5px var(--font-data); color: var(--text-dim); }
.qb-amt { display: inline-flex; align-items: center; gap: 6px; background: var(--popover); border: 1px solid var(--border-12); border-radius: 8px; padding: 5px 10px; }
.qb-max { background: none; border: none; color: var(--accent); font: 700 10.5px var(--font-data); cursor: pointer; padding: 2px 2px; letter-spacing: .04em; }
.qb-max:active { color: var(--accent-2); }
.qb-bal { text-align: right; font: 500 11.5px var(--font-data); color: var(--text-mid); margin-top: -4px; }
.qb-bal em { font-style: normal; color: var(--ink-2); }
.qb-amt input { width: 64px; background: transparent; border: none; outline: none; color: var(--text); font: 700 14px var(--font-data); padding: 0; text-align: right; }
.qb-amt em { font: 700 12px var(--font-data); color: var(--accent); font-style: normal; }
.qb-out { display: inline-flex; align-items: center; gap: 7px; font: 700 14px var(--font-data); color: var(--text); }
.qb-av { width: 18px; height: 18px; border-radius: 50%; display: inline-block; background-size: cover; background-position: center; background-color: var(--avatar-bg); }
.qb-out em { font-style: normal; }
.qb-meta { display: flex; justify-content: space-between; align-items: center; font: 500 11.5px var(--font-data); color: var(--text-mid); margin-bottom: 14px; }
.qb-slip { display: inline-flex; align-items: center; gap: 5px; }
#qb-slip { width: 40px; background: var(--input-bg); border: 1px solid var(--border-mid); border-radius: 6px; color: var(--text); font: 600 11.5px var(--font-data); padding: 4px 6px; text-align: right; outline: none; }
.qb-btns { display: flex; gap: 8px; }
.qb-btns button { flex: 1; padding: 11px 0; border-radius: var(--radius-xs); font: 700 12.5px var(--font-ui); }
#qb-pending, #qb-done { text-align: center; padding: 14px 0; }
#qb-pending strong, #qb-done strong { font: 700 14px var(--font-ui); display: block; margin-bottom: 4px; }
#qb-pending p, #qb-done p { font: 500 13.5px var(--font-data); color: var(--text-dim); margin: 0; }
.spinner { width: 40px; height: 40px; margin: 0 auto 14px; border-radius: 50%; border: 2px solid rgba(204,255,0,.2); border-top-color: var(--accent); animation: spin .8s linear infinite; display: block; }
.qb-check { width: 40px; height: 40px; margin: 0 auto 14px; border-radius: 50%; background: var(--accent-dim); border: 1px solid rgba(204,255,0,.5); display: grid; place-items: center; color: var(--accent); font-size: 18px; }

/* ---------- toasty ---------- */
#toasts { position: fixed; bottom: 18px; right: 18px; z-index: var(--z-toast); display: flex; flex-direction: column; gap: 8px; }
.toast { background: var(--popover); border: 1px solid var(--border-strong); border-left: 3px solid var(--accent); border-radius: var(--radius-xs); padding: 11px 16px; font: 600 12.5px var(--font-ui); color: var(--text-soft); box-shadow: var(--shadow-pop); animation: fadeUp .2s ease; max-width: 320px; }
.toast.err { border-left-color: var(--down); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.qb-err { font: 600 11.5px var(--font-data); color: var(--down); margin: -8px 0 12px; }
.amt-err { font: 600 11.5px var(--font-data); color: var(--down); padding: 0 2px; }
.btn-swap:disabled, .qb-btns .btn-primary:disabled { background: var(--surface-2); color: var(--text-3); box-shadow: none; cursor: default; }

/* ---------- responsywność ---------- */
@media (max-width: 1279px) {
  .topbar { gap: 12px; }
  .main-nav { overflow-x: auto; scrollbar-width: none; flex: none; min-width: 0; max-width: 44vw; }
  .main-nav::-webkit-scrollbar { display: none; }
  .search-wrap { min-width: 0; flex: 1 1 120px; }
  .topbar-right { flex: none; }
  .hero { grid-template-columns: 1fr; padding: 40px 32px 32px; }
  .hero-shot { transform: none; }
  .hero-shot:hover { transform: none; }
  .promo-grid, .steps-grid { grid-template-columns: 1fr 1fr; padding-left: 32px; padding-right: 32px; }
  .steps-block { padding-left: 32px; padding-right: 32px; }
  .steps-block .steps-grid { padding: 0; }
  .pulse-grid { grid-template-columns: 1fr 1fr; }
  .view-token { grid-template-columns: 1fr; height: auto; }
  .tk-rail { border-top: 1px solid var(--border); }
  .earn-quad { grid-template-columns: 1fr 1fr; }
  .earn-mid { grid-template-columns: 1fr; }
  .comp-stats { flex-wrap: wrap; gap: 28px; padding-right: 0; }
  .comp-progress { margin-right: 0; }
  .comp-art { display: none; }
  .gl-grid { grid-template-columns: 60px 1fr 140px 130px; }
  .ax-head, .ax-row { grid-template-columns: minmax(240px,1.5fr) 150px 1fr .8fr 1fr 1fr 1fr 100px; }
}
/* ---------- komponenty mobile (ukryte na desktopie) ---------- */
.tabbar, .tk-trade-fab, .sheet-grab, .sheet-backdrop, .pulse-tabs, .ax-chev, .ax-panel, .ax-price { display: none; }
body.modal-lock { overflow: hidden; }
dialog#wallet-sheet { width: 340px; background: var(--popover); border: 1px solid var(--border-strong); border-radius: var(--radius-md); padding: 20px; color: var(--text); box-shadow: 0 30px 90px rgba(0,0,0,.8); z-index: var(--z-modal); }
dialog#wallet-sheet::backdrop { background: var(--scrim); }
#wallet-sheet strong { font: 700 16px var(--font-ui); display: block; margin: 2px 0 6px; }
#wallet-sheet p { font: 400 13px/1.55 var(--font-ui); color: var(--text-2); margin: 0 0 14px; }
.ws-btn { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; min-height: 48px; border-radius: 12px; border: 1px solid var(--border-12); background: var(--surface-2); color: var(--text); font: 600 14px var(--font-ui); margin-bottom: 9px; cursor: pointer; }
.ws-btn:hover { border-color: var(--accent-border); color: var(--text); }
.ws-ic { width: 22px; height: 22px; border-radius: 6px; display: inline-grid; place-items: center; background: var(--accent); color: var(--bg); font: 700 12px var(--font-data); flex: none; }
#ws-dismiss { width: 100%; }

/* ================== MOBILE ≤899px ================== */
@media (max-width: 899px) {
  html, body { overscroll-behavior-y: none; }
  * { -webkit-tap-highlight-color: transparent; }
  button, a, .chip-btn { touch-action: manipulation; }
  input, select, textarea { font-size: 16px !important; }
  .topbar, .tabbar, .earn-tabs, .term-modes, .pulse-tabs, #tk-tabs { user-select: none; -webkit-user-select: none; }
  .sr-addr, .ca-box em, .tk-addrrow, .pc-meta, .ax-meta { user-select: text; -webkit-user-select: text; }
  .main-nav, .gas-chip, .spark, .num-mc, .col-liq, .ax-tx, .btn-rowbuy, .ax-meta, .ax-head .col-tx { display: none !important; }
  .orb { animation: none; opacity: .5; }
  .btn-primary:active { filter: brightness(1.12); }
  .ax-row:hover, .pulse-card:hover { background: transparent; border-color: var(--border); }
  .ax-row:active, .pulse-card:active, .ticker-item:active, .search-row:active { background: var(--accent-bg-05); }

  .topbar { position: sticky; top: 0; z-index: 40; background: var(--bg); height: auto; padding: 8px 12px; padding-top: calc(8px + env(safe-area-inset-top)); gap: 10px; }
  .search-wrap { max-width: none; }
  #global-search { min-height: 44px; }
  .btn-connect { min-height: 44px; padding: 8px 14px; }
  .brand { min-height: 44px; }
  #app { border-left: none; border-right: none; min-height: 0; }
  .view { min-height: 0; }

  .view-landing { padding-bottom: var(--tabbar-h); }
  .hero { grid-template-columns: 1fr; padding: 30px 18px 24px; gap: 26px; }
  .hero-copy h1 { font-size: 36px; }
  .hero-sub { font-size: 15px; }
  .hero-cta { flex-wrap: wrap; }
  .hero-cta .btn-lg { min-height: 48px; }
  .hero-stats { gap: 20px 26px; flex-wrap: wrap; }
  .arcus-pill { white-space: nowrap; font-size: 11.5px; }
  .ap-long { display: none; }
  .ap-short { display: inline; }
  .hero-shot { transform: none; }
  .hero-shot:hover { transform: none; }
  .promo-grid { grid-template-columns: 1fr; padding: 0 18px 28px; }
  .steps-block { padding: 0 18px 40px; }
  .steps-grid { grid-template-columns: 1fr; }

  .view-terminal, .view-pulse, .view-perps {
    height: calc(100vh - 108px - var(--tabbar-h));
    height: calc(100dvh - 108px - var(--tabbar-h) - env(safe-area-inset-top));
    min-height: 380px;
  }
  .term-toolbar { flex-wrap: wrap; gap: 8px 12px; padding: 10px 12px; }
  /* zakładki z podkreśleniem zostają wizualnie niskie — hit-area przez ::after */
  .term-modes button { min-height: 34px; position: relative; }
  .term-modes button::after { content: ""; position: absolute; left: -6px; right: -6px; top: 50%; height: 44px; transform: translateY(-50%); }
  .tf-chips button, .slip-chips button { min-height: 44px; min-width: 44px; }
  .toolbar-right { margin-left: auto; }
  .filter-pop { position: fixed; left: 12px; right: 12px; top: calc(126px + env(safe-area-inset-top)); width: auto; max-height: 62dvh; }
  .psearch-pop { position: fixed; left: 12px; right: 12px; top: calc(166px + env(safe-area-inset-top)); width: auto; max-height: 58dvh; overflow-y: auto; }
  .chip-btn { min-height: 44px; display: inline-flex; align-items: center; }

  .ax-scroll { overflow-x: hidden; padding-bottom: calc(var(--tabbar-h) + 10px); }
  .ax-head, .ax-row { min-width: 0; grid-template-columns: minmax(0, 1fr) 62px 76px 30px; padding: 0 12px; }
  .ax-head > span:nth-child(2), .ax-head [data-sort="mc"], .ax-head .ta-c { display: none !important; }
  .ax-pair, .ax-id, .ax-syms { min-width: 0; overflow: hidden; }
  .ax-syms .copy-ico { display: none; }
  .badge-new { flex: none; }
  .ax-head { height: 44px; }
  .ax-head button { min-height: 44px; }
  .ax-row { height: auto; min-height: 62px; padding-top: 9px; padding-bottom: 9px; }
  .ax-av { width: 38px; height: 38px; border-radius: 10px; font-size: 12px; }
  .ax-syms strong { font-size: 15px; }
  .ax-syms .nm { display: none; }
  .ax-price { display: block; font: 600 13px var(--font-data); color: var(--ink-2); margin-top: 3px; }
  .ax-chev { display: grid; place-items: center; width: 34px; height: 34px; justify-self: end; color: var(--text-dim); font-size: 13px; transition: transform .2s; }
  .ax-row.x-open .ax-chev { transform: rotate(180deg); color: var(--accent); }
  .ax-panel { grid-column: 1 / -1; padding: 10px 2px 4px; }
  .ax-row.x-open { background: var(--accent-bg-05); }
  .ax-row.x-open .ax-panel { display: block; }
  .axp-kv { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 12px; }
  .axp-kv span { font: 500 10.5px var(--font-ui); color: var(--text-dim); display: block; }
  .axp-kv strong { font: 600 13px var(--font-data); margin-top: 3px; display: block; }
  .axp-btns { display: flex; gap: 10px; }
  .axp-btns .btn-zap { flex: 1; min-height: 44px; font-size: 13px; }
  .axp-open { flex: 1; min-height: 44px; padding: 0; font-size: 13px; border-radius: 999px; }

  .view-token {
    display: flex; flex-direction: column;
    height: calc(100vh - 108px - var(--tabbar-h));
    height: calc(100dvh - 108px - var(--tabbar-h) - env(safe-area-inset-top));
    min-height: 420px; background: var(--bg);
  }
  .tk-main { flex: 1; min-width: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 80px; }
  .tk-header { padding: 8px 12px; gap: 10px; }
  .tk-mc { font-size: 18px; }
  .btn-star { display: none; }
  .tk-stats { flex: none; width: 100%; margin-left: 0; overflow-x: auto; gap: 18px; scrollbar-width: none; white-space: nowrap; padding-right: 4px; }
  .tk-stats > div { flex: none; }
  .tk-stats > div:last-child { padding-right: 12px; }
  .chart-wrap { flex: none; height: 40vh; height: 40dvh; min-height: 220px; overflow: hidden; }
  #chart { touch-action: pan-y; }
  .tk-tfrow { flex-wrap: wrap; row-gap: 6px; }
  .tk-tfrow .tk-ohlc { display: none; } /* OHLC rysuje legenda na canvasie */
  .zoom-bar { top: auto; bottom: 46px; right: 10px; gap: 4px; }
  .zoom-bar .zl { color: var(--text-mid); font-size: 10px; }
  .zoom-bar button { min-height: 40px; min-width: 40px; background: var(--bg-deep); border-color: var(--border-strong); }
  .tk-tables { height: 250px; }
  .tx-head .col-maker, .hold-head .col-fund, .hold-row .fnd { display: none; }
  .tx-head, .tx-row { grid-template-columns: .7fr .7fr 1fr 1.1fr 1.1fr; }
  .hold-head, .hold-row { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
  /* Mobile: bogata tabela chowa BOUGHT/SOLD/ETH — zostaje WALLET | PNL |
   * REMAINING (najważniejsze). Funding chowany jak wyżej. */
  .hold-head-rich, .hold-rows-rich .hold-row { grid-template-columns: 1.5fr 1fr 1.1fr; }
  .hold-head-rich span:nth-child(2), .hold-head-rich span:nth-child(3), .hold-head-rich span:nth-child(4),
  .hold-rows-rich .hold-row .own, .hold-rows-rich .hold-row > .bal { display: none; }
  #tk-tabs button { min-height: 44px; }
  .tk-tabs-row { flex-wrap: wrap; row-gap: 2px; align-items: center; background: var(--bg); position: relative; z-index: 2; }
  #tk-tabs { display: flex; flex-wrap: wrap; }
  .tk-tabs-row .btn-zap { margin: 0 0 5px auto; }
  .tk-tables { position: relative; z-index: 2; background: var(--bg); }

  .tk-rail { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; max-height: 84vh; max-height: 84dvh; overflow-y: auto; overscroll-behavior: contain; background: var(--popover); border-top: 1px solid var(--border-strong); border-radius: 18px 18px 0 0; transform: translateY(105%); transition: transform .28s ease; padding-bottom: calc(14px + env(safe-area-inset-bottom)); box-shadow: var(--shadow-pop); }
  .tk-rail.open { transform: none; }
  .sheet-grab { display: grid; place-items: center; width: 100%; min-height: 48px; background: none; border: none; padding: 16px 0 12px; cursor: grab; }
  .sheet-grab span { width: 44px; height: 4px; border-radius: 2px; background: var(--border-strong); display: block; }
  .rail-quad { border-top: none; }
  .side-btn, .preset-grid button { min-height: 44px; }
  .slip-custom input { width: 58px; min-height: 44px; padding: 0; }
  .tk-trade-fab { display: block; position: fixed; right: 14px; bottom: calc(var(--tabbar-h) + 14px); z-index: 45; background: var(--accent); color: var(--bg); border: none; border-radius: 999px; font: 700 15px var(--font-ui); padding: 0 28px; min-height: 52px; cursor: pointer; box-shadow: 0 10px 30px rgba(0,0,0,.55), 0 0 24px rgba(204,255,0,.35); }
  .tk-rail.open ~ .tk-trade-fab { display: none; }
  .sheet-backdrop { display: block; position: fixed; inset: 0; z-index: 55; background: var(--scrim); }

  .pulse-toolbar { flex-wrap: wrap; padding: 10px 12px; gap: 10px; }
  .pulse-tabs { display: flex; gap: 6px; padding: 8px 12px; border-bottom: 1px solid var(--border); }
  .pulse-tabs button { flex: 1; min-height: 44px; border-radius: 9px; border: 1px solid var(--border-12); background: none; color: var(--text-2); font: 600 13px var(--font-ui); cursor: pointer; }
  .pulse-tabs button.on { background: var(--accent-dim); color: var(--accent); border-color: rgba(204,255,0,.5); }
  .pulse-grid { grid-template-columns: 1fr; }
  .pulse-grid[data-mtab="0"] .pulse-col:not([data-col="0"]) { display: none; }
  .pulse-grid[data-mtab="1"] .pulse-col:not([data-col="1"]) { display: none; }
  .pulse-grid[data-mtab="2"] .pulse-col:not([data-col="2"]) { display: none; }
  .pcol-cards { padding-bottom: calc(var(--tabbar-h) + 10px); }
  .pc-av { width: 42px; height: 42px; }
  .btn-zap { min-height: 44px; }
  .ax-row.fresh { animation: slideIn .1s ease; }
  .pulse-card.fresh { animation: slideIn .1s ease; }

  .view-bridge { height: auto; min-height: calc(100dvh - 108px - var(--tabbar-h)); padding: 16px 12px calc(var(--tabbar-h) + 16px); }
  .bridge-card { width: 100%; padding: 18px 14px; }
  #br-amt, .br-out { font-size: 24px; }
  #br-amt { font-size: 24px !important; min-height: 44px; } /* bije `input{font-size:16px!important}` wyżej */
  .br-quick button, .hist-btn { min-height: 44px; min-width: 44px; }
  .btn-bridge { min-height: 50px; }
  .brh-main { min-height: 48px; }

  .perps-dim { grid-template-columns: 1fr; }
  .perps-rail { display: none; }
  .perps-left { overflow-x: auto; }
  .perp-head, .perp-row { grid-template-columns: 150px 90px 70px 95px 90px 90px; min-width: 585px; }
  .perps-stats div { padding: 12px 14px; }
  .perps-msg { padding: 24px; }
  .perps-msg h2 { font-size: 24px; }

  .view-earn { height: auto; min-height: calc(100dvh - 108px - var(--tabbar-h)); padding: 16px 12px calc(var(--tabbar-h) + 16px); overflow: visible; }
  .earn-tabs { flex-wrap: wrap; row-gap: 8px; }
  .earn-tab { min-height: 44px; }
  .reset-note { margin-left: 0; width: 100%; }
  .earn-quad, .earn-mid { grid-template-columns: 1fr; }
  .earn-quad > *, .earn-mid > * { min-width: 0; }
  .ref-big { flex-wrap: wrap; row-gap: 2px; }
  .ref-big strong { font-size: 26px; }
  .code-edit, .code-show { min-width: 0; }
  .code-active { width: auto; flex: none; }
  .code-applied { min-width: 0; }
  .eq-card > strong { font-size: 24px; }
  .code-row { flex-wrap: wrap; row-gap: 8px; }
  .code-row .eq-lbl { width: 100%; }
  .lb-card { padding: 8px 12px 4px; }
  .gl-grid { grid-template-columns: 46px minmax(0, 1fr) 84px 92px; }
  #earn-comp .lb-card { overflow-x: hidden; }
  #earn-comp .lb-you, #earn-comp .lb-head, #earn-comp .lb-row { min-width: 0; }
  .cl-grid { grid-template-columns: 34px minmax(0, 1fr) 60px 64px 58px; column-gap: 7px; }
  .cl-grid > :nth-child(4) { display: none; } /* Volume dostępny w Global Leaderboard */
  #earn-comp .lb-row, #earn-comp .lb-you { font-size: 12.5px; }
  .cl-grid .num-slot { min-width: 0; }
  .comp-hero { padding: 20px 16px; }
  .comp-art { display: none; }
  .comp-live { position: static; margin-bottom: 12px; display: inline-flex; flex-wrap: wrap; row-gap: 2px; text-align: left; }
  .comp-live em { white-space: nowrap; }
  .comp-pool { font-size: 38px; }
  .comp-desc { font-size: 14px; }
  .comp-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; padding-right: 0; margin: 16px 0 12px; }
  .comp-stats .ml-auto { margin-left: 0; }
  .comp-stats .ta-r { text-align: left; }
  .comp-stats strong { font-size: 22px; }
  .comp-progress { margin-right: 0; }
  .seg button { min-height: 44px; }

  .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: var(--bg-deep); border-top: 1px solid var(--border-strong); padding: 5px 4px calc(5px + env(safe-area-inset-bottom)); }
  .tabbar button { background: none; border: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 46px; color: var(--text-dim); font: 600 10.5px var(--font-ui); border-radius: 10px; cursor: pointer; }
  .tabbar button.on { color: var(--accent); }
  .tabbar button:active { background: var(--accent-bg-05); }
  .tabbar svg { width: 20px; height: 20px; }
  body.kb-open .tabbar, body.kb-open .tk-trade-fab { display: none; }

  #toasts { left: 12px; right: 12px; bottom: calc(var(--tabbar-h) + 10px); }
  .toast { max-width: none; }
  dialog#qb-modal, dialog#wallet-sheet { width: 100%; max-width: 100%; margin: auto 0 0; border-radius: 18px 18px 0 0; border-left: none; border-right: none; border-bottom: none; padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
  #wallet-sheet .sheet-grab { margin-top: -8px; }
  .qb-btns button { min-height: 48px; }
  .search-pop { position: fixed; top: calc(60px + env(safe-area-inset-top)); left: 12px; right: 12px; }
}
@media (max-width: 479px) {
  .brand-name { display: none; }
}

/* ============ D11 · TOUCH TARGETS (mobile ≤899px, desktop nietknięty) ============
   Reguła: każdy element klikalny ma ≥44px wysokości hit-area.
   Elementy, które mogą urosnąć → min-height.
   Elementy, które wizualnie muszą zostać małe → hit-area przez ::after. */
@media (max-width: 899px) {
  /* --- przyciski/pigułki, które mogą urosnąć --- */
  .btn-primary, .btn-ghost, .mini-pill, .link-btn, .plat-chip, .arcus-pill,
  .error-state button, .btn-back, .tf-note-btn, .disp-pop button,
  .pcol-search-btn, button.token-pill, .pop-icons button, .qb-max,
  .ca-box button { min-height: 44px; }
  .btn-bridge { min-height: 50px; }  /* nie obniżaj istniejącego 50px */
  .pop-icons button, .qb-max, .ca-box button { min-width: 44px; }

  /* --- pola formularzy (44px zamiast 29–39px) --- */
  .filter-pop input, .psearch-pop input, .metric-field .mm input,
  #code-input, #qb-slip, .amt-box input, .qb-amt input { min-height: 44px; }
  #qb-slip { width: 56px; }
  .qb-amt { padding: 0 10px; }
  .amt-box { padding: 2px 12px; }
  .ca-box { padding: 4px 6px 4px 11px; }

  /* --- ticker: 28px → 44px (stąd 108px zamiast 92px w wysokościach widoków) --- */
  .ticker, .ticker-scroll, .ticker-track, .ticker-item { height: 44px; }

  /* --- hit-area bez zmiany wyglądu (małe ikony i zakładki) ---
     Sąsiedztwo sprawdzone: żaden z tych ::after nie nachodzi
     na inny element klikalny (wiersze .lb-row/.tx-row/.hold-row
     nie mają handlerów, reszta to padding kontenerów). */
  .lb-head button, .order-modes button, .copy-ico,
  .tk-addrrow button, .brh-det .hash { position: relative; }
  .lb-head button::after, .order-modes button::after, .copy-ico::after,
  .tk-addrrow button::after, .brh-det .hash::after {
    content: ""; position: absolute; top: 50%; height: 44px;
    transform: translateY(-50%); left: -8px; right: -8px;
  }
  .copy-ico::after { left: -16px; right: -16px; }
  .tk-addrrow { gap: 16px; }
  .tk-addrrow button::after { left: -6px; right: -6px; }

  /* --- brak poziomego scrolla @360px: jedyny rząd flex bez wrapa --- */
  .lb-titlerow { flex-wrap: wrap; row-gap: 8px; }
  .lb-titlerow .slip-chips { margin-left: auto; }
}