/* PYROBOT AI — terminal. Graphite panels, one hot accent, bot colours only where a bot speaks. */
@font-face { font-family: 'Manrope'; src: url('/fonts/manrope-latin.woff2') format('woff2'); font-weight: 200 800; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url('/fonts/manrope-latin-ext.woff2') format('woff2'); font-weight: 200 800; font-display: swap; unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'JetBrains Mono'; src: url('/fonts/jetbrains-mono-latin.woff2') format('woff2'); font-weight: 100 800; font-display: swap; }
@font-face { font-family: 'Unbounded'; src: url('/fonts/unbounded-800.woff2') format('woff2'); font-weight: 800; font-display: swap; }
@font-face { font-family: 'Unbounded'; src: url('/fonts/unbounded-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }

:root {
  --bg: #09090b; --panel: #0f0f12; --panel2: #141418; --panel3: #1a1a1f;
  --line: #1e1e24; --line2: #2a2a32; --ink: #f3f1ec; --mute: #a3a1a8; --dim: #6b6a72;
  --hot: #ff6a2b; --hot2: #ffb23f; --hotbg: rgba(255,106,43,.1); --hotline: rgba(255,106,43,.42);
  --up: #34d399; --down: #ff5468; --warn: #ffb23f;
  --scout: #5fd8bd; --risk: #e8dcc0; --whale: #4c8ae0; --momentum: #a3e635; --news: #b9a0f2; --dev: #93a1b6; --exit: #ff7a66; --pyrobot: #ff8a2a;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display: 'Unbounded', 'Manrope', sans-serif;
  --hdr: 54px; --tk: 30px; --st: 28px; --ft: 34px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font: 13px/1.45 var(--sans); -webkit-font-smoothing: antialiased; }
body { min-height: 100vh; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
input { font: inherit; color: inherit; }
img { display: block; }
.ic { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ic.hot { color: var(--hot); }
.mono { font-family: var(--mono); }
.up { color: var(--up); } .down { color: var(--down); } .warn { color: var(--warn); } .muted { color: var(--mute); } .dim { color: var(--dim); }
::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-thumb { background: #24242b; border-radius: 8px; } ::-webkit-scrollbar-track { background: transparent; }

/* ---------- header ---------- */
.top { position: sticky; top: 0; z-index: 30; height: var(--hdr); display: flex; align-items: center; gap: 14px; padding: 0 14px; background: rgba(9,9,11,.92); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 7px; flex: none; }
.brand img { width: 30px; height: 30px; filter: drop-shadow(0 2px 8px rgba(255,106,43,.45)); }
.brand b { font: 800 17px/1 var(--display); letter-spacing: .01em; }
.brand i { font: 800 17px/1 var(--display); font-style: normal; color: var(--hot); }
.brand.sm img { width: 20px; height: 20px; } .brand.sm b, .brand.sm i { font-size: 12px; }
.brand em { font: 500 10px var(--mono); color: var(--dim); font-style: normal; margin-left: 6px; }
.ca-chip { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px; border: 1px solid var(--line2); border-radius: 8px; background: var(--panel); flex: none; max-width: 470px; }
.ca-chip:hover { border-color: var(--hotline); }
.ca-k { font: 700 10px var(--mono); color: var(--hot); letter-spacing: .06em; }
.ca-v { font: 500 11px var(--mono); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: .02em; }
.ca-chip .ic { width: 13px; height: 13px; color: var(--mute); }
.nav { display: flex; align-items: center; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav a { position: relative; padding: 8px 10px; border-radius: 7px; color: var(--mute); font-weight: 600; font-size: 13px; white-space: nowrap; }
.nav a:hover { color: var(--ink); background: var(--panel2); }
.nav a.on { color: var(--hot); background: var(--hotbg); }
.nav sup { font: 700 8px var(--mono); color: var(--hot2); margin-left: 3px; letter-spacing: .05em; vertical-align: 6px; }
.search { margin-left: auto; display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px; width: 260px; border: 1px solid var(--line2); border-radius: 8px; background: var(--panel); flex: none; }
.search:focus-within { border-color: var(--hotline); }
.search input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; font-size: 12.5px; }
.search input::placeholder { color: var(--dim); }
.search .ic { color: var(--dim); }
kbd { font: 600 10px var(--mono); color: var(--dim); border: 1px solid var(--line2); border-radius: 4px; padding: 1px 5px; }
.top-r { display: flex; align-items: center; gap: 8px; flex: none; }
.icon-btn { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line2); border-radius: 8px; background: var(--panel); color: var(--mute); }
.icon-btn:hover { color: var(--ink); border-color: #3a3a44; }
.icon-btn[hidden] { display: none; }
.btn-hot { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border-radius: 8px; background: linear-gradient(180deg, #ff7a3d, #f2551a); color: #fff; font-weight: 800; font-size: 12px; letter-spacing: .06em; box-shadow: 0 0 0 1px rgba(255,140,80,.5) inset, 0 6px 22px -8px rgba(255,106,43,.8); }
.btn-hot:hover { filter: brightness(1.08); }
.btn-hot.connected { background: var(--panel2); color: var(--ink); box-shadow: 0 0 0 1px var(--line2) inset; font-family: var(--mono); font-weight: 600; letter-spacing: 0; }

/* ---------- ticker ---------- */
.ticker { position: sticky; top: var(--hdr); z-index: 29; height: var(--tk); display: flex; align-items: center; gap: 16px; padding: 0 14px; border-bottom: 1px solid var(--line); background: var(--bg); font: 500 11px var(--mono); color: var(--mute); }
.tk-row { display: flex; align-items: center; gap: 18px; min-width: 0; overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
.tk-row::-webkit-scrollbar { display: none; }
.tk { display: inline-flex; gap: 7px; align-items: center; letter-spacing: .05em; }
.tk b { color: var(--ink); font-weight: 600; letter-spacing: 0; }
.tk .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--up); }
.tk-sep { width: 1px; height: 14px; background: var(--line2); }
.tk-slogan { margin-left: auto; color: var(--hot); letter-spacing: .14em; font-weight: 700; white-space: nowrap; }

/* ---------- layout ---------- */
.grid { display: grid; grid-template-columns: 300px minmax(0, 1fr) 330px; gap: 10px; padding: 10px; height: calc(100vh - var(--hdr) - var(--tk) - var(--st) - var(--ft)); min-height: 620px; }
.col { min-width: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; scrollbar-width: thin; scrollbar-color: #24242b transparent; }
.col-l .feed-panel { flex: 1 1 auto; min-height: 380px; display: flex; flex-direction: column; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; flex: none; }
.ph { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border-bottom: 1px solid var(--line); }
.ph h3 { margin: 0; font: 700 11.5px var(--sans); letter-spacing: .08em; }
.ph .r { margin-left: auto; display: flex; align-items: center; gap: 8px; font: 500 11px var(--mono); color: var(--dim); }
.ph-ava { width: 22px; height: 22px; }
.live, .soon, .tag { margin-left: auto; font: 700 10px var(--mono); letter-spacing: .08em; padding: 3px 7px; border-radius: 5px; }
.live { color: var(--up); border: 1px solid rgba(52,211,153,.45); background: rgba(52,211,153,.08); }
.live.off { color: var(--dim); border-color: var(--line2); background: none; }
.soon { color: var(--hot2); border: 1px solid rgba(255,178,63,.4); background: rgba(255,178,63,.07); }
.tag { color: var(--dim); border: 1px solid var(--line2); }
.r .live, .r .tag { margin-left: 0; }
.pb { padding: 12px; }
.tabs { display: flex; gap: 2px; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.tabs button { padding: 6px 9px; border-radius: 6px; font: 700 10.5px var(--sans); letter-spacing: .08em; color: var(--dim); }
.tabs button b { font: 600 10px var(--mono); color: var(--dim); margin-left: 3px; }
.tabs button:hover { color: var(--ink); }
.tabs button.on { color: var(--ink); background: var(--panel3); }
.tabs button.on b { color: var(--hot); }
.seg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; margin: 8px 10px; padding: 3px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); }
.seg button { padding: 5px 0; border-radius: 5px; font: 700 10.5px var(--mono); color: var(--dim); }
.seg button.on { color: var(--hot); background: var(--hotbg); box-shadow: 0 0 0 1px var(--hotline) inset; }
.more { display: flex; justify-content: center; align-items: center; gap: 6px; padding: 9px; border-top: 1px solid var(--line); color: var(--dim); font-size: 11.5px; }
.more:hover { color: var(--hot); }
.more .ic { width: 12px; height: 12px; }
.empty { padding: 22px 14px; text-align: center; color: var(--dim); font-size: 12px; line-height: 1.6; }
.empty b { display: block; color: var(--mute); font-size: 13px; margin-bottom: 2px; }

/* ---------- live feed ---------- */
.feed { flex: 1; overflow-y: auto; min-height: 0; }
.ev { display: grid; grid-template-columns: 26px 1fr auto; gap: 2px 9px; padding: 8px 12px; border-bottom: 1px solid #15151a; cursor: pointer; }
.ev:hover { background: var(--panel2); }
.ev.new { animation: evIn .7s ease-out; }
@keyframes evIn { from { background: rgba(255,106,43,.14); } to { background: transparent; } }
.ev img { grid-row: span 2; width: 26px; height: 26px; margin-top: 1px; }
.ev .who { display: flex; gap: 6px; align-items: baseline; min-width: 0; font: 700 11px var(--mono); letter-spacing: .03em; }
.ev .who .sym { color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0; }
.ev .ago { font: 500 10.5px var(--mono); color: var(--dim); text-align: right; }
.ev .txt { grid-column: 2; font-size: 12px; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev.news .txt { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: var(--ink); }
.ev .clock { grid-column: 3; font: 500 10px var(--mono); color: #4f4e56; text-align: right; }
.ev .txt.up { color: var(--up); } .ev .txt.down { color: var(--down); } .ev .txt.warn { color: var(--warn); } .ev .txt.hot { color: var(--hot); }

/* bot colour helpers */
.c-scout { color: var(--scout); } .c-risk { color: var(--risk); } .c-whale { color: #6ea6f5; } .c-momentum { color: var(--momentum); }
.c-news { color: var(--news); } .c-dev { color: var(--dev); } .c-exit { color: var(--exit); } .c-pyrobot { color: var(--pyrobot); }

/* ---------- trending ---------- */
.tr { display: grid; grid-template-columns: 16px 28px 1fr auto 34px; align-items: center; gap: 9px; padding: 7px 12px; border-bottom: 1px solid #15151a; }
.tr:hover { background: var(--panel2); }
.tr .n { font: 600 11px var(--mono); color: var(--dim); }
.tok-img { width: 28px; height: 28px; border-radius: 50%; background: var(--panel3); object-fit: cover; display: grid; place-items: center; font: 800 10px var(--mono); color: var(--mute); overflow: hidden; flex: none; }
.tok-img.sm { width: 22px; height: 22px; font-size: 8px; }
.tok-img.lg { width: 52px; height: 52px; font-size: 15px; }
.tr .nm b { display: block; font-weight: 700; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }
.tr .nm span { font: 500 10.5px var(--mono); color: var(--dim); }
.tr .chg { font: 600 11px var(--mono); text-align: right; }
.ring { --v: 0; --c: var(--dim); width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--c) calc(var(--v) * 1%), #23232a 0); position: relative; font: 700 10.5px var(--mono); }
.ring::before { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--panel); }
.ring span { position: relative; }
.ring.lg { width: 74px; height: 74px; font-size: 22px; }
.ring.lg::before { inset: 6px; }
.ring.md { width: 40px; height: 40px; font-size: 13px; }

/* social */
.soc-row { display: block; padding: 8px 12px; border-bottom: 1px solid #15151a; }
.soc-row:hover { background: var(--panel2); }
.soc-row .t { font-size: 12px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.soc-row .m { font: 500 10.5px var(--mono); color: var(--dim); margin-top: 3px; display: flex; gap: 8px; }
.soc-row .m b { color: var(--news); font-weight: 600; }
.lk { display: flex; gap: 6px; margin-left: auto; }
.lk a { font: 700 9.5px var(--mono); padding: 2px 6px; border: 1px solid var(--line2); border-radius: 4px; color: var(--mute); }
.lk a:hover { color: var(--ink); border-color: var(--mute); }
.soc-tok { display: flex; align-items: center; gap: 9px; padding: 8px 12px; border-bottom: 1px solid #15151a; }

/* ---------- hero ---------- */
.hero { position: relative; display: grid; grid-template-columns: minmax(300px, 46%) 1fr; min-height: 318px; border-radius: 12px; border: 1px solid var(--line); overflow: hidden;
  background: radial-gradient(80% 120% at 22% 85%, rgba(255,106,43,.16), transparent 60%), radial-gradient(60% 90% at 90% 0%, rgba(255,178,63,.07), transparent 60%), linear-gradient(180deg, #111115, #0c0c0f); flex: none; }
.hero::after { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px); background-size: 28px 28px; mask-image: radial-gradient(70% 80% at 30% 60%, #000, transparent); }
.stage { position: relative; min-height: 300px; }
.stage .floor { position: absolute; left: 6%; right: 6%; bottom: 16px; height: 46px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,106,43,.28), transparent); filter: blur(4px); }
.bot { position: absolute; display: block; transform: translate(-50%, -50%); transition: filter .2s; cursor: pointer; }
.bot img { width: 100%; height: auto; filter: drop-shadow(0 14px 16px rgba(0,0,0,.55)); animation: bob var(--dur, 4.6s) ease-in-out infinite; animation-delay: var(--del, 0s); will-change: transform; }
.bot:hover img { filter: drop-shadow(0 14px 16px rgba(0,0,0,.55)) brightness(1.12); }
.bot .lbl { position: absolute; left: 50%; bottom: -4px; transform: translate(-50%, 4px); opacity: 0; transition: .18s; white-space: nowrap; font: 700 10px var(--mono); letter-spacing: .06em; padding: 3px 7px; border-radius: 5px; background: rgba(9,9,11,.85); border: 1px solid var(--line2); pointer-events: none; }
.bot:hover .lbl { opacity: 1; transform: translate(-50%, 0); }
.bot.boss img { filter: drop-shadow(0 18px 26px rgba(255,90,20,.45)); animation-name: bobBoss; }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-7px) rotate(-1.5deg); } }
@keyframes bobBoss { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-9px) scale(1.015); } }
.hero-copy { position: relative; z-index: 2; padding: 30px 30px 24px 8px; display: flex; flex-direction: column; justify-content: center; }
.hero-copy h1 { margin: 0; font: 800 clamp(28px, 3.2vw, 50px)/1 var(--display); letter-spacing: -.01em; white-space: nowrap; }
.hero-copy h1 i { font-style: normal; color: var(--hot); text-shadow: 0 0 30px rgba(255,106,43,.35); }
.hero-copy .sub { margin: 10px 0 0; font-size: 15px; color: var(--mute); font-weight: 600; }
.hero-copy blockquote { margin: 18px 0 0; font: 800 clamp(20px, 2vw, 27px)/1.12 var(--sans); color: var(--hot); letter-spacing: -.01em; }
.hero-copy blockquote span { color: var(--ink); }
.hero-copy .scan { margin-top: 12px; font: 500 11.5px var(--mono); color: var(--dim); line-height: 1.6; }
.hero-copy .scan b { color: var(--up); font-weight: 600; }
.hero-act { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.btn { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border: 1px solid var(--line2); border-radius: 8px; background: rgba(15,15,18,.8); font-weight: 700; font-size: 12px; }
.btn:hover { border-color: #3c3c46; }
.btn.hot { border-color: var(--hotline); color: var(--hot); background: var(--hotbg); }
.ca-box { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 12px; border: 1px solid var(--line2); border-radius: 8px; background: rgba(9,9,11,.7); font: 500 11px var(--mono); max-width: 100%; }
.ca-box span { color: var(--dim); letter-spacing: .08em; white-space: nowrap; }
.ca-box b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ca-box .ic { width: 13px; height: 13px; color: var(--mute); }

.guide-bar { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--hotline); border-radius: 10px; background: linear-gradient(90deg, rgba(255,106,43,.09), rgba(255,106,43,.02)); flex: none; }
.guide-bar .gi { width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; border: 1px solid var(--hotline); color: var(--hot); }
.guide-bar b { display: block; font-size: 13px; }
.guide-bar span { color: var(--mute); font-size: 12px; }
.guide-bar .btn-hot { margin-left: auto; height: 32px; font-size: 11px; }

/* ---------- bot matrix ---------- */
.matrix { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 10px; }
.agent { position: relative; display: block; padding: 12px; min-height: 112px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel2); overflow: hidden; transition: border-color .2s, transform .2s; }
.agent:hover { border-color: var(--line2); transform: translateY(-1px); }
.agent img { position: absolute; right: -6px; top: -6px; width: 66px; height: 66px; filter: drop-shadow(0 8px 10px rgba(0,0,0,.5)); transition: transform .3s; }
.agent:hover img { transform: rotate(-6deg) scale(1.06); }
.agent h4 { margin: 0; font: 800 12px var(--sans); letter-spacing: .08em; }
.agent .role { font-size: 11.5px; color: var(--dim); margin-top: 1px; max-width: calc(100% - 54px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agent h4 { max-width: calc(100% - 50px); }
.agent .st { display: flex; align-items: center; gap: 6px; margin-top: 12px; font: 600 11px var(--mono); }
.agent .st i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.agent .st.on { color: var(--up); } .agent .st.busy { color: #6ea6f5; } .agent .st.idle { color: var(--dim); } .agent .st.off { color: var(--down); }
.agent .st.busy i { animation: blink 1.2s infinite; }
@keyframes blink { 50% { opacity: .25; } }
.agent .num { margin-top: 4px; font: 700 20px var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agent .num small { font: 500 11px var(--sans); color: var(--dim); margin-left: 5px; }
.agent .sub2 { font: 500 10.5px var(--mono); color: var(--dim); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agent.boss { border-color: var(--hotline); background: linear-gradient(160deg, rgba(255,106,43,.14), var(--panel2) 60%); box-shadow: 0 0 0 1px rgba(255,106,43,.16) inset, 0 10px 30px -14px rgba(255,106,43,.6); }
.agent.boss h4 { color: var(--hot); }
.dots::after { content: ''; display: inline-block; width: 18px; text-align: left; animation: dots 1.4s steps(4) infinite; }
@keyframes dots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } }
.note { padding: 0 12px 12px; color: var(--dim); font-size: 11.5px; }

/* ---------- tables ---------- */
.tbl { width: 100%; border-collapse: collapse; }
.tbl th { text-align: left; padding: 8px 12px; font: 700 10px var(--mono); letter-spacing: .08em; color: var(--dim); border-bottom: 1px solid var(--line); white-space: nowrap; position: sticky; top: 0; background: var(--panel); z-index: 1; }
.tbl th.r, .tbl td.r { text-align: right; }
.tbl th[data-k] { cursor: pointer; } .tbl th[data-k]:hover { color: var(--ink); } .tbl th.sorted { color: var(--hot); }
.tbl td { padding: 8px 12px; border-bottom: 1px solid #16161b; font-size: 12px; vertical-align: middle; }
.tbl td.mono { font: 500 11.5px var(--mono); }
.tbl tbody tr { cursor: pointer; }
.tbl tbody tr:hover td { background: var(--panel2); }
.tcell { display: flex; align-items: center; gap: 9px; min-width: 0; }
.tcell b { font-weight: 700; white-space: nowrap; }
.tcell span { font: 500 10.5px var(--mono); color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px; }
.why { color: var(--mute); font-size: 11.5px; }
.why .pro { color: var(--up); } .why .con { color: var(--down); }
.badge { display: inline-flex; align-items: center; gap: 5px; font: 700 9.5px var(--mono); letter-spacing: .06em; padding: 3px 6px; border-radius: 4px; border: 1px solid var(--line2); color: var(--mute); white-space: nowrap; }
.badge.pick { color: var(--hot); border-color: var(--hotline); background: var(--hotbg); }
.badge.monitor { color: #6ea6f5; border-color: rgba(110,166,245,.4); }
.badge.blocked { color: var(--down); border-color: rgba(255,84,104,.4); background: rgba(255,84,104,.06); }
.badge.low { color: var(--dim); }
.badge.buy { color: var(--up); border-color: rgba(52,211,153,.45); background: rgba(52,211,153,.07); }
.badge.sell { color: var(--down); border-color: rgba(255,84,104,.45); background: rgba(255,84,104,.07); }
.badge.grad { color: var(--hot2); border-color: rgba(255,178,63,.45); }
.opp-head { padding: 12px 14px 4px; }
.opp-head b { font-size: 13px; }
.opp-head p { margin: 4px 0 0; color: var(--dim); font-size: 12px; max-width: 640px; }
.tbl-wrap { overflow-x: auto; }
.bars { display: flex; gap: 2px; align-items: flex-end; height: 18px; }
.bars i { width: 5px; border-radius: 1px; background: var(--line2); position: relative; height: 100%; overflow: hidden; }
.bars i::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--v) * 1%); background: var(--c, var(--hot)); }
.prog { height: 6px; border-radius: 6px; background: #202027; overflow: hidden; min-width: 80px; }
.prog i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--hot), var(--hot2)); }

/* ---------- market ---------- */
.mkt { display: grid; grid-template-columns: 1fr 1fr 1.25fr; }
.mkt > div { padding: 12px 14px; border-right: 1px solid var(--line); min-width: 0; }
.mkt > div:last-child { border-right: 0; }
.kpi-l { font: 700 10px var(--mono); letter-spacing: .08em; color: var(--dim); }
.kpi-v { font: 700 24px var(--mono); margin-top: 2px; }
.kpi-s { font: 500 11px var(--mono); color: var(--dim); margin-top: 2px; }
.spark { width: 100%; height: 56px; margin-top: 8px; display: block; }
.dexrow { display: grid; grid-template-columns: 1fr auto 52px; gap: 10px; align-items: center; font-size: 12px; padding: 4px 0; position: relative; }
.dexrow .bar { position: absolute; left: 0; top: 2px; bottom: 2px; background: rgba(255,106,43,.08); border-radius: 3px; z-index: 0; }
.dexrow > span { position: relative; z-index: 1; }
.dexrow .v { font: 600 11.5px var(--mono); } .dexrow .c { font: 600 11px var(--mono); text-align: right; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; flex: none; }
.heat-legend { display: flex; flex-wrap: wrap; gap: 10px; padding: 8px 12px 0; font: 600 10.5px var(--mono); color: var(--mute); }
.heat-legend span { display: inline-flex; align-items: center; gap: 5px; }
.heat-legend i { width: 7px; height: 7px; border-radius: 50%; }
.heat { position: relative; height: 300px; margin: 6px 8px 0; }
.heat svg { width: 100%; height: 100%; display: block; }
.heat .bub { cursor: pointer; transition: opacity .2s; }
.heat .bub:hover { opacity: .85; }
.heat-foot { padding: 6px 12px 10px; text-align: right; font: 500 10.5px var(--mono); color: var(--dim); }
.trades-tbl td, .trades-tbl th { padding: 7px 10px; }

/* ---------- right column ---------- */
.pill-off { display: inline-flex; align-items: center; gap: 6px; font: 700 10.5px var(--mono); letter-spacing: .06em; color: var(--hot); border: 1px solid var(--hotline); border-radius: 5px; padding: 3px 8px; background: var(--hotbg); }
.pill-off i { width: 6px; height: 6px; border-radius: 50%; background: var(--hot); }
.pb p { margin: 10px 0; font-size: 12px; line-height: 1.55; }
.fine { color: var(--dim); font-size: 11px !important; margin-bottom: 0 !important; }
.btn-wide { width: 100%; height: 42px; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 9px; font-weight: 800; font-size: 12.5px; margin-top: 8px; }
.btn-wide.hot { background: linear-gradient(180deg, #ff7a3d, #f2551a); color: #fff; box-shadow: 0 8px 26px -12px rgba(255,106,43,.9); }
.btn-wide.ghost { border: 1px solid var(--line2); color: var(--dim); letter-spacing: .08em; }
.btn-wide:disabled { cursor: not-allowed; opacity: .7; }
.pf-big { font: 800 26px var(--sans); letter-spacing: -.01em; margin: 2px 0 6px; }
.pf-l { font-size: 11.5px; color: var(--dim); }
.pf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.pf-grid div { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel2); }
.pf-grid b { display: block; font: 700 14px var(--mono); }
.pf-grid span { font-size: 10.5px; color: var(--dim); }
.pos { display: grid; grid-template-columns: 26px 1fr auto; gap: 9px; align-items: center; padding: 8px 12px; border-bottom: 1px solid #16161b; cursor: pointer; }
.pos:hover { background: var(--panel2); }
.pos .v { text-align: right; font: 600 11.5px var(--mono); }
.pos .v small { display: block; }

/* chat */
.chat-panel { display: flex; flex-direction: column; }
.chat { height: 300px; overflow-y: auto; padding: 10px 12px; display: flex; flex-direction: column; gap: 10px; }
.msg { display: grid; grid-template-columns: 26px 1fr; gap: 8px; animation: msgIn .25s ease-out; }
@keyframes msgIn { from { opacity: 0; transform: translateY(4px); } }
.msg img { width: 26px; height: 26px; }
.msg .bub { background: var(--panel2); border: 1px solid var(--line); border-radius: 4px 10px 10px 10px; padding: 8px 10px; font-size: 12px; line-height: 1.5; min-width: 0; overflow-wrap: anywhere; }
.msg .bub .who { font: 700 10.5px var(--mono); letter-spacing: .05em; margin-bottom: 2px; }
.msg .bub a { color: var(--hot); }
.msg .bub ul { margin: 4px 0 0; padding-left: 16px; }
.msg .bub li { margin: 2px 0; }
.msg.me { grid-template-columns: 1fr; justify-items: end; }
.msg.me .bub { background: var(--hotbg); border-color: var(--hotline); border-radius: 10px 4px 10px 10px; max-width: 85%; }
.typing .bub { color: var(--dim); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 8px; }
.chips button { font: 600 10.5px var(--mono); padding: 4px 8px; border: 1px solid var(--line2); border-radius: 14px; color: var(--mute); }
.chips button:hover { border-color: var(--hotline); color: var(--hot); }
.chat-in { display: flex; gap: 6px; padding: 10px 12px; border-top: 1px solid var(--line); }
.chat-in input { flex: 1; min-width: 0; height: 36px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--line2); background: var(--bg); outline: 0; font-size: 12.5px; }
.chat-in input:focus { border-color: var(--hotline); }
.chat-in button { width: 36px; height: 36px; border-radius: 8px; display: grid; place-items: center; background: var(--hot); color: #fff; }

/* ---------- status + footer ---------- */
.status { height: var(--st); display: flex; align-items: center; gap: 16px; padding: 0 14px; border-top: 1px solid var(--line); font: 600 10.5px var(--mono); letter-spacing: .06em; color: var(--dim); overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
.status::-webkit-scrollbar { display: none; }
.status span { display: inline-flex; align-items: center; gap: 6px; }
.status i { width: 6px; height: 6px; border-radius: 50%; background: var(--up); }
.status .off i { background: var(--down); } .status .off em { color: var(--down); }
.status em { font-style: normal; color: var(--up); }
.status .neutral i { background: var(--dim); } .status .neutral em { color: var(--mute); }
.status .r { margin-left: auto; }
.foot { height: var(--ft); display: flex; align-items: center; gap: 18px; padding: 0 14px; border-top: 1px solid var(--line); font-size: 11.5px; color: var(--dim); }
.foot nav { display: flex; gap: 14px; }
.foot nav a:hover { color: var(--ink); }
.dot-on { display: inline-flex; align-items: center; gap: 6px; } .dot-on::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--hot); }
.foot .disc { color: #55545c; font-size: 11px; }
.foot-r { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.foot-r .icon-btn { width: 26px; height: 26px; border-radius: 6px; } .foot-r .icon-btn .ic { width: 13px; height: 13px; }
.ca-mini { font: 500 10.5px var(--mono); color: var(--mute); border: 1px solid var(--line2); border-radius: 6px; padding: 4px 8px; }
.ca-mini:hover { color: var(--ink); }
.toast { position: fixed; left: 50%; bottom: 80px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; z-index: 99; padding: 10px 16px; border-radius: 9px; background: #1c1c22; border: 1px solid var(--line2); font-weight: 600; font-size: 12.5px; transition: .25s; box-shadow: 0 14px 40px rgba(0,0,0,.5); }
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- pages ---------- */
.page-h { display: flex; align-items: flex-end; gap: 14px; padding: 6px 4px 2px; flex: none; }
.page-h h2 { margin: 0; font: 800 26px/1.05 var(--display); }
.page-h h2 i { font-style: normal; color: var(--hot); }
.page-h p { margin: 6px 0 0; color: var(--mute); max-width: 680px; }
.page-h .r { margin-left: auto; }
.filters { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.filters button { font: 700 10.5px var(--mono); letter-spacing: .06em; padding: 6px 10px; border-radius: 7px; border: 1px solid var(--line2); color: var(--mute); }
.filters button.on { color: var(--hot); border-color: var(--hotline); background: var(--hotbg); }
.filters button b { color: var(--dim); margin-left: 4px; font-weight: 600; }

/* team page */
.team-sel { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; flex: none; }
.team-sel a { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); transition: .2s; }
.team-sel a img { width: 100%; max-width: 76px; filter: drop-shadow(0 8px 10px rgba(0,0,0,.5)); transition: transform .25s; }
.team-sel a span { font: 700 10px var(--mono); letter-spacing: .05em; color: var(--dim); white-space: nowrap; }
.team-sel a:hover img { transform: translateY(-3px); }
.team-sel a.on { border-color: var(--bc, var(--hot)); background: linear-gradient(180deg, color-mix(in srgb, var(--bc, var(--hot)) 14%, transparent), var(--panel)); }
.team-sel a.on span { color: var(--ink); }
.bot-card { display: grid; grid-template-columns: minmax(260px, 42%) 1fr; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--panel); flex: none; }
.bot-stage { position: relative; display: grid; place-items: center; min-height: 380px; background: radial-gradient(60% 60% at 50% 55%, color-mix(in srgb, var(--bc) 26%, transparent), transparent 70%), linear-gradient(180deg, #121216, #0c0c0f); }
.bot-stage img { width: min(84%, 340px); filter: drop-shadow(0 26px 30px rgba(0,0,0,.55)); animation: bob 5s ease-in-out infinite; }
.bot-stage .shadow { position: absolute; bottom: 30px; width: 46%; height: 26px; border-radius: 50%; background: rgba(0,0,0,.55); filter: blur(8px); }
.bot-info { padding: 24px 26px; min-width: 0; }
.bot-info .k { font: 700 10.5px var(--mono); letter-spacing: .12em; color: var(--bc); }
.bot-info h3 { margin: 6px 0 4px; font: 800 30px/1 var(--display); }
.bot-info .tagline { color: var(--mute); font-size: 14px; font-weight: 600; }
.bot-info dl { display: grid; grid-template-columns: 120px 1fr; gap: 10px 14px; margin: 18px 0 0; font-size: 12.5px; }
.bot-info dt { font: 700 10px var(--mono); letter-spacing: .08em; color: var(--dim); padding-top: 2px; }
.bot-info dd { margin: 0; color: var(--ink); line-height: 1.55; }
.bot-info .stat { display: flex; gap: 22px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.bot-info .stat b { display: block; font: 700 24px var(--mono); }
.bot-info .stat span { font-size: 11px; color: var(--dim); }

/* token page */
.tok-h { display: flex; align-items: center; gap: 14px; padding: 16px; flex-wrap: wrap; }
.tok-h h2 { margin: 0; font: 800 24px var(--sans); }
.tok-h .nm { color: var(--dim); font-size: 12.5px; }
.tok-h .acts { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.stats { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.stats div { padding: 10px 14px; border-right: 1px solid var(--line); min-width: 0; }
.stats div:last-child { border-right: 0; }
.stats > div > b { display: block; font: 700 14px var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stats > div > span { font: 700 9.5px var(--mono); letter-spacing: .08em; color: var(--dim); }
.chart-box { height: 330px; position: relative; }
.chart-box canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.chart-msg { position: absolute; inset: 0; display: grid; place-items: center; color: var(--dim); font-size: 12px; }
.verdicts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 10px; }
.vd { border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px; background: var(--panel2); min-width: 0; }
.vd .vh { display: flex; align-items: center; gap: 8px; }
.vd .vh img { width: 30px; height: 30px; }
.vd .vh b { font: 800 11px var(--sans); letter-spacing: .08em; }
.vd .vh .sc { margin-left: auto; font: 700 13px var(--mono); }
.vd p { margin: 8px 0 0; font-size: 12px; color: var(--mute); line-height: 1.5; }
.vd.boss { border-color: var(--hotline); background: linear-gradient(160deg, rgba(255,106,43,.12), var(--panel2) 70%); }

/* guide */
.prose { padding: 18px 20px; font-size: 13.5px; line-height: 1.7; color: var(--mute); }
.prose h3 { color: var(--ink); font: 800 15px var(--sans); margin: 18px 0 6px; }
.prose h3:first-child { margin-top: 0; }
.prose b, .prose strong { color: var(--ink); }
.prose code { font: 500 12px var(--mono); background: var(--panel3); padding: 1px 5px; border-radius: 4px; color: var(--ink); }
.flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 14px; }
.flow .st { position: relative; border: 1px solid var(--line); border-radius: 10px; padding: 12px; background: var(--panel2); }
.flow .st img { width: 54px; height: 54px; margin-bottom: 6px; }
.flow .st b { display: block; font-size: 13px; color: var(--ink); }
.flow .st span { font-size: 12px; color: var(--dim); }
.flow .st .n { position: absolute; right: 10px; top: 10px; font: 700 11px var(--mono); color: var(--dim); }
.weights td:first-child { width: 36%; }

/* auto trade forms */
.afg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.af { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.af > span:first-child { font: 700 10.5px var(--mono); letter-spacing: .08em; color: var(--dim); text-transform: uppercase; }
.af .in { display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 12px; border: 1px solid var(--line2); border-radius: 8px; background: var(--bg); }
.af .in:focus-within { border-color: var(--hotline); }
.af input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; font: 600 15px var(--mono); color: var(--ink); }
.af b { font: 700 11px var(--mono); color: var(--dim); }
.af small { color: var(--dim); font-size: 11px; line-height: 1.4; }
.afi { display: flex; gap: 8px; align-items: flex-end; } .afi .af { flex: 1; } .afi .btn { height: 42px; margin-bottom: 22px; }
button:disabled { opacity: .55; cursor: not-allowed; }

/* ---------- responsive ---------- */
@media (max-width: 1500px) { .search { width: 200px; } .ca-chip { max-width: 300px; } }
@media (max-width: 1360px) {
  .search { display: none; }
  .grid { grid-template-columns: 280px minmax(0, 1fr) 300px; }
  .matrix { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .verdicts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1180px) {
  .grid { grid-template-columns: 280px minmax(0, 1fr); height: auto; min-height: 0; }
  .col { overflow: visible; }
  .col-r { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .col-l .feed-panel { max-height: 760px; }
  .tk-slogan { display: none; }
  .ca-chip .ca-v { max-width: 160px; }
}
@media (max-width: 860px) {
  :root { --hdr: 52px; }
  .top { position: relative; gap: 8px; padding: 0 12px; flex-wrap: wrap; height: auto; min-height: var(--hdr); padding-top: 8px; padding-bottom: 8px; }
  .brand b, .brand i { font-size: 15px; }
  .nav { order: 5; width: 100%; }
  .ca-chip { order: 4; width: 100%; max-width: none; justify-content: space-between; }
  .ca-chip .ca-v { max-width: none; font-size: 10px; flex: 1; text-align: left; }
  .top-r { margin-left: auto; }
  .btn-hot span { display: none; } .btn-hot { padding: 0 10px; }
  .btn-hot.connected span { display: inline; }
  .ticker { position: static; }
  .grid { display: flex; flex-direction: column; padding: 8px; height: auto; }
  .col { display: contents; }
  .col-c > * { order: 1; }
  .col-l > * { order: 2; }
  .col-r > * { order: 3; }
  .col-l .feed-panel { max-height: 520px; min-height: 0; }
  .hero { grid-template-columns: 1fr; }
  .stage { min-height: 236px; order: -1; margin-top: 6px; }
  .hero-copy { padding: 4px 18px 22px; }
  .matrix { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 8px; }
  .agent img { width: 58px; height: 58px; }
  .mkt { grid-template-columns: 1fr; }
  .mkt > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .row2 { grid-template-columns: 1fr; }
  .guide-bar { flex-wrap: wrap; }
  .guide-bar .btn-hot { margin-left: 0; width: 100%; justify-content: center; }
  .team-sel { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bot-card { grid-template-columns: 1fr; }
  .bot-stage { min-height: 260px; }
  .bot-info dl { grid-template-columns: 1fr; gap: 2px 0; } .bot-info dd { margin-bottom: 8px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats div { border-bottom: 1px solid var(--line); }
  .verdicts, .flow { grid-template-columns: 1fr; }
  .afg { grid-template-columns: 1fr 1fr; } .afi { flex-direction: column; align-items: stretch; } .afi .btn { margin-bottom: 0; }
  .af input { font-size: 16px; }
  .hide-m { display: none; }
  .foot { flex-wrap: wrap; height: auto; padding: 10px 12px; gap: 10px; }
  .foot nav { flex-wrap: wrap; gap: 10px; }
  .page-h { flex-wrap: wrap; } .page-h h2 { font-size: 21px; }
}
@media (max-width: 860px) {
  body { padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
  .nav a { padding: 12px 12px; font-size: 14px; }
  .tabs button, .seg button, .filters button { min-height: 40px; font-size: 11.5px; }
  .ev .txt, .soc-row .t, .tbl td, .pb p, .agent .role, .hero-copy .scan, .opp-head p, .why { font-size: 14px; }
  .ev .who, .ev .ago { font-size: 12px; }
  .chat-in input, .search input { font-size: 16px; }
  .chat-in input { height: 44px; } .chat-in button { width: 44px; height: 44px; }
  .icon-btn, .btn-hot { height: 44px; min-width: 44px; }
  .top .brand { min-height: 44px; }
  .ca-chip { height: 44px; }
  .btn, .ca-box { height: 44px; }
  .chips button { min-height: 36px; font-size: 12px; }
  .foot .disc { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }