/* ============================================================
Edge · v2 chat-first terminal · Fogo orange single-accent
Inter (body) · Space Grotesk (display) · JetBrains Mono (code)
============================================================ */
* { box-sizing: border-box }
:root {
/* layers */
--bg-0: #0a0a0d;
--bg-1: #0f0f14;
--bg-2: #14141a;
--bg-3: #1c1c24;
--bg-4: #26262f;
/* text */
--txt-1: #f4f4f6;
--txt-2: #a8a8b3;
--txt-3: #6e6e7a;
/* lines */
--line-1: rgba(255,255,255,.06);
--line-2: rgba(255,255,255,.12);
/* accent · Fogo orange (primary) */
--accent: #8B7CF6;
--accent-2: #A78BFA;
--accent-soft: rgba(139,124,246,.10);
--accent-glow: 0 0 28px rgba(139,124,246,.18);
/* base blue (secondary · for "on Base" chain affordances) */
--base: #0052FF;
--base-2: #2c6fff;
--base-soft: rgba(0,82,255,.10);
--base-glow: 0 0 28px rgba(0,82,255,.20);
/* semantic */
--pos: #4ade80;
--neg: #fb7185;
--warn: #fbbf24;
/* type */
--inter: 'Inter', system-ui, -apple-system, sans-serif;
--space: 'Space Grotesk', var(--inter);
--mono: 'JetBrains Mono', ui-monospace, monospace;
/* radii */
--r-sm: 8px;
--r: 10px;
--r-md: 14px;
--r-lg: 18px;
/* shadow */
--shadow-1: 0 1px 2px rgba(0,0,0,.4);
--shadow-2: 0 8px 26px rgba(0,0,0,.55);
--shadow-hover: 0 10px 32px rgba(0,0,0,.65);
/* layout */
--top-h: 56px;
--composer-h: 96px; /* 96 base + 26 quicktip ticker · ticker can be dismissed via .qt-hidden */
--drawer-w: 360px;
}
html, body { height: 100% }
body {
margin: 0; padding: 0;
font: 14px/1.55 var(--inter);
color: var(--txt-1);
background: var(--bg-0);
-webkit-font-smoothing: antialiased;
overflow: hidden; /* the chat surface scrolls, not the body */
}
[hidden] { display: none !important }
a { color: var(--accent); text-decoration: none }
a:hover { text-decoration: underline }
.mono { font-family: var(--mono) }
.dim { color: var(--txt-2) }
.tiny { font-size: 11px }
.small { font-size: 12.5px }
button { font: inherit; cursor: pointer; color: inherit }
#particles {
position: fixed; inset: 0; z-index: 0;
pointer-events: none; opacity: .45;
}
/* ----- TOP BAR --------------------------------------------------- */
.topbar {
position: fixed; top: 0; left: 0; right: 0; height: var(--top-h);
z-index: 30;
display: flex; align-items: center; justify-content: space-between;
padding: 0 16px;
background: linear-gradient(180deg, rgba(10,10,13,.92), rgba(10,10,13,.78));
border-bottom: 1px solid var(--line-1);
backdrop-filter: blur(12px);
}
/* Thin two-tone accent line under the topbar · ties the two brand colors together */
.topbar::after {
content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
background: linear-gradient(90deg,
transparent 0%,
rgba(0,82,255,.45) 20%,
rgba(139,124,246,.55) 50%,
rgba(0,82,255,.45) 80%,
transparent 100%);
pointer-events: none;
}
.brand {
display: flex; align-items: center; gap: 10px;
color: var(--txt-1); text-decoration: none;
}
.brand-glyph {
position: relative;
width: 28px; height: 28px; border-radius: 8px;
background: linear-gradient(135deg, var(--accent-2), var(--accent));
display: grid; place-items: center;
font: 800 16px/1 var(--space); color: #0a0a0d;
box-shadow: 0 4px 12px rgba(139,124,246,.32);
}
.brand-glyph::after {
content: ''; position: absolute; right: -2px; bottom: -2px;
width: 8px; height: 8px; border-radius: 50%;
background: var(--base);
border: 2px solid var(--bg-0);
}
.brand-name { font: 700 16px/1 var(--space); letter-spacing: .01em }
.brand-sub { font-size: 11px; color: var(--txt-3); letter-spacing: .14em; text-transform: uppercase }
@media (max-width: 520px) { .brand-sub { display: none } }
.built-on-base {
display: inline-flex; align-items: center; gap: 5px;
padding: 3px 9px 3px 5px;
background: var(--base-soft);
border: 1px solid rgba(0,82,255,.30);
border-radius: 999px;
color: var(--base-2);
font: 600 10.5px/1 var(--inter);
letter-spacing: .04em;
text-transform: uppercase;
}
.built-on-base svg { width: 14px; height: 14px; display: block }
@media (max-width: 720px) {
.built-on-base span { display: none }
.built-on-base { padding: 3px }
}
.topbar-right { display: flex; align-items: center; gap: 8px }
.iconbtn {
position: relative;
width: 36px; height: 36px; padding: 0;
background: transparent; color: var(--txt-2);
border: 1px solid transparent; border-radius: 10px;
display: inline-flex; align-items: center; justify-content: center;
transition: all .15s ease;
}
.iconbtn:hover { background: var(--bg-2); color: var(--txt-1); border-color: var(--line-2) }
.iconbtn svg { width: 18px; height: 18px }
.iconbtn-dot {
position: absolute; top: 7px; right: 7px;
width: 8px; height: 8px; border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 0 2px var(--bg-0);
}
.wallet-pill {
display: inline-flex; align-items: center; gap: 8px;
padding: 7px 13px;
background: var(--bg-2); color: var(--txt-1);
border: 1px solid var(--line-2); border-radius: 999px;
font: 600 12.5px/1 var(--inter); letter-spacing: .02em;
transition: all .15s ease;
}
.wallet-pill:hover { border-color: var(--accent); color: var(--accent) }
.wallet-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--txt-3) }
.wallet-pill.is-free .dot { background: #52525b }
.wallet-pill.is-bronze .dot { background: #a78bfa }
.wallet-pill.is-silver .dot { background: #cbd5e1 }
.wallet-pill.is-gold .dot { background: #fbbf24 }
.wallet-pill.is-platinum .dot { background: var(--accent) }
.wallet-pill.is-platinum { color: var(--accent); border-color: rgba(139,124,246,.4) }
/* When logged in, show a tiny Base square next to the tier dot */
.wallet-pill[data-network="base"]::before {
content: '';
width: 8px; height: 8px;
background: var(--base);
border-radius: 2px;
display: inline-block;
box-shadow: 0 0 0 1px rgba(0,82,255,.5);
}
/* ----- CHAT SURFACE --------------------------------------------- */
.chat-surface {
position: fixed; top: var(--top-h); left: 0; right: 0; bottom: var(--composer-h);
overflow-y: auto;
z-index: 10;
padding: 24px 16px 8px;
scroll-behavior: smooth;
}
.chat-surface::-webkit-scrollbar { width: 8px }
.chat-surface::-webkit-scrollbar-thumb { background: var(--bg-3); border-radius: 4px }
.chat-surface::-webkit-scrollbar-track { background: transparent }
.chat-thread {
max-width: 760px; margin: 0 auto;
display: flex; flex-direction: column; gap: 18px;
padding-bottom: 18px;
}
/* welcome state */
.welcome {
text-align: center;
padding: 8vh 20px 24px;
animation: welcomeIn .5s cubic-bezier(.16,1,.3,1);
}
@keyframes welcomeIn { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: translateY(0) } }
.welcome .hero-glyph {
position: relative;
width: 72px; height: 72px; margin: 0 auto 18px;
border-radius: 20px;
background: linear-gradient(135deg, var(--accent-2), var(--accent));
display: grid; place-items: center;
font: 800 36px/1 var(--space); color: #0a0a0d;
box-shadow: 0 16px 40px rgba(139,124,246,.28), 0 0 0 1px rgba(139,124,246,.30);
animation: glyphPulse 3.4s ease-in-out infinite;
}
.welcome .hero-glyph > span:first-child { display: block }
.hero-base-dot {
position: absolute; right: -4px; bottom: -4px;
width: 22px; height: 22px;
border-radius: 50%;
background: var(--base);
border: 3px solid var(--bg-0);
box-shadow: 0 4px 14px rgba(0,82,255,.45);
animation: baseDotPulse 2.6s ease-in-out infinite;
}
.hero-base-dot::after {
content: ''; position: absolute; inset: 2px;
border-radius: 50%;
background: #fff;
clip-path: polygon(50% 0, 100% 50%, 50% 50%, 100% 100%, 0 100%, 0 0);
opacity: .12;
}
@keyframes baseDotPulse {
0%, 100% { box-shadow: 0 4px 14px rgba(0,82,255,.45) }
50% { box-shadow: 0 4px 18px rgba(0,82,255,.7), 0 0 0 4px rgba(0,82,255,.18) }
}
@keyframes glyphPulse {
0%, 100% { box-shadow: 0 16px 40px rgba(139,124,246,.28), 0 0 0 1px rgba(139,124,246,.30) }
50% { box-shadow: 0 20px 56px rgba(139,124,246,.42), 0 0 0 1px rgba(139,124,246,.42) }
}
/* Active-deliverables banner on the welcome screen */
.active-row {
display: flex; justify-content: space-between; align-items: center; gap: 10px;
width: 100%; max-width: 620px; margin: 6px auto;
padding: 10px 14px; cursor: pointer; text-align: left;
background: linear-gradient(90deg, rgba(139,124,246,.10), rgba(0,82,255,.06));
border: 1px solid rgba(139,124,246,.30); border-radius: 12px;
transition: all .18s ease;
}
.active-row:hover { transform: translateY(-1px); border-color: var(--accent); box-shadow: 0 8px 20px rgba(0,0,0,.4) }
.active-row.urgent { border-color: rgba(251,113,133,.45); background: linear-gradient(90deg, rgba(251,113,133,.10), rgba(251,191,36,.05)) }
.active-row .ar-l { display: flex; flex-direction: column; gap: 2px; min-width: 0 }
.active-row .ar-tag { font: 700 12px/1 var(--inter); color: var(--accent); letter-spacing: .04em }
.active-row.urgent .ar-tag { color: var(--neg) }
.active-row .ar-meta { font-size: 12px; color: var(--txt-2) }
.active-row .ar-r { font: 600 13px/1 var(--mono); color: var(--txt-1); white-space: nowrap }
.active-row.urgent .ar-r { color: var(--neg) }
.welcome-tagline {
display: inline-flex; align-items: center; gap: 8px;
margin: 0 auto 22px;
padding: 6px 12px;
background: linear-gradient(90deg, rgba(0,82,255,.06), rgba(139,124,246,.06));
border: 1px solid var(--line-1); border-radius: 999px;
font-size: 12px; color: var(--txt-2); font-weight: 500;
}
.welcome-tagline .dot-sep { color: var(--txt-3) }
.welcome-tagline b { font-weight: 700 }
.welcome h1 {
font: 700 28px/1.2 var(--space);
margin: 0 0 8px;
background: linear-gradient(180deg, #fff 60%, #a8a8b3);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
}
.welcome p.lead { color: var(--txt-2); font-size: 14.5px; max-width: 540px; margin: 0 auto 28px }
.welcome p.lead b { color: var(--accent); font-weight: 600 }
.suggest-grid {
display: grid; gap: 10px;
grid-template-columns: 1fr;
max-width: 620px; margin: 0 auto 12px;
}
@media (min-width: 640px) { .suggest-grid { grid-template-columns: repeat(2, 1fr) } }
.suggest {
text-align: left;
padding: 14px 16px;
background: linear-gradient(180deg, var(--bg-1), var(--bg-2));
border: 1px solid var(--line-1); border-radius: var(--r-md);
transition: all .18s ease;
position: relative; overflow: hidden;
}
.suggest:hover {
border-color: var(--accent);
transform: translateY(-2px);
box-shadow: 0 12px 32px rgba(0,0,0,.5);
}
.suggest::before {
content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
background: var(--accent); opacity: 0; transition: opacity .18s ease;
}
.suggest:hover::before { opacity: 1 }
.suggest.base::before { background: var(--base) }
.suggest.base:hover { border-color: var(--base) }
.suggest.base .s-cmd { color: var(--base-2) }
.suggest .s-cmd {
font: 600 11px/1 var(--mono); color: var(--accent);
letter-spacing: .04em;
}
.suggest .s-title { font-weight: 600; color: var(--txt-1); margin-top: 5px; font-size: 13.5px }
.suggest .s-sub { color: var(--txt-2); font-size: 12px; margin-top: 3px; line-height: 1.45 }
/* ----- MESSAGES ------------------------------------------------- */
.msg { display: flex; gap: 12px; align-items: flex-start; animation: msgIn .26s cubic-bezier(.16,1,.3,1) }
@keyframes msgIn { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: translateY(0) } }
.msg.msg-user { justify-content: flex-end }
.msg-avatar {
flex: 0 0 32px;
width: 32px; height: 32px; border-radius: 10px;
background: linear-gradient(135deg, var(--accent-2), var(--accent));
display: grid; place-items: center;
font: 800 14px/1 var(--space); color: #0a0a0d;
}
.msg-user .msg-avatar { display: none }
.msg-bubble {
max-width: 78%;
padding: 10px 14px;
border-radius: 14px;
font-size: 14px; line-height: 1.55;
word-wrap: break-word; overflow-wrap: anywhere;
}
.msg-agent .msg-bubble {
background: var(--bg-2);
border: 1px solid var(--line-1);
border-top-left-radius: 4px;
color: var(--txt-1);
}
.msg-user .msg-bubble {
background: linear-gradient(180deg, rgba(139,124,246,.16), rgba(139,124,246,.10));
border: 1px solid rgba(139,124,246,.30);
border-top-right-radius: 4px;
color: var(--txt-1);
}
.msg-bubble p { margin: 0 0 8px }
.msg-bubble p:last-child { margin-bottom: 0 }
.msg-bubble code { font: 500 12.5px/1 var(--mono); background: var(--bg-3); padding: 2px 6px; border-radius: 5px; border: 1px solid var(--line-1) }
.msg-bubble pre { background: var(--bg-3); border: 1px solid var(--line-1); border-radius: 8px; padding: 10px 12px; overflow-x: auto; font: 500 12.5px/1.5 var(--mono); margin: 6px 0 }
.msg-bubble ul, .msg-bubble ol { margin: 6px 0 6px 22px; padding: 0 }
.msg-bubble li { margin-bottom: 3px }
.msg-bubble a { color: var(--accent) }
.msg-bubble strong { color: var(--txt-1); font-weight: 700 }
.msg-bubble em { color: var(--txt-2) }
.msg-actions {
margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px;
}
.action-chip {
display: inline-flex; align-items: center; gap: 6px;
padding: 5px 10px;
background: var(--bg-3); color: var(--txt-1);
border: 1px solid var(--line-2); border-radius: 999px;
font: 600 11.5px/1 var(--inter); cursor: pointer;
transition: all .15s ease;
}
.action-chip:hover { border-color: var(--base); color: var(--base-2); background: rgba(0,82,255,.08) }
.action-chip.is-primary { background: var(--accent-soft); color: var(--accent); border-color: rgba(139,124,246,.30) }
.msg-followups {
margin-top: 12px; padding-top: 10px;
display: flex; flex-wrap: wrap; gap: 6px;
border-top: 1px dashed var(--line-1);
}
.followup-chip {
display: inline-flex; align-items: center; gap: 4px;
padding: 5px 11px;
background: rgba(0,82,255,.08); color: var(--base-2);
border: 1px solid rgba(0,82,255,.25); border-radius: 999px;
font: 600 11.5px/1 var(--inter); cursor: pointer;
transition: all .15s ease;
}
.followup-chip:hover { background: rgba(0,82,255,.15); border-color: var(--base) }
.result-card {
margin-top: 10px;
background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
border: 1px solid var(--line-1);
border-radius: 14px;
overflow: hidden;
box-shadow: 0 8px 28px rgba(0,0,0,.28);
}
.result-card .rc-head {
padding: 11px 14px;
background: linear-gradient(90deg, rgba(0,82,255,.05) 0%, transparent 38%, transparent 62%, rgba(139,124,246,.05) 100%);
border-bottom: 1px solid var(--line-1);
display: flex; align-items: center; justify-content: space-between;
}
.result-card .rc-title { font: 600 12px/1 var(--space); letter-spacing: .06em; text-transform: uppercase; color: var(--txt-2) }
.result-card .rc-meta { font-size: 11px; color: var(--base-2); font-weight: 600; letter-spacing: .03em }
.result-card .rc-body { padding: 12px 14px }
.result-card .rc-row {
display: flex; justify-content: space-between; gap: 12px;
padding: 8px 0;
border-top: 1px dashed var(--line-1);
font-size: 13px;
}
.result-card .rc-row:first-child { border-top: 0 }
.result-card .rc-k { color: var(--txt-2) }
.result-card .rc-v { color: var(--txt-1); font-weight: 600; text-align: right }
.result-card .rc-empty { padding: 18px; text-align: center; color: var(--txt-3); font-size: 13px }
/* ── Premium per-bot row (used by /build list) ─────────────────────────── */
.result-card .bb-row-name {
display: flex; align-items: center; gap: 8px;
font: 600 14px/1.3 'Inter', sans-serif;
color: var(--txt-1, #f4f4f6);
margin-bottom: 6px;
flex-wrap: wrap;
justify-content: flex-end;
}
.result-card .bb-row-pill {
display: inline-flex; align-items: center; gap: 4px;
padding: 2px 9px;
background: color-mix(in srgb, var(--pill, #9aa3b2) 12%, transparent);
border: 1px solid color-mix(in srgb, var(--pill, #9aa3b2) 45%, transparent);
color: var(--pill, #9aa3b2);
font: 600 10.5px/1.3 'Inter', sans-serif;
border-radius: 10px;
letter-spacing: .02em;
white-space: nowrap;
}
.result-card .bb-row-links {
display: flex; gap: 10px; flex-wrap: wrap;
margin-bottom: 8px;
justify-content: flex-end;
}
.result-card .bb-row-lnk {
font: 500 12px/1.4 'Inter', sans-serif;
color: var(--base-2, #60a5fa);
text-decoration: none;
padding: 2px 0;
}
.result-card .bb-row-lnk:hover { text-decoration: underline; }
.result-card .bb-row-chips {
display: flex; gap: 6px; flex-wrap: wrap;
justify-content: flex-end;
}
.result-card .bb-row-chip {
display: inline-flex; align-items: center; gap: 4px;
padding: 5px 10px;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.10);
color: var(--txt-2, #9aa3b2);
font: 600 11.5px/1 'Inter', sans-serif;
border-radius: 8px;
cursor: pointer;
text-decoration: none;
transition: background .12s, color .12s, border-color .12s, transform .08s;
}
.result-card .bb-row-chip:hover {
background: rgba(255,122,24,.10);
border-color: rgba(255,122,24,.35);
color: #ffb685;
transform: translateY(-1px);
}
.result-card .bb-row-chip.is-go {
background: rgba(74,222,128,.10);
border-color: rgba(74,222,128,.40);
color: #4ade80;
}
.result-card .bb-row-chip.is-go:hover {
background: rgba(74,222,128,.18);
color: #86efac;
}
.result-card .bb-row-chip.is-danger:hover {
background: rgba(248,113,113,.12);
border-color: rgba(248,113,113,.45);
color: #fca5a5;
}
/* ── /build templates picker (renders inside kv card) ─────────────────── */
.result-card .bb-tpl-name {
font: 700 14.5px/1.3 'Inter', sans-serif;
color: var(--txt-1, #f4f4f6);
margin-bottom: 4px;
}
.result-card .bb-tpl-sub {
font: 500 12.5px/1.5 'Inter', sans-serif;
color: var(--txt-2, #9aa3b2);
margin-bottom: 8px;
}
.result-card .bb-tpl-meta {
display: flex; gap: 6px; flex-wrap: wrap;
margin-bottom: 10px;
}
.result-card .bb-tpl-chip {
display: inline-flex; align-items: center;
padding: 2px 8px;
background: rgba(255,255,255,.05);
border: 1px solid rgba(255,255,255,.08);
color: var(--txt-2, #9aa3b2);
font: 600 10.5px/1.3 'JetBrains Mono', monospace;
border-radius: 8px;
}
.result-card .bb-tpl-go {
display: flex; justify-content: flex-end;
}
/* ── Premium /build list (my_bots card kind) ───────────────────────────── */
.result-card.rc-my-bots .rc-head .mb-count {
display: inline-flex; align-items: center; justify-content: center;
min-width: 22px; height: 18px; padding: 0 6px;
background: rgba(255,122,24,.15); color: #ffb685;
border-radius: 10px; font: 700 10.5px/1 'Inter', sans-serif;
margin-left: 6px; letter-spacing: .03em;
}
.result-card.rc-my-bots .mb-body {
padding: 12px 14px; display: grid; gap: 10px;
}
.result-card.rc-my-bots .mb-row {
position: relative;
padding: 14px 14px 12px;
background: rgba(255,255,255,.02);
border: 1px solid rgba(255,255,255,.06);
border-radius: 14px;
transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.result-card.rc-my-bots .mb-row:hover {
transform: translateY(-1px);
border-color: rgba(255,122,24,.25);
background: rgba(255,255,255,.035);
}
.result-card.rc-my-bots .mb-row[data-status="deployed"] {
border-color: rgba(74,222,128,.18);
}
.result-card.rc-my-bots .mb-row[data-status="deploy_failed"] {
border-color: rgba(248,113,113,.28);
background: rgba(248,113,113,.04);
}
.result-card.rc-my-bots .mb-row-head {
display: flex; align-items: center; gap: 12px;
}
.result-card.rc-my-bots .mb-avatar {
flex: 0 0 auto;
width: 44px; height: 44px; border-radius: 12px;
display: flex; align-items: center; justify-content: center;
font: 800 14px/1 'Inter', sans-serif; color: #fff;
letter-spacing: -.02em;
box-shadow: 0 4px 12px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.18);
text-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.result-card.rc-my-bots .mb-avatar.mb-avatar-img {
object-fit: cover;
background: rgba(255,255,255,.05);
text-shadow: none;
}
.result-card.rc-my-bots .mb-stats {
display: flex; gap: 6px; flex-wrap: wrap;
margin-top: 10px;
}
.result-card.rc-my-bots .mb-stat {
display: inline-flex; align-items: center; gap: 4px;
padding: 4px 10px;
background: rgba(74,222,128,.06);
border: 1px solid rgba(74,222,128,.18);
color: var(--txt-2, #9aa3b2);
font: 500 11px/1.3 'Inter', sans-serif;
border-radius: 999px;
}
.result-card.rc-my-bots .mb-stat b {
color: #4ade80;
font-weight: 700;
margin-right: 1px;
}
.result-card.rc-my-bots .mb-stat-err {
background: rgba(248,113,113,.08);
border-color: rgba(248,113,113,.25);
}
.result-card.rc-my-bots .mb-stat-err b { color: #fca5a5; }
.result-card.rc-my-bots .mb-stat-soft {
background: rgba(255,255,255,.03);
border-color: rgba(255,255,255,.08);
}
.result-card.rc-my-bots .mb-stat-soft b { color: var(--txt-1, #f4f4f6); }
.result-card.rc-my-bots .mb-row-id { flex: 1; min-width: 0; }
.result-card.rc-my-bots .mb-name {
font: 700 14.5px/1.25 'Inter', sans-serif;
color: var(--txt-1, #f4f4f6);
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.result-card.rc-my-bots .mb-pill {
display: inline-flex; align-items: center; gap: 4px;
padding: 2px 9px;
background: color-mix(in srgb, var(--pc, #9aa3b2) 12%, transparent);
border: 1px solid color-mix(in srgb, var(--pc, #9aa3b2) 45%, transparent);
color: var(--pc, #9aa3b2);
font: 600 10.5px/1.3 'Inter', sans-serif;
border-radius: 10px; letter-spacing: .02em; white-space: nowrap;
}
.result-card.rc-my-bots .mb-dot {
display: inline-block; width: 6px; height: 6px; border-radius: 50%;
background: var(--pc); box-shadow: 0 0 6px var(--pc);
animation: mbPulse 1.6s infinite;
}
@keyframes mbPulse { 0%,100% { opacity: 1 } 50% { opacity: .4 } }
.result-card.rc-my-bots .mb-handle {
font: 600 12.5px/1.3 'JetBrains Mono', monospace;
color: var(--txt-2, #9aa3b2);
margin-top: 2px;
display: flex; align-items: baseline; gap: 8px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.result-card.rc-my-bots .mb-meta {
font: 500 11px/1 'Inter', sans-serif;
color: var(--txt-3, #6b7280);
letter-spacing: .02em;
}
.result-card.rc-my-bots .mb-desc {
margin-top: 10px;
font: 400 12.5px/1.5 'Inter', sans-serif;
color: var(--txt-2, #9aa3b2);
padding: 8px 10px;
background: rgba(255,255,255,.02);
border-radius: 8px;
border-left: 2px solid rgba(255,122,24,.35);
}
.result-card.rc-my-bots .mb-links {
margin-top: 10px;
display: flex; gap: 8px; flex-wrap: wrap;
}
.result-card.rc-my-bots .mb-link {
display: inline-flex; align-items: center; gap: 5px;
padding: 4px 9px;
background: rgba(96,165,250,.08);
border: 1px solid rgba(96,165,250,.20);
color: #93c5fd;
font: 600 11.5px/1.3 'Inter', sans-serif;
border-radius: 8px; text-decoration: none;
transition: background .12s, border-color .12s;
}
.result-card.rc-my-bots .mb-link:hover {
background: rgba(96,165,250,.16);
border-color: rgba(96,165,250,.40);
text-decoration: none;
}
.result-card.rc-my-bots .mb-link-icon { font-size: 11px; }
.result-card.rc-my-bots .mb-link-err {
background: rgba(248,113,113,.08);
border-color: rgba(248,113,113,.25);
color: #fca5a5; cursor: help;
}
.result-card.rc-my-bots .mb-chips {
margin-top: 12px;
display: flex; gap: 6px; flex-wrap: wrap;
}
.result-card.rc-my-bots .mb-chip {
display: inline-flex; align-items: center; gap: 5px;
padding: 6px 11px;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.10);
color: var(--txt-2, #9aa3b2);
font: 600 11.5px/1 'Inter', sans-serif;
border-radius: 8px; cursor: pointer;
transition: background .12s, color .12s, border-color .12s, transform .08s;
}
.result-card.rc-my-bots .mb-chip:hover {
background: rgba(255,122,24,.10);
border-color: rgba(255,122,24,.35);
color: #ffb685;
transform: translateY(-1px);
}
.result-card.rc-my-bots .mb-chip-go {
background: rgba(74,222,128,.10);
border-color: rgba(74,222,128,.40);
color: #4ade80;
}
.result-card.rc-my-bots .mb-chip-go:hover {
background: rgba(74,222,128,.18);
border-color: rgba(74,222,128,.55);
color: #86efac;
}
.result-card.rc-my-bots .mb-chip-danger:hover {
background: rgba(248,113,113,.12);
border-color: rgba(248,113,113,.45);
color: #fca5a5;
}
.result-card.rc-my-bots .mb-chip-icon { font-size: 12px; }
.result-card.rc-my-bots .mb-empty {
padding: 30px 16px; text-align: center; color: var(--txt-3); font-size: 13px;
}
.result-card.rc-my-bots .mb-empty code {
background: rgba(255,255,255,.06); padding: 2px 6px; border-radius: 5px;
color: #ffb685;
}
/* ── Token card (paste-CA-to-trade) ───────────────────────────────────── */
.result-card.rc-token { padding: 18px 18px 16px; }
.result-card.rc-token .tk-head {
display: grid; grid-template-columns: 52px 1fr auto; gap: 14px; align-items: center;
padding-bottom: 14px; border-bottom: 1px solid var(--line-1, rgba(255,255,255,.06));
}
.result-card.rc-token .tk-logo {
width: 52px; height: 52px; border-radius: 14px;
object-fit: cover;
box-shadow: 0 4px 14px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.12);
background: rgba(255,255,255,.04);
}
.result-card.rc-token .tk-logo-fb {
display: flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, #ff7a18, #ec4899);
font: 800 18px/1 'Inter', sans-serif; color: #fff; letter-spacing: -.02em;
}
.result-card.rc-token .tk-id { min-width: 0; }
.result-card.rc-token .tk-name {
font: 700 17px/1.2 'Inter', sans-serif; color: var(--txt-1, #f4f4f6);
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.result-card.rc-token .tk-socials { display: inline-flex; gap: 6px; }
.result-card.rc-token .tk-social {
display: inline-flex; align-items: center; justify-content: center;
width: 22px; height: 22px; border-radius: 6px;
background: rgba(255,255,255,.05);
font: 600 11px/1 'Inter', sans-serif; color: var(--txt-2);
text-decoration: none; transition: background .12s, color .12s;
}
.result-card.rc-token .tk-social:hover { background: rgba(255,122,24,.15); color: #ffb685; }
.result-card.rc-token .tk-sub {
margin-top: 4px;
display: flex; align-items: center; gap: 8px;
font: 600 12px/1 'JetBrains Mono', monospace;
}
.result-card.rc-token .tk-sym { color: var(--txt-2, #9aa3b2); }
.result-card.rc-token .tk-chain-pill {
display: inline-flex; align-items: center;
padding: 2px 8px; border-radius: 8px;
background: color-mix(in srgb, var(--cc, #9aa3b2) 14%, transparent);
border: 1px solid color-mix(in srgb, var(--cc, #9aa3b2) 45%, transparent);
color: var(--cc, #9aa3b2);
font: 700 10px/1.2 'Inter', sans-serif; letter-spacing: .03em;
text-transform: uppercase;
}
.result-card.rc-token .tk-price { text-align: right; flex: none; }
.result-card.rc-token .tk-px {
font: 800 22px/1 'Inter', sans-serif; letter-spacing: -.02em;
color: var(--txt-1, #f4f4f6);
}
.result-card.rc-token .tk-ch {
margin-top: 4px;
font: 700 13px/1 'JetBrains Mono', monospace;
}
.result-card.rc-token .tk-ch-meta { color: var(--txt-3, #6b7280); font-weight: 500; margin-left: 4px; font-size: 11px; }
.result-card.rc-token .tk-stats {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
padding: 14px 0;
border-bottom: 1px solid var(--line-1, rgba(255,255,255,.06));
}
.result-card.rc-token .tk-stat {
padding: 8px 10px;
background: rgba(255,255,255,.02);
border-radius: 8px;
}
.result-card.rc-token .tk-stat-l {
font: 600 9.5px/1 'Inter', sans-serif;
color: var(--txt-3, #6b7280);
text-transform: uppercase; letter-spacing: .1em;
margin-bottom: 4px;
}
.result-card.rc-token .tk-stat-v {
font: 700 13px/1.2 'JetBrains Mono', monospace;
color: var(--txt-1, #f4f4f6);
}
.result-card.rc-token .tk-chips {
display: flex; gap: 8px; flex-wrap: wrap;
padding-top: 14px;
}
.result-card.rc-token .tk-chip {
display: inline-flex; align-items: center; gap: 5px;
padding: 8px 13px;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.10);
color: var(--txt-2, #9aa3b2);
font: 600 12px/1 'Inter', sans-serif;
border-radius: 9px;
text-decoration: none; cursor: pointer;
transition: background .12s, color .12s, border-color .12s, transform .08s;
}
.result-card.rc-token .tk-chip:hover {
background: rgba(255,122,24,.10);
border-color: rgba(255,122,24,.35);
color: #ffb685;
transform: translateY(-1px);
}
.result-card.rc-token .tk-chip-buy {
background: linear-gradient(135deg, rgba(255,122,24,.18), rgba(255,165,80,.12));
border-color: rgba(255,122,24,.50);
color: #ffb685;
}
.result-card.rc-token .tk-chip-buy:hover {
background: linear-gradient(135deg, rgba(255,122,24,.30), rgba(255,165,80,.22));
border-color: rgba(255,122,24,.70);
color: #fff;
box-shadow: 0 6px 20px rgba(255,122,24,.25);
}
.result-card.rc-token .tk-note {
margin-top: 14px; padding: 10px 12px;
background: rgba(96,165,250,.06);
border: 1px solid rgba(96,165,250,.18);
border-left: 3px solid #60a5fa;
border-radius: 8px;
font: 500 12px/1.5 'Inter', sans-serif;
color: var(--txt-2, #9aa3b2);
}
.result-card.rc-token .tk-note b { color: #93c5fd; }
/* Token safety scan block (progressive-enhancement · #46 / GMGN-class forensics via public Base security API) */
.tk-safety:empty { display: none; }
.tk-safety { margin-top: 12px; }
.tk-safety-checking {
display: inline-flex; align-items: center; gap: 7px;
font: 600 11.5px/1 'Inter', sans-serif; color: var(--txt-3, #6b7280);
}
.tk-safety-dot {
width: 7px; height: 7px; border-radius: 50%; background: #6b7280;
animation: priceDotPulse 1.4s ease-in-out infinite;
}
.tk-safety-box { padding: 11px 13px; border-radius: 10px; border: 1px solid; }
.tk-safety-ok { background: rgba(74,222,128,.06); border-color: rgba(74,222,128,.28); }
.tk-safety-caution { background: rgba(251,191,36,.07); border-color: rgba(251,191,36,.32); }
.tk-safety-danger { background: rgba(248,113,113,.08); border-color: rgba(248,113,113,.38); }
.tk-safety-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.tk-safety-badge { font: 800 12.5px/1 'Inter', sans-serif; letter-spacing: .01em; }
.tk-safety-ok .tk-safety-badge { color: #4ade80; }
.tk-safety-caution .tk-safety-badge { color: #fbbf24; }
.tk-safety-danger .tk-safety-badge { color: #f87171; }
.tk-safety-tax { font: 600 11px/1 'JetBrains Mono', monospace; color: var(--txt-2, #9aa3b2); }
.tk-trade { font: 700 11px/1 'Inter', sans-serif; padding: 4px 8px; border-radius: 999px; white-space: nowrap; }
.tk-trade-ok { color: #4ade80; background: rgba(74,222,128,.10); border: 1px solid rgba(74,222,128,.30); }
.tk-trade-bad { color: #f87171; background: rgba(248,113,113,.12); border: 1px solid rgba(248,113,113,.40); }
.tk-trade-warn { color: #fbbf24; background: rgba(251,191,36,.10); border: 1px solid rgba(251,191,36,.32); }
.tk-safety-tax-line { margin-top: 7px; font: 600 11px/1.3 'JetBrains Mono', monospace; color: var(--txt-2, #9aa3b2); }
.tk-flags { list-style: none; margin: 9px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.tk-flag { font: 500 12px/1.4 'Inter', sans-serif; padding-left: 18px; position: relative; color: var(--txt-2, #9aa3b2); }
.tk-flag::before { position: absolute; left: 0; top: 0; }
.tk-flag-d { color: #fca5a5; } .tk-flag-d::before { content: '⛔'; font-size: 10px; }
.tk-flag-c { color: #fcd34d; } .tk-flag-c::before { content: '⚠'; font-size: 11px; }
.tk-safety-clean { margin-top: 7px; font: 500 12px/1.4 'Inter', sans-serif; color: #86efac; }
.tk-safety-foot { margin-top: 9px; font: 500 10.5px/1.4 'Inter', sans-serif; color: var(--txt-3, #6b7280); opacity: .85; }
@media (max-width: 540px) {
.result-card.rc-token .tk-stats { grid-template-columns: repeat(2, 1fr); }
}
/* ── Styled confirm / prompt modal (ui-modal.js) ──────────────────────── */
.ui-modal-bg {
position: fixed; inset: 0; z-index: 10000;
background: rgba(4, 6, 10, .72);
backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
display: flex; align-items: center; justify-content: center;
padding: 20px;
animation: uiModalFade .18s ease;
}
.ui-modal-bg.closing { animation: uiModalFadeOut .18s ease forwards; }
@keyframes uiModalFade { from { opacity: 0 } to { opacity: 1 } }
@keyframes uiModalFadeOut { from { opacity: 1 } to { opacity: 0 } }
.ui-modal {
position: relative;
width: 100%; max-width: 460px;
background: linear-gradient(180deg, #15171f 0%, #0f1118 100%);
border: 1px solid rgba(255,255,255,.08);
border-radius: 20px;
padding: 26px 24px 22px;
box-shadow: 0 32px 80px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.04);
opacity: 0; transform: translateY(12px) scale(.98);
transition: opacity .22s ease, transform .22s cubic-bezier(.2,.9,.3,1);
}
.ui-modal.in { opacity: 1; transform: translateY(0) scale(1); }
.ui-modal-x {
position: absolute; top: 14px; right: 16px;
width: 30px; height: 30px;
background: rgba(255,255,255,.04); border: 0;
color: var(--txt-2, #9aa3b2);
border-radius: 8px; cursor: pointer;
font: 600 20px/1 'Inter', sans-serif;
transition: background .12s, color .12s;
}
.ui-modal-x:hover { background: rgba(255,255,255,.08); color: var(--txt-1, #f4f4f6); }
.ui-modal-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.ui-modal-icon {
flex: 0 0 auto;
width: 38px; height: 38px; border-radius: 11px;
display: flex; align-items: center; justify-content: center;
font: 700 18px/1 'Inter', sans-serif;
}
.ui-modal-icon-default {
background: rgba(255,122,24,.12);
color: #ffb685;
border: 1px solid rgba(255,122,24,.30);
}
.ui-modal-icon-danger {
background: rgba(248,113,113,.12);
color: #fca5a5;
border: 1px solid rgba(248,113,113,.35);
}
.ui-modal-title {
flex: 1; min-width: 0;
font: 700 17px/1.25 'Inter', sans-serif; letter-spacing: -.01em;
color: var(--txt-1, #f4f4f6);
}
.ui-modal-body {
font: 500 13.5px/1.55 'Inter', sans-serif;
color: var(--txt-2, #9aa3b2);
margin-bottom: 18px;
}
.ui-modal-body b, .ui-modal-body strong { color: var(--txt-1, #f4f4f6); font-weight: 700; }
.ui-modal-body code {
font: 600 12.5px/1 'JetBrains Mono', monospace;
background: rgba(255,255,255,.06);
color: #ffb685;
padding: 2px 7px; border-radius: 6px;
}
.ui-modal-input-wrap { margin-bottom: 18px; }
.ui-modal-input {
width: 100%;
padding: 11px 13px;
background: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.10);
border-radius: 10px;
color: var(--txt-1, #f4f4f6);
font: 500 13.5px/1.4 'JetBrains Mono', monospace;
outline: none;
transition: border-color .15s, background .15s;
}
.ui-modal-input::placeholder { color: var(--txt-3, #6b7280); }
.ui-modal-input:focus {
border-color: rgba(255,122,24,.55);
background: rgba(255,122,24,.04);
}
.ui-modal-input.has-err {
border-color: rgba(248,113,113,.55);
background: rgba(248,113,113,.04);
}
.ui-modal-err {
margin-top: 6px;
font: 500 11.5px/1.4 'Inter', sans-serif;
color: #fca5a5;
}
.ui-modal-foot {
display: flex; gap: 10px; justify-content: flex-end;
}
.ui-modal-btn {
padding: 10px 18px;
border-radius: 10px;
border: 1px solid transparent;
font: 700 13px/1 'Inter', sans-serif;
cursor: pointer;
transition: all .15s;
}
.ui-modal-btn-ghost {
background: rgba(255,255,255,.04);
border-color: rgba(255,255,255,.10);
color: var(--txt-2, #9aa3b2);
}
.ui-modal-btn-ghost:hover { background: rgba(255,255,255,.08); color: var(--txt-1, #f4f4f6); }
.ui-modal-btn-default {
background: linear-gradient(135deg, #ff7a18 0%, #ff9442 100%);
color: #0a0b10;
box-shadow: 0 4px 14px rgba(255,122,24,.30);
}
.ui-modal-btn-default:hover {
background: linear-gradient(135deg, #ff8d36 0%, #ffaa5e 100%);
box-shadow: 0 6px 18px rgba(255,122,24,.45);
transform: translateY(-1px);
}
.ui-modal-btn-danger {
background: linear-gradient(135deg, #ef4444 0%, #f87171 100%);
color: #fff;
box-shadow: 0 4px 14px rgba(239,68,68,.30);
}
.ui-modal-btn-danger:hover {
background: linear-gradient(135deg, #f87171 0%, #fb8a8a 100%);
box-shadow: 0 6px 18px rgba(239,68,68,.45);
transform: translateY(-1px);
}
@media (prefers-reduced-motion: reduce) {
.ui-modal-bg, .ui-modal, .ui-modal-btn { animation: none !important; transition: none !important; }
}
.result-card .rc-row .rc-v-stack { flex: 1; min-width: 0; }
.result-card .rc-row .rc-k-col .rc-k { font: 700 13px/1.2 'JetBrains Mono', monospace; color: var(--txt-2); }
.typing-dots { display: inline-flex; gap: 4px; padding: 4px 0 }
.typing-dots span {
width: 6px; height: 6px; border-radius: 50%; background: var(--txt-3);
animation: typeBlink 1.2s infinite ease-in-out;
}
.typing-dots span:nth-child(2) { animation-delay: .15s }
.typing-dots span:nth-child(3) { animation-delay: .30s }
@keyframes typeBlink { 0%, 80%, 100% { opacity: .35 } 40% { opacity: 1 } }
/* Streaming caret · shows at the tail of an in-progress agent reply */
.stream-caret {
display: inline-block;
width: 6px; height: 1em;
background: var(--accent);
vertical-align: text-bottom;
margin-left: 2px;
animation: streamBlink 1s steps(2, end) infinite;
border-radius: 1px;
}
@keyframes streamBlink { 50% { opacity: 0 } }
[data-streaming] { white-space: normal }
/* Tool-call badge shown above the streaming bubble */
.tool-badge {
align-self: flex-start;
margin-left: 44px;
padding: 3px 9px;
background: var(--base-soft); color: var(--base-2);
border: 1px solid rgba(0,82,255,.30); border-radius: 999px;
font: 600 11px/1 var(--mono); letter-spacing: .03em;
margin-bottom: 4px;
animation: msgIn .26s cubic-bezier(.16,1,.3,1);
}
/* ----- COMPOSER ------------------------------------------------- */
.composer {
position: fixed; left: 0; right: 0; bottom: 0;
z-index: 20;
padding: 4px 14px 5px;
background: linear-gradient(180deg, rgba(10,10,13,.0), rgba(10,10,13,.96) 30%);
backdrop-filter: blur(8px);
}
.composer-inner {
position: relative;
display: flex; align-items: flex-end; gap: 8px;
max-width: 760px; margin: 0 auto;
background: var(--bg-2);
border: 1px solid var(--line-2);
border-radius: 13px;
padding: 5px 6px 5px 11px;
transition: border-color .15s ease, box-shadow .15s ease;
}
.composer-inner:focus-within {
border-color: var(--accent);
box-shadow:
0 0 0 4px rgba(139,124,246,.10),
0 -6px 24px rgba(0,82,255,.08);
}
.composer-icon { flex: 0 0 36px; align-self: flex-end }
.composer textarea {
flex: 1;
background: transparent; border: 0; outline: 0;
color: var(--txt-1); resize: none;
font: 400 13.5px/1.45 var(--inter);
padding: 5px 6px;
max-height: 150px;
min-height: 30px;
}
.composer textarea::placeholder { color: var(--txt-3) }
.composer-send {
flex: 0 0 34px; height: 34px; border-radius: 9px;
background: var(--accent); color: #0a0a0d;
border: 0; display: grid; place-items: center;
align-self: flex-end;
transition: all .15s ease;
box-shadow: 0 4px 16px rgba(139,124,246,.32);
}
.composer-send:hover { background: var(--accent-2) }
.composer-send:disabled { opacity: .5; cursor: not-allowed; box-shadow: none }
.composer-send svg { width: 16px; height: 16px }
.composer-foot {
max-width: 760px; margin: 2px auto 0;
display: flex; justify-content: flex-end; gap: 10px;
font-size: 9px; color: var(--txt-3); padding: 0 4px;
}
.composer-foot .ft-l { display: none; }
.kbd {
display: inline-block; padding: 1px 5px;
background: var(--bg-3); border: 1px solid var(--line-2); border-radius: 4px;
font: 600 10px/1.3 var(--mono); color: var(--txt-2);
}
.composer-foot .ft-r {
color: var(--base-2); font-weight: 500;
}
@media (max-width: 640px) { .composer-foot .ft-l { font-size: 10px } }
/* command palette */
.composer-palette {
position: absolute; bottom: calc(100% + 8px); left: 0; right: 0;
max-height: 280px; overflow-y: auto;
background: linear-gradient(180deg, rgba(20,20,26,.98), rgba(15,15,20,.98));
border: 1px solid var(--line-2);
border-radius: 14px;
box-shadow: 0 16px 48px rgba(0,0,0,.6);
padding: 6px;
z-index: 5;
}
.pal-item {
display: flex; align-items: center; gap: 10px;
padding: 9px 11px;
border-radius: 9px; cursor: pointer;
transition: background .12s ease;
}
.pal-item:hover, .pal-item.is-active { background: var(--bg-3) }
.pal-cmd { font: 600 12.5px/1 var(--mono); color: var(--accent); flex: 0 0 100px }
.pal-desc { font-size: 12.5px; color: var(--txt-2); flex: 1 }
.pal-tier { font-size: 10px; color: var(--txt-3); letter-spacing: .08em; text-transform: uppercase }
/* ----- BUTTONS -------------------------------------------------- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
padding: 10px 16px;
background: var(--bg-2); color: var(--txt-1);
border: 1px solid var(--line-2); border-radius: 10px;
font: 600 13px/1 var(--inter);
cursor: pointer; transition: all .15s ease;
text-decoration: none;
}
.btn:hover { border-color: var(--accent); color: var(--accent) }
.btn-primary {
background: var(--accent); color: #0a0a0d; border-color: var(--accent);
box-shadow: 0 4px 14px rgba(139,124,246,.28);
}
.btn-primary:hover { background: var(--accent-2); color: #0a0a0d; border-color: var(--accent-2) }
.btn-ghost { background: transparent }
.btn-danger { background: rgba(251,113,133,.10); border-color: rgba(251,113,133,.30); color: var(--neg) }
.btn-danger:hover { background: rgba(251,113,133,.18); color: #fda4af; border-color: var(--neg) }
.btn-sm { padding: 7px 11px; font-size: 12px; border-radius: 8px }
.btn:disabled { opacity: .5; cursor: not-allowed }
/* ----- MODAL ---------------------------------------------------- */
.modal-backdrop {
position: fixed; inset: 0; z-index: 100;
background: rgba(0,0,0,.7);
display: flex; align-items: center; justify-content: center;
padding: 16px;
backdrop-filter: blur(6px);
animation: bdIn .2s ease;
}
@keyframes bdIn { from { opacity: 0 } to { opacity: 1 } }
.modal {
background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
border: 1px solid var(--line-2); border-radius: 18px;
width: 100%; max-width: 480px;
max-height: 90vh; overflow: hidden;
display: flex; flex-direction: column;
animation: modalIn .26s cubic-bezier(.16,1,.3,1);
box-shadow: 0 24px 60px rgba(0,0,0,.7);
}
@keyframes modalIn { from { opacity: 0; transform: translateY(12px) scale(.96) } to { opacity: 1; transform: translateY(0) scale(1) } }
.modal-head {
display: flex; align-items: center; justify-content: space-between;
padding: 16px 20px;
border-bottom: 1px solid var(--line-1);
background: linear-gradient(90deg,
rgba(0,82,255,.06) 0%,
transparent 30%,
transparent 70%,
rgba(139,124,246,.06) 100%);
}
.modal-head h3 { font: 700 16px/1.2 var(--space); margin: 0 }
.modal-close {
width: 32px; height: 32px; border-radius: 9px;
background: transparent; border: 0; color: var(--txt-3);
font: 600 22px/1 var(--inter); cursor: pointer;
display: grid; place-items: center;
}
.modal-close:hover { background: var(--bg-3); color: var(--txt-1) }
.modal-body { padding: 18px 20px; overflow-y: auto }
.field { margin-bottom: 14px }
.field label { display: block; font-size: 12px; color: var(--txt-2); margin-bottom: 6px; font-weight: 500 }
.input, .select, textarea.input {
width: 100%; padding: 10px 12px;
background: var(--bg-1); color: var(--txt-1);
border: 1px solid var(--line-2); border-radius: 9px;
font: 400 13.5px/1.4 var(--inter);
transition: border-color .15s ease;
}
.input:focus, .select:focus, textarea.input:focus { outline: 0; border-color: var(--accent) }
.cta-row { display: flex; gap: 8px; margin-top: 12px }
/* connect modal · special */
.connect-modal { max-width: 520px; padding: 0; position: relative }
.connect-modal .modal-close { position: absolute; top: 12px; right: 12px; z-index: 2 }
.cm-hero {
padding: 26px 22px 18px; text-align: center;
background:
radial-gradient(ellipse at top left, rgba(0,82,255,.14), transparent 55%),
radial-gradient(ellipse at top right, rgba(139,124,246,.20), transparent 55%);
border-bottom: 1px solid var(--line-1);
}
.cm-glyph {
width: 64px; height: 64px; margin: 0 auto 12px;
border-radius: 18px;
box-shadow: 0 12px 32px rgba(139,124,246,.32), 0 0 0 1px rgba(139,124,246,.30);
}
.cm-glyph svg, .cm-glyph img { width: 100%; height: 100%; display: block; object-fit: contain }
.connect-modal h3 {
font: 700 22px/1.2 var(--space); margin: 0 0 6px;
background: linear-gradient(180deg, #fff, #c4c4cc);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
}
.cm-hero p { font-size: 13.5px; line-height: 1.55; margin: 0 auto; max-width: 380px; color: var(--txt-2) }
.cm-hero p b { color: var(--accent); font-weight: 600 }
.cm-balance {
margin: 14px 18px 0; padding: 14px 16px;
background: linear-gradient(180deg, rgba(139,124,246,.06), rgba(139,124,246,.02));
border: 1px solid rgba(139,124,246,.25); border-radius: 12px;
}
.cm-balance-row { display: flex; justify-content: space-between; gap: 12px; align-items: center }
.cm-balance-l, .cm-balance-r { display: flex; flex-direction: column; gap: 3px }
.cm-balance-r { text-align: right }
.cm-eyebrow { font-size: 10px; letter-spacing: .14em; color: var(--txt-3); text-transform: uppercase }
.cm-addr { font-size: 13px; color: var(--txt-1); font-weight: 600 }
.cm-amt { font: 700 18px/1 var(--space); color: var(--accent) }
.cm-tier-pill {
display: inline-flex; align-items: center; gap: 6px;
padding: 4px 10px; margin-top: 10px;
border-radius: 999px;
background: var(--bg-2); border: 1px solid var(--line-2);
font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--txt-2);
}
.cm-tier-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: #52525b }
.cm-tier-pill[data-tier="bronze"] .dot { background: #a78bfa }
.cm-tier-pill[data-tier="silver"] .dot { background: #cbd5e1 }
.cm-tier-pill[data-tier="gold"] .dot { background: #fbbf24 }
.cm-tier-pill[data-tier="platinum"] .dot { background: var(--accent) }
.cm-tier-ladder {
margin: 14px 18px 0; padding: 12px 14px;
background: var(--bg-1); border: 1px solid var(--line-1); border-radius: 12px;
}
/* Tier ladder is collapsed by default · token-gating stays out of the front door */
.cm-tier-ladder > summary.cm-tier-head {
cursor: pointer; list-style: none; user-select: none; margin-bottom: 0;
display: flex; align-items: center; justify-content: space-between;
}
.cm-tier-ladder > summary.cm-tier-head::-webkit-details-marker { display: none; }
.cm-tier-ladder > summary.cm-tier-head::after { content: '⌄'; font-size: 13px; opacity: .55; }
.cm-tier-ladder[open] > summary.cm-tier-head { margin-bottom: 8px; }
.cm-tier-ladder[open] > summary.cm-tier-head::after { content: '⌃'; }
.cm-tier-head {
font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
color: var(--txt-3); margin-bottom: 8px;
}
.cm-tier {
display: grid; grid-template-columns: 70px 70px 1fr; gap: 8px;
padding: 7px 0; font-size: 12.5px;
border-top: 1px dashed var(--line-1);
align-items: center;
}
.cm-tier:first-of-type { border-top: 0 }
.cm-tier .nm { font-weight: 600; color: var(--txt-1) }
.cm-tier .amt { font: 600 12px/1 var(--mono); color: var(--accent) }
.cm-tier .ft { color: var(--txt-2); font-size: 12px }
.cm-tier.is-current { background: linear-gradient(90deg, rgba(139,124,246,.12), transparent); border-radius: 8px; padding-left: 8px; padding-right: 8px; margin: 0 -8px }
.cm-tier.is-current::before { content: '◆ '; color: var(--accent); margin-right: -2px }
.cm-actions { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 12px }
@media (min-width: 520px) { .cm-actions { flex-direction: row } .cm-actions .cm-go { flex: 1 } }
.cm-go { padding: 13px 18px !important; box-shadow: 0 6px 20px rgba(139,124,246,.32) }
.cm-wallet-icon svg { width: 18px; height: 18px }
.cm-buy { padding: 13px 18px !important }
.cm-foot {
display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center;
padding: 0 18px 18px; font-size: 11px; color: var(--txt-3); letter-spacing: .04em;
}
.cm-foot .dot-sep { opacity: .4 }
.cm-foot a { color: var(--accent) }
.base-chip {
display: inline-flex; align-items: center; gap: 5px;
color: var(--base-2); font-weight: 600;
}
.base-chip svg { width: 12px; height: 12px; display: block; flex: 0 0 auto }
/* base-chip inside a card row · slight pill background */
.rc-row .base-chip {
padding: 3px 8px;
background: var(--base-soft); border: 1px solid rgba(0,82,255,.30);
border-radius: 999px; font-size: 12px;
}
.siwe-status {
margin: 0 18px 14px; padding: 10px 12px; border-radius: 9px;
background: rgba(255,255,255,.04); border: 1px solid var(--line-2);
font: 500 12.5px/1.45 var(--inter); white-space: pre-wrap; word-break: break-word;
color: var(--txt-2);
}
.siwe-status.pos { border-color: rgba(74,222,128,.4); color: #86efac }
.siwe-status.neg { border-color: rgba(251,113,133,.4); color: #fda4af }
/* ----- LOGIN FLOW (multi-step) --------------------------------------- */
.cm-flow { padding: 16px 18px 18px }
.cm-stepper {
display: grid; grid-template-columns: repeat(5, 1fr);
gap: 4px; margin-bottom: 16px;
position: relative;
}
.cm-step {
display: flex; flex-direction: column; align-items: center; gap: 4px;
position: relative; padding-top: 2px;
}
.cm-step .dot {
width: 24px; height: 24px; border-radius: 50%;
background: var(--bg-3); border: 2px solid var(--line-2);
display: grid; place-items: center;
font: 700 11px/1 var(--inter); color: var(--txt-3);
transition: all .2s ease;
}
.cm-step .lbl { font-size: 10.5px; color: var(--txt-3); letter-spacing: .04em; text-transform: uppercase; font-weight: 600 }
.cm-step.active .dot { background: var(--accent); border-color: var(--accent); color: #0a0a0d; box-shadow: 0 0 0 4px rgba(139,124,246,.18) }
.cm-step.active .lbl { color: var(--accent) }
.cm-step.done .dot { background: var(--accent); border-color: var(--accent); color: #0a0a0d }
.cm-step.done .lbl { color: var(--txt-2) }
/* Network step uses Base blue because it is literally about Base chain */
.cm-step[data-key="chain"].active .dot { background: var(--base); border-color: var(--base); color: #fff; box-shadow: 0 0 0 4px rgba(0,82,255,.20) }
.cm-step[data-key="chain"].active .lbl { color: var(--base-2) }
.cm-step[data-key="chain"].done .dot { background: var(--base); border-color: var(--base); color: #fff }
.cm-stepper::before {
content: ''; position: absolute; left: 12px; right: 12px; top: 13px;
height: 2px; background: var(--line-1); z-index: -1;
}
.cm-step-body { animation: cmStepIn .25s cubic-bezier(.16,1,.3,1) }
@keyframes cmStepIn { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: translateY(0) } }
.cm-step-narration {
font-size: 13.5px; line-height: 1.55; color: var(--txt-2);
margin-bottom: 12px;
}
.cm-step-narration b { color: var(--txt-1) }
.cm-step-narration .mono { font-family: var(--mono); color: var(--accent); font-weight: 600 }
.cm-status {
display: inline-flex; align-items: center; gap: 8px;
padding: 8px 12px; margin: 4px 0 14px;
border-radius: 9px;
background: rgba(255,255,255,.04); border: 1px solid var(--line-2);
font: 500 12.5px/1.3 var(--inter); color: var(--txt-2);
}
.cm-status::before {
content: ''; width: 6px; height: 6px; border-radius: 50%;
background: var(--txt-3);
animation: cmStatusPulse 1.2s ease-in-out infinite;
}
@keyframes cmStatusPulse { 0%, 100% { opacity: .35 } 50% { opacity: 1 } }
.cm-status.pos { border-color: rgba(74,222,128,.4); color: #86efac }
.cm-status.pos::before { background: #4ade80; animation: none }
.cm-status.neg { border-color: rgba(251,113,133,.4); color: #fda4af }
.cm-status.neg::before { background: #fb7185; animation: none }
.cm-status.warn { border-color: rgba(251,191,36,.4); color: #fde68a }
.cm-status.warn::before { background: #fbbf24; animation: none }
.cm-wallet-list { display: flex; flex-direction: column; gap: 6px; margin-top: 6px }
.cm-wallet-btn {
display: flex; align-items: center; gap: 12px;
width: 100%; padding: 12px 14px; text-align: left;
background: var(--bg-1); color: var(--txt-1);
border: 1px solid var(--line-1); border-radius: 11px;
text-decoration: none; cursor: pointer;
transition: all .15s ease;
}
.cm-wallet-btn:hover { border-color: var(--accent); transform: translateX(2px) }
.cm-wallet-btn.primary {
background: linear-gradient(180deg, rgba(139,124,246,.10), rgba(139,124,246,.04));
border-color: rgba(139,124,246,.40);
margin-bottom: 12px;
}
.cm-wallet-btn .emoji {
width: 38px; height: 38px; border-radius: 10px;
background: var(--bg-2); border: 1px solid var(--line-2);
display: grid; place-items: center;
font-size: 18px;
}
.cm-wallet-btn.primary .emoji {
background: var(--accent-soft);
border-color: rgba(139,124,246,.30);
}
.cm-wallet-btn .info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0 }
.cm-wallet-btn .nm { font: 600 14px/1.2 var(--inter); color: var(--txt-1) }
.cm-wallet-btn .sub { font-size: 11.5px; color: var(--txt-3) }
.cm-wallet-btn .arrow {
font-size: 16px; color: var(--txt-3);
transition: transform .15s ease, color .15s ease;
}
.cm-wallet-btn:hover .arrow { color: var(--accent); transform: translateX(2px) }
.cm-wallet-btn.primary .arrow { color: var(--accent) }
.cm-sub-head {
font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
color: var(--txt-3); margin: 18px 0 8px; font-weight: 600;
}
.cm-callout {
padding: 12px 14px; margin: 6px 0;
background: var(--bg-2); border-left: 3px solid var(--accent);
border-radius: 0 10px 10px 0;
font-size: 13px; color: var(--txt-2); line-height: 1.55;
}
.cm-callout a { color: var(--accent); font-weight: 600 }
.cm-actions-row {
display: flex; gap: 8px; margin-top: 14px;
flex-wrap: wrap;
}
.cm-actions-row .btn { flex: 0 0 auto }
@media (max-width: 480px) {
.cm-actions-row { flex-direction: column }
.cm-actions-row .btn { width: 100% }
}
/* ----- DRAWER --------------------------------------------------- */
.drawer {
position: fixed; top: 0; right: 0; bottom: 0;
width: var(--drawer-w); max-width: 100%;
background: linear-gradient(180deg, var(--bg-1), var(--bg-0));
border-left: 1px solid var(--line-2);
z-index: 50;
display: flex; flex-direction: column;
box-shadow: -16px 0 48px rgba(0,0,0,.5);
animation: drawerIn .25s cubic-bezier(.16,1,.3,1);
}
@keyframes drawerIn { from { transform: translateX(100%) } to { transform: translateX(0) } }
.drawer-head {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 16px; border-bottom: 1px solid var(--line-1);
height: var(--top-h);
}
.drawer-head h3 { font: 700 15px/1 var(--space); margin: 0 }
.drawer-tabs {
display: flex; padding: 0 8px; gap: 2px;
border-bottom: 1px solid var(--line-1);
}
.drawer-tab {
flex: 1; padding: 10px 8px;
background: transparent; border: 0; color: var(--txt-2);
font: 600 12px/1 var(--inter); cursor: pointer;
border-bottom: 2px solid transparent;
transition: all .15s ease;
}
.drawer-tab:hover { color: var(--txt-1) }
.drawer-tab.is-active { color: var(--accent); border-bottom-color: var(--accent) }
/* The Smart and Signals tabs use Base blue · they're chain-data surfaces */
.drawer-tab[data-tab="smart"].is-active,
.drawer-tab[data-tab="signals"].is-active { color: var(--base-2); border-bottom-color: var(--base) }
.drawer-body { flex: 1; overflow-y: auto; padding: 14px }
/* ----- NOTICE (toast) ------------------------------------------- */
.notice-stack {
position: fixed; top: calc(var(--top-h) + 14px); right: 16px;
z-index: 90;
display: flex; flex-direction: column; gap: 10px;
max-width: min(380px, calc(100vw - 32px));
pointer-events: none;
}
@media (max-width: 640px) {
.notice-stack { right: 12px; left: 12px; max-width: none; top: calc(var(--top-h) + 10px) }
}
.notice {
pointer-events: auto; position: relative;
display: grid; grid-template-columns: 30px 1fr 22px; gap: 12px; align-items: center;
padding: 14px 14px 14px 16px;
background: linear-gradient(180deg, rgba(22,22,28,.98), rgba(13,13,16,.98));
border: 1px solid var(--line-2); border-radius: 14px;
box-shadow: 0 8px 28px rgba(0,0,0,.55);
color: var(--txt-1); font: 500 13.5px/1.4 var(--inter);
backdrop-filter: blur(14px);
opacity: 0; transform: translateX(24px) scale(.96);
transition: opacity .22s ease, transform .26s cubic-bezier(.16,1,.3,1);
}
.notice.in { opacity: 1; transform: translateX(0) scale(1) }
.notice.out { opacity: 0; transform: translateX(24px) scale(.96) }
.notice::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent) }
.notice-icon {
width: 30px; height: 30px; border-radius: 9px;
display: flex; align-items: center; justify-content: center;
background: rgba(255,255,255,.04); border: 1px solid var(--line-1);
}
.notice-icon svg { width: 16px; height: 16px; display: block }
.notice-body { color: var(--txt-1); word-break: break-word; line-height: 1.45 }
.notice-close {
width: 22px; height: 22px; border-radius: 8px;
background: transparent; border: 0; color: var(--txt-3); cursor: pointer;
font: 600 18px/1 var(--inter); padding: 0;
}
.notice-close:hover { color: var(--txt-1); background: var(--bg-3) }
.notice.notice-pos::before { background: #4ade80 }
.notice.notice-pos .notice-icon { color: #4ade80; background: rgba(74,222,128,.10); border-color: rgba(74,222,128,.30) }
.notice.notice-neg::before { background: #fb7185 }
.notice.notice-neg .notice-icon { color: #fb7185; background: rgba(251,113,133,.10); border-color: rgba(251,113,133,.30) }
.notice.notice-warn::before { background: #fbbf24 }
.notice.notice-warn .notice-icon { color: #fbbf24; background: rgba(251,191,36,.10); border-color: rgba(251,191,36,.30) }
.notice.notice-info::before { background: var(--accent) }
.notice.notice-info .notice-icon { color: var(--accent); background: var(--accent-soft); border-color: rgba(139,124,246,.30) }
/* ----- WIZARD --------------------------------------------------- */
.wz-modal { max-width: 620px; width: calc(100% - 24px) }
.wz-modal .modal-head { padding-bottom: 12px }
.wz-modal .eyebrow { font-size: 10.5px; letter-spacing: .12em; color: var(--txt-3); text-transform: uppercase }
.wz-modal .modal-body { padding: 0 22px 8px; max-height: 60vh; overflow-y: auto }
.wz-modal .modal-body p { font-size: 14px; line-height: 1.55; color: var(--txt-2); margin-bottom: 12px }
.wz-modal .modal-body p:last-child { margin-bottom: 0 }
.wz-modal .modal-body b { color: var(--txt-1) }
.wz-modal .modal-body code { font: 500 12.5px/1 var(--mono); background: var(--bg-2); padding: 2px 6px; border-radius: 5px; border: 1px solid var(--line-1) }
.wz-progress { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 0 22px 14px }
.wz-bar { position: absolute; left: 38px; right: 38px; top: 7px; height: 2px; background: var(--line-1); border-radius: 2px; z-index: 0 }
.wz-bar-fill { height: 100%; background: var(--accent); border-radius: 2px; transition: width .25s ease }
.wz-dot {
position: relative; z-index: 1;
width: 16px; height: 16px; border-radius: 50%;
background: var(--bg-3); border: 2px solid var(--line-2);
cursor: pointer; transition: all .2s ease;
}
.wz-dot.active { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 4px rgba(139,124,246,.20) }
.wz-dot.done { background: var(--accent); border-color: var(--accent) }
.wz-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 22px 18px; border-top: 1px solid var(--line-1) }
.wz-footer .dim { flex: 1; text-align: center }
.wz-list { margin: 0 0 12px 22px; padding: 0; color: var(--txt-2); font-size: 14px; line-height: 1.6 }
.wz-list li { margin-bottom: 6px }
.wz-list li::marker { color: var(--accent); font-weight: 700 }
.wz-link-row {
display: flex; gap: 8px; align-items: center;
margin: 6px 0 12px; padding: 8px 10px;
background: var(--bg-2); border: 1px solid var(--line-1); border-radius: 10px;
flex-wrap: wrap;
}
.wz-url { flex: 1; min-width: 0; font: 500 12.5px/1.3 var(--mono); color: var(--accent); background: transparent !important; border: 0 !important; padding: 0 !important; word-break: break-all }
.wz-pill { display: inline-block; padding: 2px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 600 }
.wz-callout { margin: 10px 0; padding: 10px 12px; background: var(--bg-2); border-left: 3px solid var(--accent); border-radius: 0 8px 8px 0; font-size: 13px; color: var(--txt-2) }
.wz-callout.warn { border-left-color: #fbbf24; color: var(--txt-1); background: rgba(251,191,36,.06) }
/* ----- DRAWER ITEM LISTS ---------------------------------------- */
.drawer-empty { padding: 32px 16px; text-align: center; color: var(--txt-3) }
.drawer-empty .em-glyph {
width: 48px; height: 48px; margin: 0 auto 12px;
border-radius: 12px; background: var(--bg-2);
display: grid; place-items: center; color: var(--txt-3);
}
.drawer-item {
padding: 12px 14px;
background: var(--bg-1); border: 1px solid var(--line-1);
border-radius: 10px; margin-bottom: 8px;
}
.drawer-item:hover { border-color: var(--line-2) }
.di-head { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin-bottom: 6px }
.di-time { font: 500 11px/1 var(--mono); color: var(--txt-3) }
.di-status {
font: 600 10px/1 var(--inter); letter-spacing: .06em; text-transform: uppercase;
padding: 3px 7px; border-radius: 999px;
}
.di-status.pending { background: rgba(251,191,36,.10); color: var(--warn); border: 1px solid rgba(251,191,36,.30) }
.di-status.posted { background: rgba(74,222,128,.10); color: var(--pos); border: 1px solid rgba(74,222,128,.30) }
.di-status.failed { background: rgba(251,113,133,.10); color: var(--neg); border: 1px solid rgba(251,113,133,.30) }
.di-text { font-size: 13px; color: var(--txt-1); white-space: pre-wrap; word-break: break-word; line-height: 1.5 }
.di-meta { display: flex; gap: 10px; margin-top: 8px; font-size: 11px; color: var(--txt-3) }
.di-actions { display: flex; gap: 6px; margin-top: 10px }
/* ----- BYOK ROW ------------------------------------------------- */
.byok-row {
display: flex; align-items: center; justify-content: space-between;
padding: 10px 12px; gap: 8px;
background: var(--bg-1); border: 1px solid var(--line-1);
border-radius: 10px; margin-bottom: 8px;
}
.byok-row .l .nm { font-weight: 600; font-size: 13px }
.byok-row .l .ct { font-size: 11.5px; color: var(--txt-3); margin-top: 2px }
/* ----- UTILITY -------------------------------------------------- */
.flex { display: flex }
.flex.gap-8 { gap: 8px }
.flex.gap-12 { gap: 12px }
.flex.col { flex-direction: column }
.flex.wrap { flex-wrap: wrap }
.flex.center { align-items: center; justify-content: center }
.mt-8 { margin-top: 8px }
.mt-12 { margin-top: 12px }
.mb-8 { margin-bottom: 8px }
.mb-12 { margin-bottom: 12px }
.text-c { text-align: center }
hr.div { border: 0; border-top: 1px dashed var(--line-1); margin: 12px 0 }
/* TG-link code row */
.tg-code-row { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap }
.tg-code-cmd {
flex: 1 1 220px; min-width: 0;
padding: 12px 14px;
background: linear-gradient(180deg, rgba(139,124,246,.06), rgba(139,124,246,.02));
border: 1px dashed rgba(139,124,246,.35); border-radius: 10px;
color: var(--accent); font-size: 15px; font-weight: 700;
letter-spacing: .03em;
display: flex; align-items: center;
user-select: all; overflow-wrap: anywhere;
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation: none !important; transition: none !important }
}
/* ============================================================
MOBILE polish · stacked tweaks (max-width queries)
============================================================ */
@media (max-width: 720px) {
:root { --top-h: 52px }
.topbar { padding: 0 10px }
.brand { gap: 7px }
.brand-glyph { width: 26px; height: 26px; font-size: 14px }
.brand-name { font-size: 14.5px }
.topbar-right { gap: 4px }
.iconbtn { width: 34px; height: 34px }
.wallet-pill { padding: 6px 10px; font-size: 12px; gap: 6px }
.wallet-pill[data-network="base"]::before { width: 7px; height: 7px }
.chat-surface { padding: 14px 10px 4px }
.chat-thread { gap: 14px; padding-bottom: 12px }
.welcome { padding: 6vh 10px 20px }
.welcome .hero-glyph { width: 60px; height: 60px; border-radius: 16px; font-size: 30px }
.hero-base-dot { width: 18px; height: 18px; right: -3px; bottom: -3px }
.welcome h1 { font-size: 24px }
.welcome p.lead { font-size: 13.5px; padding: 0 4px }
.welcome-tagline { font-size: 11px; padding: 5px 10px; gap: 6px }
.suggest-grid { gap: 8px }
.suggest { padding: 12px 14px }
.suggest .s-title { font-size: 13px }
.suggest .s-sub { font-size: 11.5px }
.msg { gap: 10px }
.msg-avatar { width: 28px; height: 28px; flex-basis: 28px; font-size: 13px; border-radius: 9px }
.msg-bubble { max-width: 86%; font-size: 13.5px; padding: 9px 12px }
.msg-bubble code { font-size: 11.5px }
.msg-bubble pre { font-size: 11.5px; padding: 8px 10px }
.result-card .rc-head { padding: 9px 12px }
.result-card .rc-body { padding: 10px 12px }
.result-card .rc-row { padding: 7px 0; font-size: 12.5px; flex-wrap: wrap }
.result-card .rc-k { font-size: 11.5px }
.result-card .rc-v { font-size: 12.5px; word-break: break-word }
.composer { padding: 8px 10px 8px; --composer-h: 90px } /* 90 base + 24 ticker */
.composer-inner { padding: 6px 6px 6px 10px; border-radius: 14px }
.composer textarea { font-size: 14.5px; padding: 6px 4px } /* 14.5 prevents iOS zoom on focus */
.composer-send { width: 36px; height: 36px; flex-basis: 36px }
.composer-icon { width: 34px; height: 34px }
.composer-foot { font-size: 10.5px; margin-top: 4px; padding: 0 2px }
.composer-foot .ft-l { font-size: 10px }
.composer-foot .ft-r { max-width: 50%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.composer-palette { max-height: 240px }
.pal-cmd { flex-basis: 80px; font-size: 12px }
.pal-desc { font-size: 12px }
/* drawer takes the full screen on phone */
.drawer { width: 100%; box-shadow: none }
.drawer-tab { font-size: 11.5px; padding: 9px 4px }
.drawer-body { padding: 12px }
/* modal · safer padding so iOS notch + bottom bar don't clip */
.modal-backdrop { padding: 8px; align-items: flex-end }
.modal { max-height: 95vh; border-radius: 18px 18px 12px 12px }
.modal-head { padding: 12px 16px }
.modal-head h3 { font-size: 15px }
.modal-body { padding: 14px 16px }
.field { margin-bottom: 12px }
/* connect modal · trim hero on phones */
.cm-hero { padding: 20px 16px 14px }
.cm-glyph { width: 56px; height: 56px; margin-bottom: 10px }
.connect-modal h3 { font-size: 19px }
.cm-hero p { font-size: 13px; line-height: 1.5 }
.cm-balance { margin: 10px 14px 0; padding: 12px 14px }
.cm-tier-ladder { margin: 10px 14px 0; padding: 10px 12px }
.cm-tier { grid-template-columns: 60px 60px 1fr; gap: 6px; font-size: 12px }
.cm-tier .nm { font-size: 12px }
.cm-tier .amt { font-size: 11px }
.cm-tier .ft { font-size: 11.5px }
.cm-actions { padding: 14px 14px 10px }
.cm-foot { padding: 0 14px 16px; font-size: 10.5px; gap: 6px }
/* wizard · tighter on phone */
.wz-modal .modal-body { max-height: 56vh; padding: 0 16px 6px }
.wz-progress { padding: 0 14px 12px }
.wz-footer { padding: 12px 14px 14px }
/* tool-badge · smaller indent on phone */
.tool-badge { margin-left: 38px; font-size: 10.5px }
/* notice stack uses both edges on phone */
.notice { padding: 12px 12px 12px 14px; font-size: 13px }
}
/* iOS safe-area bottom for the composer */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
.composer { padding-bottom: calc(12px + env(safe-area-inset-bottom)) }
}
/* Extra-tight phone polish · keeps everything readable + tappable on a 360px screen */
@media (max-width: 420px) {
:root { --top-h: 50px }
.topbar { padding: 0 8px }
.brand-glyph { width: 24px; height: 24px; font-size: 13px }
.brand-name { font-size: 13.5px }
.brand-sub { display: none }
.built-on-base { padding: 3px }
.built-on-base span { display: none }
.topbar-right { gap: 3px }
.iconbtn { width: 32px; height: 32px }
.wallet-pill { padding: 5px 9px; font-size: 11.5px; gap: 5px }
.wallet-pill[data-network="base"]::before { width: 6px; height: 6px }
/* Composer · the most touched surface */
.composer-inner { padding: 5px 5px 5px 9px; border-radius: 12px }
.composer textarea { font-size: 15px; padding: 5px 3px; min-height: 32px } /* 15px = no iOS zoom on focus */
.composer-send { width: 34px; height: 34px; flex-basis: 34px }
.composer-icon { width: 32px; height: 32px }
.composer-foot { font-size: 9.5px; gap: 6px }
.composer-foot .ft-l { max-width: 60% }
.composer-foot .ft-r { max-width: 40%; font-size: 9.5px }
.kbd { font-size: 9.5px; padding: 1px 4px }
/* Messages · roomier text, less margin */
.chat-surface { padding: 12px 8px 4px }
.msg { gap: 8px }
.msg-avatar { width: 26px; height: 26px; flex-basis: 26px; font-size: 12px; border-radius: 8px }
.msg-bubble { max-width: 88%; font-size: 13.5px; padding: 8px 11px }
.msg-bubble code { font-size: 11px }
/* Welcome */
.welcome { padding: 5vh 8px 18px }
.welcome .hero-glyph { width: 56px; height: 56px; font-size: 28px }
.hero-base-dot { width: 16px; height: 16px }
.welcome h1 { font-size: 22px }
.welcome p.lead { font-size: 13px }
.welcome-tagline { font-size: 10.5px; padding: 4px 9px; flex-wrap: wrap }
/* Cards · the new grid layout handles narrow widths via the 520px rule below.
Keep value alignment-left fallback for older browsers without grid support. */
.result-card .rc-v { text-align: left }
/* Drawer tabs · shrink to fit 4 evenly */
.drawer-tab { font-size: 10.5px; padding: 8px 2px; letter-spacing: 0 }
/* Modals · slight bottom inset for iOS */
.modal-backdrop { padding: 6px }
.modal-body { padding: 12px 14px }
.modal-head { padding: 11px 14px }
.modal-head h3 { font-size: 14px }
.cm-tier { grid-template-columns: 56px 56px 1fr }
.cm-tier .ft { font-size: 11px }
/* Notice stack · use both edges */
.notice-stack { right: 6px; left: 6px }
.notice { padding: 11px 10px 11px 13px; font-size: 12.5px; grid-template-columns: 26px 1fr 20px }
.notice-icon { width: 26px; height: 26px }
.notice-icon svg { width: 14px; height: 14px }
/* Slash palette · taller items for thumb tap */
.pal-item { padding: 10px 9px }
.pal-cmd { flex-basis: 70px; font-size: 11.5px }
.pal-desc { font-size: 11.5px }
}
/* Landscape phone · keep composer high enough that the keyboard doesn't cover it */
@media (max-width: 900px) and (orientation: landscape) {
:root { --top-h: 44px; --composer-h: 80px }
.welcome { padding-top: 3vh }
}
/* ====================================================================
MODERN-FLOW POLISH · v2.5 (2026-05-19)
Layered on top of the v2 baseline · no behavioral change, only visual:
glass-blur on cards/modals, soft entrance, refined hover, gradient
accent on card heads, smoother focus rings, premium chip styling.
==================================================================== */
/* Smooth transition baseline · only on visual properties · respects motion pref */
.result-card, .followup-chip, .action-chip, .btn, .pal-item, .iconbtn, .wallet-pill,
.modal, .notice, .drawer, .composer-inner, .msg-bubble, .cm-tier, .drawer-tab {
transition: background-color .18s ease, border-color .18s ease,
color .18s ease, transform .22s cubic-bezier(.16,1,.3,1),
box-shadow .25s cubic-bezier(.16,1,.3,1);
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important }
}
/* Result cards · glass + soft shadow + accent strip on the head */
.result-card {
background: linear-gradient(180deg, rgba(20,20,26,.78), rgba(15,15,20,.86));
backdrop-filter: blur(12px) saturate(120%);
-webkit-backdrop-filter: blur(12px) saturate(120%);
border: 1px solid rgba(255,255,255,.08);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.04),
0 1px 2px rgba(0,0,0,.4),
0 10px 30px -10px rgba(0,0,0,.6);
position: relative;
animation: cardIn .35s cubic-bezier(.16,1,.3,1) both;
}
.result-card:hover {
border-color: rgba(255,255,255,.12);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.06),
0 1px 2px rgba(0,0,0,.4),
0 16px 40px -12px rgba(0,0,0,.7),
0 0 0 1px rgba(139,124,246,.05);
transform: translateY(-1px);
}
.result-card .rc-head {
background: linear-gradient(180deg, rgba(26,26,33,.65), rgba(20,20,26,.45));
border-bottom: 1px solid rgba(255,255,255,.05);
position: relative;
}
.result-card .rc-head::before {
content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
background: linear-gradient(180deg, var(--accent), var(--accent-2));
opacity: .65;
border-radius: 12px 0 0 0;
}
.result-card .rc-title {
background: linear-gradient(180deg, var(--txt-1) 30%, var(--txt-2) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
}
.result-card .rc-row {
border-top-color: rgba(255,255,255,.05);
align-items: baseline;
}
.result-card .rc-row:hover .rc-k { color: var(--txt-1) }
/* Card entrance · blur-to-sharp, brief lift */
@keyframes cardIn {
from { opacity: 0; transform: translateY(6px) scale(.985); filter: blur(4px) }
to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0) }
}
/* Message bubbles · subtle inner highlight + soft entrance */
.msg-row { animation: msgIn .32s cubic-bezier(.16,1,.3,1) both }
@keyframes msgIn {
from { opacity: 0; transform: translateY(4px) }
to { opacity: 1; transform: translateY(0) }
}
.msg-agent .msg-bubble {
background: linear-gradient(180deg, rgba(22,22,28,.92), rgba(16,16,22,.92));
box-shadow:
inset 0 1px 0 rgba(255,255,255,.04),
0 1px 2px rgba(0,0,0,.3);
}
.msg-user .msg-bubble {
background: linear-gradient(180deg, rgba(139,124,246,.22), rgba(139,124,246,.10));
box-shadow:
inset 0 1px 0 rgba(255,255,255,.06),
0 2px 12px -4px rgba(139,124,246,.30);
}
/* Followup + action chips · gradient border feel, soft glow on hover */
.followup-chip {
background: linear-gradient(180deg, rgba(0,82,255,.10), rgba(0,82,255,.04));
border-color: rgba(0,82,255,.30);
box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.followup-chip:hover {
background: linear-gradient(180deg, rgba(0,82,255,.22), rgba(0,82,255,.10));
border-color: rgba(44,111,255,.7);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.08),
0 0 0 3px rgba(0,82,255,.08),
0 4px 14px -4px rgba(0,82,255,.4);
transform: translateY(-1px);
}
.action-chip {
background: linear-gradient(180deg, rgba(38,38,47,.85), rgba(28,28,36,.85));
box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.action-chip:hover {
background: linear-gradient(180deg, rgba(0,82,255,.16), rgba(0,82,255,.06));
box-shadow:
inset 0 1px 0 rgba(255,255,255,.08),
0 0 0 3px rgba(0,82,255,.08),
0 4px 14px -4px rgba(0,82,255,.4);
transform: translateY(-1px);
}
.action-chip.is-primary {
background: linear-gradient(180deg, rgba(139,124,246,.22), rgba(139,124,246,.10));
border-color: rgba(139,124,246,.5);
color: var(--accent);
}
.action-chip.is-primary:hover {
background: linear-gradient(180deg, rgba(139,124,246,.32), rgba(139,124,246,.16));
border-color: var(--accent-2);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.08),
0 0 0 3px rgba(139,124,246,.10),
0 4px 14px -4px rgba(139,124,246,.4);
}
/* Composer · accent ring on focus + glass surface */
.composer {
background: linear-gradient(180deg, rgba(15,15,20,0), rgba(10,10,13,.92) 30%);
backdrop-filter: blur(10px);
}
.composer-inner {
background: linear-gradient(180deg, rgba(20,20,26,.85), rgba(15,15,20,.85));
backdrop-filter: blur(8px) saturate(120%);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.04),
0 2px 14px -2px rgba(0,0,0,.45);
}
.composer-inner:focus-within {
border-color: rgba(139,124,246,.45);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.06),
0 0 0 3px rgba(139,124,246,.10),
0 4px 18px -2px rgba(139,124,246,.25);
}
.composer-send {
background: linear-gradient(135deg, var(--accent-2) 0%, var(--accent) 100%);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.16),
0 4px 14px -2px rgba(139,124,246,.45);
}
.composer-send:hover:not(:disabled) {
filter: brightness(1.1);
transform: translateY(-1px);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.24),
0 6px 18px -2px rgba(139,124,246,.55);
}
/* Slash palette · refined hover state */
.pal-item {
border-radius: 8px;
margin: 2px 4px;
}
.pal-item:hover, .pal-item.is-active {
background: linear-gradient(90deg, rgba(139,124,246,.10), transparent 80%);
transform: translateX(2px);
}
/* Wallet pill · gradient accent on connected state */
.wallet-pill {
background: linear-gradient(180deg, rgba(28,28,36,.85), rgba(20,20,26,.85));
backdrop-filter: blur(6px);
box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.wallet-pill:hover {
border-color: rgba(139,124,246,.4);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.06),
0 0 0 3px rgba(139,124,246,.08);
}
/* Modal · stronger glass, refined entrance */
.modal-backdrop { backdrop-filter: blur(8px) }
.modal {
background: linear-gradient(180deg, rgba(22,22,28,.94), rgba(15,15,20,.94));
backdrop-filter: blur(20px) saturate(140%);
border: 1px solid rgba(255,255,255,.10);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.06),
0 24px 60px -12px rgba(0,0,0,.7),
0 0 0 1px rgba(0,0,0,.4);
}
/* Drawer · same glass treatment */
.drawer {
background: linear-gradient(180deg, rgba(15,15,20,.94), rgba(10,10,13,.96));
backdrop-filter: blur(16px) saturate(120%);
border-left: 1px solid rgba(255,255,255,.08);
}
.drawer-tab.is-active {
position: relative;
}
.drawer-tab.is-active::after {
content: ''; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px;
background: linear-gradient(90deg, var(--accent), var(--accent-2));
border-radius: 2px;
box-shadow: 0 0 8px rgba(139,124,246,.5);
}
/* Notices · gentler entrance + refined edge */
.notice {
background: linear-gradient(180deg, rgba(22,22,28,.94), rgba(15,15,20,.94));
backdrop-filter: blur(14px) saturate(120%);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.06),
0 8px 28px -6px rgba(0,0,0,.55);
animation: noticeIn .32s cubic-bezier(.16,1,.3,1) both;
}
@keyframes noticeIn {
from { opacity: 0; transform: translateX(8px) }
to { opacity: 1; transform: translateX(0) }
}
/* Buttons · subtle gradient + lift */
.btn {
background: linear-gradient(180deg, rgba(28,28,36,.6), rgba(20,20,26,.6));
backdrop-filter: blur(4px);
}
.btn:hover { transform: translateY(-1px) }
.btn-primary {
background: linear-gradient(135deg, var(--accent-2), var(--accent));
border-color: transparent;
color: #0a0a0d;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.16),
0 4px 14px -2px rgba(139,124,246,.45);
}
.btn-primary:hover {
filter: brightness(1.08);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.24),
0 6px 20px -2px rgba(139,124,246,.55);
}
/* Iconbtns (topbar) · soft hover */
.iconbtn:hover {
background: rgba(255,255,255,.04);
border-color: rgba(255,255,255,.10);
}
/* Connect-modal tier ladder · highlight on hover */
.cm-tier:hover {
border-color: rgba(139,124,246,.30);
background: linear-gradient(180deg, rgba(139,124,246,.06), rgba(139,124,246,.02));
}
/* Selection · brand-colored */
::selection { background: rgba(139,124,246,.32); color: var(--txt-1) }
/* Focus ring · unified, accessible */
:focus-visible {
outline: 2px solid rgba(139,124,246,.55);
outline-offset: 2px;
border-radius: 4px;
}
button:focus-visible, a:focus-visible, [role="button"]:focus-visible {
outline-offset: 3px;
}
/* Scrollbars · refined */
.chat-surface::-webkit-scrollbar-thumb,
.drawer-body::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
border-radius: 999px;
}
.chat-surface::-webkit-scrollbar-thumb:hover,
.drawer-body::-webkit-scrollbar-thumb:hover {
background: linear-gradient(180deg, var(--accent), var(--accent-2));
}
/* Skeleton shimmer · reusable utility class */
.shimmer {
position: relative; overflow: hidden;
background: var(--bg-2);
}
.shimmer::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(90deg,
transparent 0%,
rgba(255,255,255,.06) 50%,
transparent 100%);
animation: shimmer 1.4s linear infinite;
}
@keyframes shimmer {
0% { transform: translateX(-100%) }
100% { transform: translateX(100%) }
}
/* Brand glyph · subtle pulse on hover */
.brand:hover .brand-glyph {
filter: brightness(1.1);
box-shadow: 0 4px 16px rgba(139,124,246,.45), 0 0 0 4px rgba(139,124,246,.10);
}
/* Mobile: keep the polish but soften shadows for performance */
@media (max-width: 720px) {
.result-card, .modal, .drawer, .composer-inner, .notice {
backdrop-filter: blur(6px);
}
.result-card { animation-duration: .25s }
}
/* ====================================================================
RICHER CARD ROWS · icon + sub-text + accents + footer
Backwards-compatible · plain {k, v} rows still render the same.
==================================================================== */
.result-card .rc-row {
display: grid;
grid-template-columns: 1fr auto;
gap: 14px;
align-items: center;
padding: 10px 0;
}
.rc-k-col { display: flex; align-items: center; gap: 10px; min-width: 0 }
.rc-k-stack { display: flex; flex-direction: column; gap: 2px; min-width: 0 }
.rc-v-stack { display: flex; flex-direction: column; gap: 2px; text-align: right; align-items: flex-end; min-width: 0 }
.result-card .rc-k {
color: var(--txt-2);
font-weight: 500;
word-break: break-word;
}
.result-card .rc-v {
color: var(--txt-1);
font-weight: 600;
font-variant-numeric: tabular-nums;
word-break: break-word;
}
.rc-sub {
font-size: 11.5px;
color: var(--txt-3);
font-weight: 500;
letter-spacing: 0;
font-variant-numeric: tabular-nums;
}
.rc-icon {
width: 28px; height: 28px;
border-radius: 50%;
background: var(--bg-3);
border: 1px solid var(--line-1);
flex: 0 0 28px;
overflow: hidden;
display: grid; place-items: center;
box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.rc-icon img { width: 100%; height: 100%; object-fit: cover; display: block }
.rc-icon-emoji { font-size: 15px; line-height: 1 }
.rc-row.is-pos .rc-v { color: var(--pos) }
.rc-row.is-neg .rc-v { color: var(--neg) }
.rc-row.is-warn .rc-v { color: var(--warn) }
.rc-row.is-pos .rc-icon { border-color: rgba(74,222,128,.30); box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 0 0 1px rgba(74,222,128,.10) }
.rc-footer {
padding: 9px 14px;
background: linear-gradient(180deg, rgba(15,15,20,.5), rgba(10,10,13,.6));
border-top: 1px solid rgba(255,255,255,.04);
font-size: 11px;
color: var(--txt-3);
letter-spacing: .01em;
text-align: center;
}
/* Portfolio-specific tweak · slightly larger value column */
.rc-portfolio .rc-row { padding: 12px 0 }
.rc-portfolio .rc-k { font-family: var(--space); font-weight: 700; font-size: 13.5px; color: var(--txt-1); letter-spacing: .01em }
.rc-portfolio .rc-v { font-family: var(--space); font-size: 14px }
.rc-portfolio .rc-meta { font-weight: 700; color: var(--accent); font-family: var(--space); font-size: 13px; letter-spacing: 0 }
/* Mobile · keep the grid responsive · stack v below k for long values */
@media (max-width: 520px) {
.result-card .rc-row { grid-template-columns: 1fr; gap: 4px; padding: 9px 0 }
.rc-v-stack { text-align: left; align-items: flex-start }
.rc-icon { width: 24px; height: 24px; flex-basis: 24px }
.rc-sub { font-size: 11px }
/* Portfolio keeps the 2-column grid because value is short */
.rc-portfolio .rc-row { grid-template-columns: 1fr auto; gap: 10px }
.rc-portfolio .rc-v-stack { text-align: right; align-items: flex-end }
}
/* ====================================================================
/register WIZARD · 5-step modal
==================================================================== */
.reg-wz { max-width: 560px; width: 100% }
.reg-wz .modal-body { min-height: 280px; max-height: 60vh; padding: 18px 22px }
/* Preflight loader */
.reg-pf { display: flex; flex-direction: column; gap: 10px; align-items: center; justify-content: center; padding: 28px 8px }
.reg-spinner {
width: 28px; height: 28px;
border: 2px solid var(--line-2);
border-top-color: var(--accent);
border-radius: 50%;
animation: regSpin .9s linear infinite;
}
@keyframes regSpin { to { transform: rotate(360deg) } }
/* Preflight summary cards · 2x2 grid */
.reg-pf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px }
.reg-pf-card {
background: linear-gradient(180deg, rgba(20,20,26,.7), rgba(15,15,20,.7));
border: 1px solid var(--line-1);
border-radius: 12px;
padding: 12px 14px;
display: flex; flex-direction: column; gap: 4px;
}
.reg-pf-card.ok { border-color: rgba(74,222,128,.30); box-shadow: 0 0 0 1px rgba(74,222,128,.05) }
.reg-pf-card.gap { border-color: rgba(251,191,36,.30); box-shadow: 0 0 0 1px rgba(251,191,36,.05) }
.reg-pf-eyebrow { font-size: 10px; letter-spacing: .14em; color: var(--txt-3); text-transform: uppercase }
.reg-pf-val { font: 700 18px/1.1 var(--space); color: var(--txt-1); word-break: break-word }
.reg-pf-sub { font-size: 11.5px; color: var(--txt-3); line-height: 1.4 }
.reg-pf-card.ok .reg-pf-sub { color: var(--pos) }
.reg-pf-card.gap .reg-pf-sub { color: var(--warn) }
.reg-ready {
background: linear-gradient(180deg, rgba(74,222,128,.10), rgba(74,222,128,.04));
border: 1px solid rgba(74,222,128,.30);
border-radius: 10px;
padding: 12px 14px;
color: var(--pos);
font-weight: 600;
}
.reg-actions-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px }
.reg-actions-row .btn { font-size: 12.5px; padding: 8px 14px }
.reg-already, .reg-done, .reg-warn, .reg-err {
text-align: center; padding: 18px 6px;
display: flex; flex-direction: column; gap: 10px; align-items: center;
}
.reg-check {
width: 44px; height: 44px; border-radius: 50%;
background: linear-gradient(135deg, rgba(74,222,128,.30), rgba(74,222,128,.10));
border: 2px solid rgba(74,222,128,.5);
color: var(--pos); display: grid; place-items: center; font-size: 22px; font-weight: 800;
}
.reg-check.big { width: 60px; height: 60px; font-size: 28px }
.reg-warn-icon { font-size: 32px }
.reg-already h4, .reg-done h4, .reg-warn h4 { margin: 4px 0; font: 700 18px/1.2 var(--space) }
.reg-already p, .reg-done p, .reg-warn p { margin: 0; color: var(--txt-2); max-width: 420px; line-height: 1.5 }
.reg-warn-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 6px }
/* Step Q + input */
.reg-step { display: flex; flex-direction: column; gap: 10px; padding-top: 4px }
.reg-q { font: 600 16px/1.3 var(--space); margin: 0; color: var(--txt-1) }
.input.reg-input, .input.reg-textarea {
background: rgba(15,15,20,.6);
border: 1px solid var(--line-2);
border-radius: 10px;
padding: 11px 14px;
color: var(--txt-1);
font: 14px/1.5 var(--inter);
width: 100%;
transition: border-color .15s ease, box-shadow .15s ease;
}
.input.reg-textarea { min-height: 96px; resize: vertical; font: 13.5px/1.55 var(--inter) }
.input.reg-input:focus, .input.reg-textarea:focus {
outline: none;
border-color: rgba(139,124,246,.55);
box-shadow: 0 0 0 3px rgba(139,124,246,.12);
}
.reg-hint { min-height: 18px; font-size: 12px; color: var(--txt-3); transition: color .15s ease }
.reg-hint.good { color: var(--pos) }
.reg-hint.bad { color: var(--warn) }
/* Optional details · 4-field stack */
.reg-fields { display: flex; flex-direction: column; gap: 12px; margin-top: 4px }
.reg-field { display: flex; flex-direction: column; gap: 4px }
.reg-label {
display: flex; align-items: center; gap: 6px;
font: 600 12px/1 var(--inter);
letter-spacing: .02em;
color: var(--txt-2);
}
.reg-opt {
font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
color: var(--txt-3);
padding: 2px 6px;
background: rgba(255,255,255,.04);
border: 1px solid var(--line-1);
border-radius: 999px;
font-weight: 600;
}
.reg-field-hint {
font-size: 11.5px; color: var(--txt-3); line-height: 1.4;
}
.reg-input-wrap {
display: flex; align-items: center;
background: rgba(15,15,20,.6);
border: 1px solid var(--line-2);
border-radius: 10px;
transition: border-color .15s ease, box-shadow .15s ease;
}
.reg-input-wrap:focus-within {
border-color: rgba(139,124,246,.55);
box-shadow: 0 0 0 3px rgba(139,124,246,.12);
}
.reg-prefix {
padding: 0 10px 0 14px;
color: var(--txt-3);
font: 14px/1.5 var(--inter);
font-weight: 600;
}
.reg-input.reg-input-prefixed {
border: 0;
background: transparent;
padding-left: 0;
flex: 1;
}
.reg-input.reg-input-prefixed:focus { box-shadow: none; border: 0 }
/* Strategies wizard · list view + edit view + templates grid */
.strat-wz { max-width: 680px }
.strat-list { display: flex; flex-direction: column; gap: 10px; max-height: 60vh; overflow-y: auto; padding-right: 4px }
.strat-empty { text-align: center; padding: 20px 8px }
.strat-empty-icon { font-size: 40px; opacity: 0.6 }
.strat-empty h4 { margin: 8px 0 4px; font: 700 16px/1.2 var(--space) }
.strat-empty p { color: var(--txt-2); font-size: 13px }
.strat-row {
background: rgba(15,15,20,.6);
border: 1px solid var(--line-1);
border-radius: 12px;
padding: 12px 14px;
}
.strat-row-head { display: flex; align-items: center; gap: 12px; min-width: 0 }
.strat-row-meta { flex: 1; min-width: 0 }
.strat-row-name { font: 700 14px/1.2 var(--space); color: var(--txt-1); word-break: break-word }
.strat-row-sub { font-size: 11.5px; color: var(--txt-3); margin-top: 3px }
.strat-row-status {
flex: 0 0 28px; width: 28px; height: 28px;
border-radius: 50%; display: grid; place-items: center;
font-weight: 800; font-size: 14px;
}
.strat-row-status.is-ok { background: rgba(74,222,128,.14); color: var(--pos); border: 1px solid rgba(74,222,128,.35) }
.strat-row-status.is-err { background: rgba(251,113,133,.14); color: var(--neg); border: 1px solid rgba(251,113,133,.35) }
.strat-row-status.is-new { background: rgba(255,255,255,.04); color: var(--txt-3); border: 1px solid var(--line-1) }
.strat-row-result {
margin-top: 8px;
padding: 6px 10px;
background: rgba(0,0,0,.25);
border-radius: 6px;
font: 500 12px/1.4 var(--mono);
color: var(--txt-2);
word-break: break-word;
}
.strat-row-error {
margin-top: 6px;
padding: 6px 10px;
background: rgba(251,113,133,.06);
border: 1px solid rgba(251,113,133,.20);
border-radius: 6px;
font: 500 12px/1.4 var(--mono);
color: var(--neg);
word-break: break-word;
}
.strat-row-actions { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px }
.strat-toggle { display: inline-flex; align-items: center; cursor: pointer; flex: 0 0 36px }
.strat-toggle input { display: none }
.strat-toggle input:checked + .xp-premium-slot { background: linear-gradient(135deg, var(--accent-2), var(--accent)) }
.strat-toggle input:checked + .xp-premium-slot .xp-premium-knob { background: #0a0a0d; transform: translateX(16px) }
.strat-actions {
display: flex; gap: 8px; margin-top: 14px;
padding-top: 12px; border-top: 1px solid var(--line-1);
flex-wrap: wrap;
}
.strat-actions .btn { flex: 1; min-width: 100px }
.strat-templates { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px }
@media (max-width: 520px) { .strat-templates { grid-template-columns: 1fr } }
.strat-template {
background: linear-gradient(180deg, rgba(20,20,26,.7), rgba(15,15,20,.7));
border: 1px solid var(--line-1);
border-radius: 10px;
padding: 12px;
cursor: pointer;
transition: all .15s ease;
}
.strat-template:hover {
border-color: var(--accent);
transform: translateY(-1px);
box-shadow: 0 0 0 3px rgba(139,124,246,.06);
}
.strat-template-name { font: 700 13px/1.2 var(--space); color: var(--txt-1) }
.strat-template-desc { font-size: 12px; color: var(--txt-2); margin-top: 4px; line-height: 1.4 }
.strat-template-meta { font-size: 10.5px; color: var(--txt-3); margin-top: 6px; letter-spacing: .04em }
.strat-code {
background: #06060a;
border: 1px solid var(--line-2);
border-radius: 10px;
padding: 10px 12px;
font: 500 12px/1.55 var(--mono);
color: var(--txt-1);
width: 100%;
min-height: 200px;
resize: vertical;
white-space: pre;
overflow: auto;
tab-size: 2;
}
.strat-code:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(139,124,246,.10) }
/* Copy-to-clipboard inline buttons (in card values) */
.copy-btn {
display: inline-flex; align-items: center;
padding: 3px 9px;
background: rgba(255,255,255,.05);
border: 1px solid var(--line-2);
border-radius: 6px;
color: var(--txt-1);
font: 600 12px/1 var(--mono);
cursor: pointer;
transition: all .15s ease;
}
.copy-btn:hover {
background: rgba(139,124,246,.10);
border-color: rgba(139,124,246,.35);
color: var(--accent);
}
.copy-btn.is-copied {
background: rgba(74,222,128,.14);
border-color: rgba(74,222,128,.35);
color: var(--pos);
}
/* X-post wizard · Premium toggle */
.xp-premium-toggle {
display: flex; align-items: center; gap: 10px;
padding: 10px 12px;
background: linear-gradient(180deg, rgba(28,28,36,.6), rgba(20,20,26,.6));
border: 1px solid var(--line-1);
border-radius: 10px;
cursor: pointer;
margin-bottom: 12px;
transition: border-color .15s ease;
}
.xp-premium-toggle:hover { border-color: rgba(139,124,246,.30) }
.xp-premium-toggle input { display: none }
.xp-premium-slot {
flex: 0 0 36px;
width: 36px; height: 20px;
background: var(--bg-3);
border-radius: 999px;
position: relative;
transition: background .2s ease;
}
.xp-premium-knob {
position: absolute;
top: 2px; left: 2px;
width: 16px; height: 16px;
background: var(--txt-2);
border-radius: 50%;
transition: transform .2s cubic-bezier(.16,1,.3,1), background .2s ease;
}
.xp-premium-toggle input:checked + .xp-premium-slot {
background: linear-gradient(135deg, var(--accent-2), var(--accent));
}
.xp-premium-toggle input:checked + .xp-premium-slot .xp-premium-knob {
background: #0a0a0d;
transform: translateX(16px);
}
.xp-premium-lbl { font-size: 12.5px; color: var(--txt-2); line-height: 1.4 }
.xp-premium-toggle input:checked ~ .xp-premium-lbl { color: var(--txt-1) }
/* X-post wizard · per-tweet stack */
.xp-parts { display: flex; flex-direction: column; gap: 10px; margin-top: 6px }
.xp-part {
background: rgba(15,15,20,.5);
border: 1px solid var(--line-1);
border-radius: 10px;
padding: 8px 10px;
}
.xp-part-h {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 4px;
font-size: 11px;
color: var(--txt-3);
letter-spacing: .04em;
}
.xp-part-no { font-weight: 700; text-transform: uppercase; letter-spacing: .14em }
.xp-part-count {
font-family: var(--mono); font-weight: 600;
font-variant-numeric: tabular-nums;
}
.xp-part-count.near { color: var(--warn) }
.xp-part-count.over { color: var(--neg) }
.xp-part-del {
background: transparent; border: 0;
color: var(--txt-3); font-size: 16px;
width: 22px; height: 22px;
border-radius: 6px;
cursor: pointer; line-height: 1;
}
.xp-part-del:hover { background: rgba(251,113,133,.10); color: var(--neg) }
.xp-text { min-height: 64px !important; margin: 0 !important }
/* Avatar URL preview row */
.reg-image-row {
display: flex; align-items: center; gap: 10px;
}
.reg-image-preview {
width: 40px; height: 40px;
border-radius: 10px;
object-fit: cover;
border: 1px solid var(--line-2);
background: var(--bg-3);
flex: 0 0 40px;
}
/* Capability chips · multi-select */
.reg-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 0 }
.reg-chip {
padding: 8px 14px;
border-radius: 999px;
background: linear-gradient(180deg, rgba(28,28,36,.85), rgba(20,20,26,.85));
border: 1px solid var(--line-2);
color: var(--txt-2);
font: 600 12.5px/1 var(--inter);
cursor: pointer;
transition: all .15s ease;
}
.reg-chip:hover { color: var(--txt-1); border-color: rgba(139,124,246,.35) }
.reg-chip.is-on {
background: linear-gradient(180deg, rgba(139,124,246,.20), rgba(139,124,246,.10));
border-color: var(--accent);
color: var(--accent);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.08),
0 0 0 3px rgba(139,124,246,.08);
}
/* Review */
.reg-review {
background: rgba(15,15,20,.5);
border: 1px solid var(--line-1);
border-radius: 10px;
padding: 4px 14px;
}
.reg-r-row {
display: grid; grid-template-columns: 120px 1fr;
gap: 12px; padding: 10px 0;
border-top: 1px solid var(--line-1);
font-size: 13px;
}
.reg-r-row:first-child { border-top: 0 }
.reg-r-k { color: var(--txt-3); font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; padding-top: 2px }
.reg-r-v { color: var(--txt-1); word-break: break-word; line-height: 1.45 }
.reg-r-v.mono { font: 500 12.5px/1.4 var(--mono) }
.reg-r-v a { color: var(--accent) }
.reg-tag {
display: inline-block; padding: 3px 9px;
background: rgba(139,124,246,.14); color: var(--accent-2);
border: 1px solid rgba(139,124,246,.30); border-radius: 999px;
font: 600 11.5px/1 var(--inter);
margin: 2px 4px 2px 0;
}
.reg-warn-strip {
margin-top: 12px;
background: linear-gradient(180deg, rgba(251,191,36,.10), rgba(251,191,36,.04));
border: 1px solid rgba(251,191,36,.25);
border-radius: 10px;
padding: 10px 14px;
color: var(--warn);
font-size: 12.5px; line-height: 1.5;
}
.reg-warn-strip b { color: var(--txt-1) }
.reg-status { min-height: 24px; margin-top: 8px }
.reg-status-msg {
padding: 9px 12px; border-radius: 8px;
font-size: 12.5px; line-height: 1.4;
border: 1px solid var(--line-2);
}
.reg-status-msg.info { background: rgba(0,82,255,.08); border-color: rgba(0,82,255,.25); color: var(--base-2) }
.reg-status-msg.warn { background: rgba(251,191,36,.08); border-color: rgba(251,191,36,.30); color: var(--warn) }
.reg-status-msg.bad { background: rgba(251,113,133,.10); border-color: rgba(251,113,133,.30); color: var(--neg) }
/* /post wizard · category cards + deadline chips + type cards */
.post-cats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px }
.post-cat {
display: flex; align-items: center; gap: 10px; padding: 10px 12px;
background: linear-gradient(180deg, rgba(20,20,26,.7), rgba(15,15,20,.7));
border: 1px solid var(--line-1);
border-radius: 10px;
cursor: pointer;
text-align: left;
transition: all .15s ease;
color: var(--txt-1);
}
.post-cat:hover { border-color: rgba(139,124,246,.30); transform: translateY(-1px) }
.post-cat.is-on {
background: linear-gradient(180deg, rgba(139,124,246,.16), rgba(139,124,246,.06));
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(139,124,246,.08);
}
.post-cat-icon { font-size: 22px; line-height: 1; flex: 0 0 28px }
.post-cat-body { display: flex; flex-direction: column; gap: 2px; min-width: 0 }
.post-cat-name { font: 700 13px/1.1 var(--space); color: var(--txt-1) }
.post-cat-desc { font-size: 11px; color: var(--txt-3); line-height: 1.3 }
.post-deadline-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px }
.post-deadline {
padding: 7px 14px;
background: linear-gradient(180deg, rgba(28,28,36,.85), rgba(20,20,26,.85));
border: 1px solid var(--line-2);
border-radius: 999px;
color: var(--txt-2);
font: 600 12px/1 var(--inter);
cursor: pointer;
transition: all .15s ease;
}
.post-deadline:hover { color: var(--txt-1); border-color: rgba(139,124,246,.35) }
.post-deadline.is-on {
background: linear-gradient(180deg, rgba(139,124,246,.20), rgba(139,124,246,.10));
border-color: var(--accent);
color: var(--accent);
box-shadow: 0 0 0 3px rgba(139,124,246,.08);
}
.post-type-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 2px }
.post-type {
padding: 10px 12px;
background: linear-gradient(180deg, rgba(20,20,26,.7), rgba(15,15,20,.7));
border: 1px solid var(--line-1);
border-radius: 10px;
cursor: pointer;
text-align: left;
color: var(--txt-2);
font-size: 11.5px;
line-height: 1.4;
transition: all .15s ease;
}
.post-type b { display: block; color: var(--txt-1); font: 600 13px/1.2 var(--space); margin-bottom: 4px }
.post-type:hover { border-color: rgba(139,124,246,.30) }
.post-type.is-on {
background: linear-gradient(180deg, rgba(139,124,246,.14), rgba(139,124,246,.06));
border-color: var(--accent);
color: var(--txt-1);
box-shadow: 0 0 0 3px rgba(139,124,246,.08);
}
/* Comment-wizard · prior comments preview */
.cmt-thread {
margin-top: 8px;
display: flex; flex-direction: column; gap: 6px;
max-height: 130px; overflow-y: auto;
}
.cmt-thread-row {
background: rgba(0,0,0,.2);
border: 1px solid var(--line-1);
border-radius: 8px;
padding: 7px 10px;
}
.cmt-thread-from {
font: 600 10.5px/1 var(--inter);
letter-spacing: .04em;
color: var(--txt-3);
text-transform: uppercase;
margin-bottom: 3px;
}
.cmt-thread-body {
font-size: 12px;
color: var(--txt-2);
line-height: 1.4;
}
/* Live task alert · custom notice variant */
.notice-task-live {
border-color: rgba(139,124,246,.35) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.06),
0 8px 28px -6px rgba(139,124,246,.20),
0 0 0 1px rgba(139,124,246,.08);
animation: liveTaskPulse 1s ease-out;
}
@keyframes liveTaskPulse {
0% { transform: translateX(20px); opacity: 0 }
50% { box-shadow: 0 0 0 8px rgba(139,124,246,.25), 0 8px 28px -6px rgba(139,124,246,.30) }
100% { transform: translateX(0); opacity: 1 }
}
.notice-task-live .notice-body { display: flex; flex-direction: column; gap: 4px }
.notice-task-live .notice-title { color: var(--txt-1); font-weight: 600; font-size: 13px }
.notice-task-live .notice-title b { color: var(--accent) }
.notice-task-live .notice-msg {
color: var(--txt-2);
font-size: 12px;
line-height: 1.4;
margin-top: 2px;
}
.notice-task-live .notice-actions {
display: flex; gap: 6px; margin-top: 6px;
flex-wrap: wrap;
}
/* Quick-tip card · premium pill that sits BELOW the composer-foot.
Replaces the v1 thin ticker · same height budget (~34px) so the
composer offset (--composer-h) remains valid. */
:root { --qt-h: 34px }
.composer .qt-card {
display: flex; align-items: center; gap: 10px;
height: var(--qt-h);
padding: 0 4px 0 0;
margin: 6px -2px -2px;
font-size: 12px;
color: rgba(244,244,246,.72);
line-height: 1.4;
cursor: default;
border-radius: 12px;
background: linear-gradient(180deg, rgba(139,124,246,.05), rgba(139,124,246,.02));
border: 1px solid rgba(139,124,246,.16);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-shadow: 0 4px 14px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.04);
transition: opacity .24s ease, transform .24s cubic-bezier(.16,1,.3,1), border-color .2s ease, background .2s ease;
overflow: hidden;
position: relative;
}
.qt-card::before {
content: '';
position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
background: linear-gradient(180deg, var(--accent-2), var(--accent));
border-radius: 12px 0 0 12px;
}
.qt-card.is-clickable { cursor: pointer }
.qt-card.is-clickable:hover {
border-color: rgba(139,124,246,.36);
background: linear-gradient(180deg, rgba(139,124,246,.08), rgba(139,124,246,.04));
}
.qt-card.is-clickable:hover .qt-text code {
background: rgba(139,124,246,.18); border-color: rgba(139,124,246,.40); color: var(--accent);
}
.qt-card.is-out { opacity: 0; transform: translateY(2px) }
.qt-card.is-in { opacity: 1; transform: translateY(0) }
.qt-lead {
display: inline-flex; align-items: center; gap: 6px;
flex: 0 0 auto;
padding-left: 12px;
}
.qt-dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 8px rgba(139,124,246,.55);
animation: qtDotPulse 2s ease-in-out infinite;
}
@keyframes qtDotPulse {
0%, 100% { opacity: 1; transform: scale(1) }
50% { opacity: .50; transform: scale(.80) }
}
.qt-label {
font: 600 10px/1 var(--mono, 'JetBrains Mono', monospace);
text-transform: uppercase; letter-spacing: .14em;
color: var(--accent-2);
}
.qt-text {
flex: 1; min-width: 0;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
padding-right: 4px;
}
.qt-text code {
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.10);
border-radius: 4px;
padding: 1px 5px;
font: 500 11px/1.4 var(--mono, 'JetBrains Mono', monospace);
color: rgba(244,244,246,.85);
transition: all .15s ease;
}
.qt-fake-chip {
display: inline-block; padding: 1px 7px;
background: rgba(0,82,255,.10); color: var(--base-2);
border: 1px solid rgba(0,82,255,.25); border-radius: 999px;
font-size: 10.5px; font-weight: 600;
}
.qt-actions {
display: inline-flex; align-items: center; gap: 2px;
flex: 0 0 auto;
padding-right: 4px;
}
.qt-pager {
font: 500 10.5px/1 var(--mono, 'JetBrains Mono', monospace);
color: rgba(244,244,246,.40);
padding: 0 6px;
letter-spacing: .04em;
}
.qt-btn {
flex: 0 0 24px;
height: 24px; width: 24px;
display: inline-flex; align-items: center; justify-content: center;
background: transparent; border: 0;
color: rgba(244,244,246,.50);
border-radius: 6px;
cursor: pointer; line-height: 1;
transition: all .12s ease;
}
.qt-btn svg { width: 12px; height: 12px }
.qt-btn:hover { background: rgba(255,255,255,.06); color: rgba(244,244,246,.95) }
.qt-x:hover { background: rgba(248,113,113,.10); color: #fca5a5 }
/* When user dismisses the ticker, reclaim the height */
html.qt-hidden { --qt-h: 0px }
html.qt-hidden .qt-card { display: none }
/* Mobile · keep it compact but readable */
@media (max-width: 720px) {
.composer .qt-card { font-size: 11.5px }
.qt-label { display: none }
.qt-prev { display: none } /* only show next on small screens to save room */
.qt-pager { padding: 0 4px; font-size: 10px }
}
@media (max-width: 480px) {
.qt-pager { display: none }
}
/* --composer-h already accounts for the ticker · see :root at the top of the file */
/* ============================================================
DESKTOP SIDEBAR MODE · ≥1280px the drawer pins as a permanent
right rail and the chat surface shifts left to make room.
Below 1280px the existing drawer overlay behavior stays.
============================================================ */
@media (min-width: 1280px) {
:root { --drawer-w: 360px }
/* When the drawer is mounted (not hidden), shift the rest of the app */
body:has(.drawer:not([hidden])) .chat-surface,
body:has(.drawer:not([hidden])) .composer {
right: var(--drawer-w);
}
body:has(.drawer:not([hidden])) .topbar {
padding-right: calc(var(--drawer-w) + 16px);
}
.drawer:not([hidden]) {
box-shadow:
-1px 0 0 rgba(255,255,255,.04),
-16px 0 36px rgba(0,0,0,.35);
animation: none; /* slide animation is jarring when always-pinned */
}
/* Hide the inbox-toggle icon when the sidebar is permanent · the X close
button inside the drawer is enough. */
body:has(.drawer:not([hidden])) #inbox-toggle { display: none }
}
@media (max-width: 720px) {
:root { --qt-h: 24px }
}
@media (max-width: 520px) {
.composer .qt-ticker { font-size: 10.5px; padding: 0 4px 0 8px; gap: 6px }
.qt-x { flex-basis: 18px; height: 18px; width: 18px; font-size: 16px }
.qt-icon { font-size: 11px; flex-basis: 12px }
}
/* ====================================================================
Account / Wallet modal · premium redesign
==================================================================== */
.acct-modal {
max-width: 520px;
width: 100%;
padding: 0;
position: relative;
}
.acct-modal .modal-close {
position: absolute; top: 12px; right: 12px; z-index: 2;
}
.acct-hero {
padding: 24px 22px 18px;
display: flex; align-items: center; gap: 14px;
background: linear-gradient(135deg, rgba(139,124,246,.10) 0%, rgba(0,82,255,.06) 100%);
border-bottom: 1px solid var(--line-1);
}
.acct-avatar {
width: 56px; height: 56px;
border-radius: 16px;
object-fit: cover;
border: 1px solid var(--line-2);
box-shadow: 0 4px 14px rgba(0,0,0,.4);
}
.acct-avatar-fallback {
background: linear-gradient(135deg, var(--accent-2), var(--accent));
display: grid; place-items: center;
font: 800 24px/1 var(--space);
color: #0a0a0d;
}
.acct-hero-text { flex: 1; min-width: 0 }
.acct-name {
font: 700 19px/1.2 var(--space);
color: var(--txt-1);
letter-spacing: .01em;
word-break: break-word;
}
.acct-handle {
font-size: 12.5px;
color: var(--txt-3);
margin-top: 2px;
font-family: var(--mono);
}
.acct-tier-row {
display: flex; align-items: center; gap: 8px;
margin-top: 8px;
flex-wrap: wrap;
}
.acct-tier-pill {
display: inline-flex; align-items: center; gap: 6px;
padding: 4px 10px;
background: rgba(255,255,255,.06);
border: 1px solid var(--line-2);
border-radius: 999px;
font: 700 11px/1 var(--inter);
letter-spacing: .04em;
text-transform: uppercase;
color: var(--txt-2);
}
.acct-tier-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: #71717a }
.acct-tier-pill.is-free .dot { background: #71717a }
.acct-tier-pill.is-bronze { color: #cd7f32; border-color: rgba(205,127,50,.40) } .acct-tier-pill.is-bronze .dot { background: #cd7f32 }
.acct-tier-pill.is-silver { color: #c0c0c0; border-color: rgba(192,192,192,.40) } .acct-tier-pill.is-silver .dot { background: #c0c0c0 }
.acct-tier-pill.is-gold { color: #fbbf24; border-color: rgba(251,191,36,.45) } .acct-tier-pill.is-gold .dot { background: #fbbf24 }
.acct-tier-pill.is-platinum { color: #e5e4e2; border-color: rgba(229,228,226,.45) } .acct-tier-pill.is-platinum .dot { background: #e5e4e2 }
.acct-tier-desc {
font-size: 11.5px;
color: var(--txt-3);
}
.acct-modal .modal-body { padding: 0 22px 18px }
.acct-section {
margin-top: 18px;
padding: 14px 16px;
background: rgba(255,255,255,.02);
border: 1px solid var(--line-1);
border-radius: 12px;
}
.acct-section-warn {
background: linear-gradient(180deg, rgba(251,191,36,.06), rgba(251,191,36,.02));
border-color: rgba(251,191,36,.30);
}
.acct-section-h {
font: 700 10.5px/1 var(--inter);
letter-spacing: .14em;
text-transform: uppercase;
color: var(--txt-3);
margin-bottom: 10px;
display: flex; align-items: center; justify-content: space-between;
}
.acct-edit-btn {
display: inline-flex; align-items: center; gap: 4px;
padding: 4px 10px;
font: 700 10.5px/1 var(--inter);
letter-spacing: .04em;
text-transform: uppercase;
color: var(--accent);
background: linear-gradient(180deg, rgba(139,124,246,.12), rgba(139,124,246,.04));
border: 1px solid rgba(139,124,246,.30);
border-radius: 999px;
cursor: pointer;
transition: all .15s ease;
}
.acct-edit-btn:hover {
background: linear-gradient(180deg, rgba(139,124,246,.22), rgba(139,124,246,.10));
border-color: var(--accent);
transform: translateY(-1px);
box-shadow: 0 0 0 3px rgba(139,124,246,.08);
}
.acct-edit-btn svg { stroke: currentColor }
.ep-modal { max-width: 540px }
.acct-p {
font-size: 12.5px;
color: var(--txt-2);
line-height: 1.5;
margin: 0 0 10px;
}
.acct-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-bottom: 10px;
}
.acct-cell {
padding: 10px 12px;
background: rgba(0,0,0,.25);
border: 1px solid var(--line-1);
border-radius: 8px;
}
.acct-cell-k {
font-size: 10px;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--txt-3);
margin-bottom: 4px;
}
.acct-cell-v {
font: 700 14.5px/1.1 var(--space);
color: var(--txt-1);
font-variant-numeric: tabular-nums;
word-break: break-word;
}
.acct-cell-v.mono { font: 600 12px/1.2 var(--mono); color: var(--txt-2) }
.acct-cell-v.dim { color: var(--txt-3); font-weight: 500 }
.acct-cell-pos { color: var(--pos) }
.acct-section .field { margin-bottom: 12px }
.acct-section .field:last-child { margin-bottom: 0 }
.acct-section .field label {
display: block;
font: 700 10.5px/1 var(--inter);
letter-spacing: .12em;
text-transform: uppercase;
color: var(--txt-3);
margin-bottom: 6px;
}
.acct-hint {
font-size: 11px;
color: var(--txt-3);
margin-top: 4px;
}
.acct-tg-ok {
padding: 8px 12px;
background: rgba(74,222,128,.10);
border: 1px solid rgba(74,222,128,.30);
border-radius: 8px;
font-size: 12.5px;
color: var(--pos);
}
.acct-modal .cta-row {
display: flex; gap: 8px; margin-top: 18px;
padding-top: 14px; border-top: 1px solid var(--line-1);
}
.acct-modal .cta-row .btn { flex: 1 }
.btn.btn-danger {
background: linear-gradient(180deg, rgba(251,113,133,.12), rgba(251,113,133,.04));
border-color: rgba(251,113,133,.30);
color: var(--neg);
}
.btn.btn-danger:hover {
background: linear-gradient(180deg, rgba(251,113,133,.22), rgba(251,113,133,.08));
border-color: var(--neg);
}
@media (max-width: 520px) {
.acct-grid { grid-template-columns: 1fr }
.acct-hero { padding: 18px 16px 14px }
.acct-modal .modal-body { padding: 0 16px 14px }
.acct-name { font-size: 17px }
.acct-avatar { width: 48px; height: 48px; border-radius: 14px }
.acct-avatar-fallback { font-size: 20px }
}
/* Mobile · stack preflight grid + tighten review */
@media (max-width: 520px) {
.reg-pf-grid { grid-template-columns: 1fr }
.reg-r-row { grid-template-columns: 1fr; gap: 2px; padding: 8px 0 }
.reg-r-k { padding-top: 0 }
.post-cats { grid-template-columns: 1fr }
.post-type-row { grid-template-columns: 1fr }
}
/* ====================================================================
v2.6 TERMINAL POLISH · 2026-05-20 late evening
Layered on top of the v2 baseline · entrance animations, orbital rings,
gradient sweeps, staggered grids, refined composer focus. No HTML/JS
changes required, all CSS.
==================================================================== */
/* Hero glyph · orbital rings around the E */
.welcome .hero-glyph::before,
.welcome .hero-glyph::after {
content: ''; position: absolute;
border-radius: 50%;
pointer-events: none;
}
.welcome .hero-glyph::before {
inset: -14px;
border: 1.5px solid rgba(139,124,246,.30);
border-top-color: rgba(139,124,246,.85);
border-right-color: rgba(139,124,246,.55);
animation: glyphRingOuter 4.8s linear infinite;
}
.welcome .hero-glyph::after {
inset: -26px;
border: 1px dashed rgba(0,82,255,.45);
border-top-color: rgba(0,82,255,.75);
animation: glyphRingInner 7.2s linear infinite reverse;
}
.welcome .hero-glyph { overflow: visible } /* keep rings visible outside the glyph box */
@keyframes glyphRingOuter { to { transform: rotate(360deg) } }
@keyframes glyphRingInner { to { transform: rotate(360deg) } }
@media (prefers-reduced-motion: reduce) {
.welcome .hero-glyph::before,
.welcome .hero-glyph::after { animation: none }
}
/* Welcome heading · subtle gradient sweep */
.welcome h1 {
background: linear-gradient(135deg, var(--txt-1) 0%, var(--txt-1) 40%, var(--accent-2) 50%, var(--txt-1) 60%, var(--txt-1) 100%);
background-size: 220% 100%;
background-position: 220% 0;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: headingSweep 7s ease-in-out infinite;
}
@keyframes headingSweep {
0%, 100% { background-position: 220% 0 }
50% { background-position: -20% 0 }
}
/* Live price pills above the welcome subhead · injected by JS into #active-banner */
.welcome-prices {
display: flex; gap: 8px; justify-content: center;
margin: -10px auto 22px; flex-wrap: wrap;
}
.welcome-px {
display: inline-flex; align-items: center; gap: 6px;
padding: 5px 12px;
background: rgba(139,124,246,.10);
border: 1px solid rgba(139,124,246,.30);
border-radius: 999px;
font: 700 11.5px/1 var(--inter);
letter-spacing: .04em;
color: var(--accent-2);
font-variant-numeric: tabular-nums;
animation: priceIn .55s cubic-bezier(.16,1,.3,1) both;
}
.welcome-px.ax { background: rgba(0,82,255,.10); border-color: rgba(0,82,255,.30); color: var(--base-2) }
.welcome-px:nth-child(2) { animation-delay: .12s }
.welcome-px b { color: var(--txt-1); font-weight: 800 }
.welcome-px em { font-style: normal; font-weight: 600 }
.welcome-px em.up { color: var(--pos) }
.welcome-px em.down { color: var(--neg) }
.welcome-px .pdot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--pos);
animation: priceDotPulse 2s ease-in-out infinite;
}
@keyframes priceDotPulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(74,222,128,.5) }
50% { box-shadow: 0 0 0 6px rgba(74,222,128,0) }
}
@keyframes priceIn {
from { opacity: 0; transform: translateY(6px) scale(.96) }
to { opacity: 1; transform: translateY(0) scale(1) }
}
/* Honest live-data proof row (logged-out safe) + share button */
.welcome-proof {
display: flex; gap: 8px; justify-content: center; align-items: center;
flex-wrap: wrap; margin: -12px auto 18px;
}
.welcome-proof:empty { display: none; }
.welcome-proof .wp-live {
display: inline-flex; align-items: center; gap: 6px;
font: 700 11px/1 var(--inter); letter-spacing: .06em; text-transform: uppercase;
color: var(--txt-3);
}
.welcome-proof .wp-live .pdot {
width: 6px; height: 6px; border-radius: 50%; background: var(--pos);
animation: priceDotPulse 2s ease-in-out infinite;
}
.welcome-proof .wp-stat {
display: inline-flex; align-items: center; gap: 6px;
padding: 5px 12px; border-radius: 999px;
background: var(--bg-1); border: 1px solid var(--line-1);
font: 600 11.5px/1 var(--inter); color: var(--txt-2);
cursor: pointer; transition: border-color .15s, color .15s;
font-variant-numeric: tabular-nums;
}
.welcome-proof .wp-stat:hover { border-color: var(--accent); color: var(--txt-1); }
.welcome-proof .wp-stat b { color: var(--accent); font-weight: 800; }
.welcome-proof .wp-venue { color: var(--txt-3); font-weight: 600; }
.welcome-share-row { display: flex; justify-content: center; margin: 0 auto 26px; }
.welcome-share {
display: inline-flex; align-items: center; gap: 7px;
padding: 7px 16px; border-radius: 999px;
background: transparent; border: 1px solid var(--line-1);
color: var(--txt-2); font: 600 12.5px/1 var(--inter);
cursor: pointer; transition: border-color .15s, color .15s, background .15s;
}
.welcome-share:hover { border-color: var(--accent); color: var(--accent); background: rgba(139,124,246,.06); }
.welcome-share svg { opacity: .85; }
/* Suggestion grid · staggered entrance */
.suggest-grid .suggest {
animation: suggestIn .5s cubic-bezier(.16,1,.3,1) both;
}
.suggest-grid .suggest:nth-child(1) { animation-delay: .08s }
.suggest-grid .suggest:nth-child(2) { animation-delay: .14s }
.suggest-grid .suggest:nth-child(3) { animation-delay: .20s }
.suggest-grid .suggest:nth-child(4) { animation-delay: .26s }
.suggest-grid .suggest:nth-child(5) { animation-delay: .32s }
.suggest-grid .suggest:nth-child(6) { animation-delay: .38s }
@keyframes suggestIn {
from { opacity: 0; transform: translateY(10px) }
to { opacity: 1; transform: translateY(0) }
}
/* Suggest cards · richer hover + gradient bottom border */
.suggest {
position: relative;
overflow: hidden;
transition: transform .22s cubic-bezier(.16,1,.3,1), border-color .2s, box-shadow .25s;
}
.suggest::after {
content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
background: linear-gradient(90deg, transparent, var(--accent), transparent);
transform: translateX(-100%);
transition: transform .5s ease;
}
.suggest:hover::after { transform: translateX(0) }
.suggest.base::after { background: linear-gradient(90deg, transparent, var(--base-2), transparent) }
.suggest:hover {
transform: translateY(-3px);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.06),
0 0 0 1px rgba(139,124,246,.10),
0 14px 30px -10px rgba(0,0,0,.6);
}
.suggest.base:hover {
box-shadow:
inset 0 1px 0 rgba(255,255,255,.06),
0 0 0 1px rgba(0,82,255,.12),
0 14px 30px -10px rgba(0,0,0,.6);
}
/* Active deliverable banner · urgent badge pulses */
.active-row.urgent {
animation: urgentPulse 2.2s ease-in-out infinite;
}
@keyframes urgentPulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(251,113,133,0), inset 0 1px 0 rgba(255,255,255,.04) }
50% { box-shadow: 0 0 0 4px rgba(251,113,133,.10), inset 0 1px 0 rgba(255,255,255,.04) }
}
/* Composer · glowing focus state + animated underline */
.composer-inner {
position: relative;
}
.composer-inner::after {
content: ''; position: absolute; left: 14px; right: 14px; bottom: 0; height: 1.5px;
background: linear-gradient(90deg, transparent, var(--accent), var(--base-2), transparent);
transform: scaleX(0);
transform-origin: 50% 50%;
transition: transform .4s cubic-bezier(.16,1,.3,1);
border-radius: 2px;
pointer-events: none;
}
.composer-inner:focus-within::after { transform: scaleX(1) }
.composer-inner:focus-within {
border-color: rgba(139,124,246,.55);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.06),
0 0 0 3px rgba(139,124,246,.12),
0 6px 24px -2px rgba(139,124,246,.28);
}
/* Composer send button · animated send icon on hover */
.composer-send svg {
transition: transform .2s cubic-bezier(.16,1,.3,1);
}
.composer-send:hover:not(:disabled) svg { transform: translate(2px, -2px) }
/* Slash palette · smooth slide + blur in */
.composer-palette {
transform-origin: bottom center;
animation: paletteIn .26s cubic-bezier(.16,1,.3,1);
backdrop-filter: blur(18px) saturate(140%);
-webkit-backdrop-filter: blur(18px) saturate(140%);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.06),
0 -12px 32px -4px rgba(0,0,0,.55);
}
@keyframes paletteIn {
from { opacity: 0; transform: translateY(10px) scale(.985); filter: blur(6px) }
to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0) }
}
/* Streaming caret · smoother breathing */
.stream-caret {
background: linear-gradient(180deg, var(--accent-2), var(--accent));
animation: caretBreath 1.1s ease-in-out infinite;
}
@keyframes caretBreath {
0%, 100% { opacity: .35; transform: scaleY(1) }
50% { opacity: 1; transform: scaleY(1.1) }
}
/* Wallet pill · tier-aware accent ring on hover (live tier read from data attr) */
.wallet-pill[data-tier="bronze"]:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 3px rgba(205,127,50,.18) }
.wallet-pill[data-tier="silver"]:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 3px rgba(192,192,192,.18) }
.wallet-pill[data-tier="gold"]:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 3px rgba(251,191,36,.22) }
.wallet-pill[data-tier="platinum"]:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 3px rgba(229,228,226,.22) }
/* Topbar brand glyph · gentle idle float */
.topbar .brand-glyph { animation: brandFloat 5.5s ease-in-out infinite }
@keyframes brandFloat {
0%, 100% { transform: translateY(0) }
50% { transform: translateY(-1.5px) }
}
/* Inbox icon · subtle indicator dot pulse when there are new items */
.iconbtn-dot {
animation: inboxDotPulse 1.6s ease-in-out infinite;
}
@keyframes inboxDotPulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(139,124,246,.6) }
50% { box-shadow: 0 0 0 6px rgba(139,124,246,0) }
}
/* Message bubble entrance · refined timing on top of msgIn */
.msg-row { animation-duration: .28s }
.msg-row.msg-agent .msg-bubble { transform-origin: 0% 50% }
.msg-row.msg-user .msg-bubble { transform-origin: 100% 50% }
/* Typing dots · brand-accent gradient */
.typing-dots span {
background: linear-gradient(135deg, var(--accent-2), var(--accent));
}
/* Mobile · trim animation surface area to keep perf snappy */
@media (max-width: 720px) {
.welcome .hero-glyph::before, .welcome .hero-glyph::after { animation-duration: 8s }
.topbar .brand-glyph { animation: none }
}
/* ===================================================================== */
/* v2.7 · BRAND GLYPH + AMBIENT BACKGROUND · 2026-05-20 */
/* The agent PFP everywhere = SmartCodedBot studio mark (img). The CSS */
/* gradients on .brand-glyph / .hero-glyph / .msg-avatar / .cm-glyph used */
/* to render the 'E' character · now they wrap the ![]()
with a subtle */
/* halo and let the SVG fill the box. */
/* ===================================================================== */
/* Brand glyph in topbar · transparent box wrapping the SVG */
.brand-glyph {
background: transparent;
box-shadow: 0 6px 14px rgba(139,124,246,.20);
overflow: hidden;
}
.brand-glyph img {
width: 100%; height: 100%; display: block;
border-radius: inherit;
filter: drop-shadow(0 2px 4px rgba(0,0,0,.35));
}
.brand-glyph::after { display: none } /* Base dot is inside the SVG now */
/* Hero glyph on welcome · larger, with halo + the existing orbital rings */
.welcome .hero-glyph {
background: transparent;
box-shadow:
0 24px 64px -8px rgba(139,124,246,.35),
0 0 0 1px rgba(139,124,246,.20);
overflow: visible; /* keep the orbital rings outside the box */
}
.welcome .hero-glyph img { object-fit: contain; padding: 6px;
width: 100%; height: 100%; display: block;
border-radius: inherit;
position: relative; z-index: 1;
}
/* old hero-base-dot is unused now · hide if any cached HTML still renders one */
.hero-base-dot { display: none }
/* Agent message avatar · circle the studio mascot PFP */
.msg-avatar {
background: linear-gradient(135deg, rgba(255,122,24,0.18), rgba(0,82,255,0.14));
overflow: hidden;
padding: 0;
border: 1px solid rgba(255,122,24,0.28);
box-shadow: 0 2px 10px rgba(255,122,24,0.18);
}
.msg-avatar img {
width: 100%; height: 100%; display: block;
border-radius: inherit;
object-fit: cover;
object-position: center top; /* mascot face is in the top half */
}
/* Connect-modal hero glyph · keep the same look as welcome */
.cm-glyph { overflow: visible }
.cm-glyph img {
width: 100%; height: 100%; display: block;
border-radius: 16px;
filter: drop-shadow(0 14px 30px rgba(139,124,246,.35));
}
/* ----- AMBIENT ORBS · drifting gradient blobs behind the terminal ----- */
.ambient-orbs {
position: fixed; inset: 0;
z-index: 0;
pointer-events: none;
overflow: hidden;
}
.ambient-orbs .orb {
position: absolute;
width: 420px; height: 420px;
border-radius: 50%;
filter: blur(80px);
opacity: .35;
will-change: transform;
}
.ambient-orbs .orb-1 {
top: -120px; left: -80px;
background: radial-gradient(circle, rgba(139,124,246,.55), transparent 65%);
animation: orbDrift1 22s ease-in-out infinite;
}
.ambient-orbs .orb-2 {
bottom: -160px; right: -100px;
background: radial-gradient(circle, rgba(0,82,255,.45), transparent 65%);
animation: orbDrift2 28s ease-in-out infinite;
}
.ambient-orbs .orb-3 {
top: 38%; left: 48%;
width: 280px; height: 280px;
background: radial-gradient(circle, rgba(255,191,77,.30), transparent 70%);
animation: orbDrift3 34s ease-in-out infinite;
opacity: .22;
}
@keyframes orbDrift1 {
0%, 100% { transform: translate(0, 0) scale(1) }
50% { transform: translate(60px, 40px) scale(1.08) }
}
@keyframes orbDrift2 {
0%, 100% { transform: translate(0, 0) scale(1) }
50% { transform: translate(-50px, -30px) scale(1.05) }
}
@keyframes orbDrift3 {
0%, 100% { transform: translate(-50%, -50%) scale(1) }
50% { transform: translate(calc(-50% + 40px), calc(-50% - 20px)) scale(1.12) }
}
/* Background layers BEHIND everything · do NOT touch the layout components.
Topbar / chat-surface / composer / drawer / modal already have their own
correct z-index in earlier rules · overriding them here broke positioning. */
#particles, .ambient-orbs { z-index: -1 }
@media (prefers-reduced-motion: reduce) {
.ambient-orbs .orb { animation: none }
}
@media (max-width: 720px) {
.ambient-orbs .orb { filter: blur(60px); opacity: .25 }
.ambient-orbs .orb-3 { display: none }
}
/* ===================================================================== */
/* v3.0 · PREMIUM REDESIGN · 2026-05-20 */
/* VISUAL-ONLY overrides. Does NOT touch position / display / layout to */
/* avoid the v2.7 regression. Focus: typography, surfaces, contrast, */
/* depth · the things that make a terminal feel premium. */
/* ===================================================================== */
/* Refined body backdrop · two-stop vertical gradient + subtle warmth */
body {
background:
radial-gradient(1200px 800px at 50% -100px, rgba(139,124,246,.08), transparent 60%),
radial-gradient(900px 600px at 90% 110%, rgba(0,82,255,.06), transparent 60%),
linear-gradient(180deg, #0a0a0d 0%, #0c0a14 100%);
background-attachment: fixed;
}
/* Premium topbar · stronger glass, sharper border, refined brand */
.topbar {
background: linear-gradient(180deg, rgba(10,10,13,.78), rgba(10,10,13,.55));
backdrop-filter: blur(22px) saturate(160%);
-webkit-backdrop-filter: blur(22px) saturate(160%);
border-bottom: 1px solid rgba(255,255,255,.06);
box-shadow: 0 1px 0 rgba(255,255,255,.04), 0 8px 32px rgba(0,0,0,.32);
}
.brand-name {
background: linear-gradient(135deg, #fff 0%, #d4d4d8 70%);
-webkit-background-clip: text; background-clip: text;
color: transparent;
letter-spacing: -.01em;
}
.brand-sub { color: rgba(244,244,246,.45); font-size: 10.5px; letter-spacing: .18em }
.brand-glyph { box-shadow: 0 6px 20px rgba(139,124,246,.32), 0 0 0 1px rgba(255,255,255,.08) }
/* Wallet pill · refined glass */
.wallet-pill {
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.10);
backdrop-filter: blur(12px);
box-shadow: 0 4px 14px rgba(0,0,0,.20);
transition: all .22s cubic-bezier(.16,1,.3,1);
}
.wallet-pill:hover {
background: rgba(255,255,255,.07);
border-color: rgba(255,255,255,.18);
transform: translateY(-1px);
}
/* WELCOME · premium hero. Bigger glyph, refined hierarchy. */
.welcome { padding: 56px 24px 64px; max-width: 920px }
.welcome .hero-glyph {
width: 88px; height: 88px;
border-radius: 24px;
box-shadow:
0 32px 64px -16px rgba(139,124,246,.42),
0 0 0 1px rgba(139,124,246,.15),
0 0 0 8px rgba(139,124,246,.04);
}
.welcome h1 {
font: 800 44px/1.05 var(--space);
letter-spacing: -.025em;
margin: 18px 0 14px;
background: linear-gradient(135deg, #ffffff 0%, #A78BFA 55%, #ffffff 100%);
background-size: 200% 100%;
-webkit-background-clip: text; background-clip: text;
color: transparent;
animation: heroGradient 8s ease-in-out infinite;
}
@keyframes heroGradient {
0%, 100% { background-position: 0% 50% }
50% { background-position: 100% 50% }
}
.welcome .lead {
font-size: 16.5px;
line-height: 1.62;
color: rgba(244,244,246,.72);
max-width: 640px;
margin: 0 auto 20px;
letter-spacing: -.005em;
}
.welcome .lead b { color: var(--accent-2); font-weight: 600 }
/* Welcome tagline · gentle premium row */
.welcome-tagline {
display: inline-flex; align-items: center; gap: 12px;
padding: 8px 14px;
background: rgba(255,255,255,.02);
border: 1px solid rgba(255,255,255,.06);
border-radius: 999px;
font-size: 13px;
color: rgba(244,244,246,.65);
}
.welcome-tagline .dot-sep { color: rgba(244,244,246,.30) }
/* Welcome price pills · refined glass */
.welcome-prices {
display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
margin: 14px 0 32px;
}
.welcome-px {
display: inline-flex; align-items: center; gap: 8px;
padding: 7px 14px;
background: rgba(139,124,246,.07);
border: 1px solid rgba(139,124,246,.22);
border-radius: 999px;
font-size: 12.5px;
color: var(--accent-2);
backdrop-filter: blur(8px);
transition: all .2s ease;
}
.welcome-px:hover { transform: translateY(-1px); border-color: rgba(139,124,246,.4) }
.welcome-px .pdot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: pdotPulse 2s ease-in-out infinite }
.welcome-px b { color: #fff; font-weight: 600; font-family: var(--mono, 'JetBrains Mono'), monospace }
.welcome-px em { font-style: normal; font-size: 11px; padding: 1px 6px; border-radius: 4px; font-weight: 600 }
.welcome-px em.up { color: #4ade80; background: rgba(74,222,128,.08) }
.welcome-px em.down { color: #f87171; background: rgba(248,113,113,.08) }
.welcome-px.ax { background: rgba(0,82,255,.07); border-color: rgba(0,82,255,.22); color: var(--base-2) }
.welcome-px.ax .pdot { background: var(--base) }
@keyframes pdotPulse {
0%, 100% { opacity: 1; transform: scale(1) }
50% { opacity: .55; transform: scale(.85) }
}
/* SUGGEST GRID · glass cards with premium hover */
.suggest-grid {
display: grid; gap: 14px; margin-top: 8px;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
max-width: 800px; margin-left: auto; margin-right: auto;
}
.suggest {
position: relative;
text-align: left;
padding: 18px 18px 16px;
background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
border: 1px solid rgba(255,255,255,.08);
border-radius: 16px;
backdrop-filter: blur(12px) saturate(140%);
-webkit-backdrop-filter: blur(12px) saturate(140%);
box-shadow: 0 8px 24px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.04);
transition: all .26s cubic-bezier(.16,1,.3,1);
overflow: hidden;
cursor: pointer;
}
.suggest::before {
content: ''; position: absolute; inset: 0;
background: linear-gradient(135deg, rgba(139,124,246,.0) 0%, rgba(139,124,246,.10) 100%);
opacity: 0; transition: opacity .26s ease;
pointer-events: none;
}
.suggest.base::before { background: linear-gradient(135deg, rgba(0,82,255,.0) 0%, rgba(0,82,255,.10) 100%) }
.suggest:hover {
transform: translateY(-2px);
border-color: rgba(139,124,246,.35);
box-shadow: 0 14px 36px rgba(0,0,0,.28), 0 0 0 1px rgba(139,124,246,.20), inset 0 1px 0 rgba(255,255,255,.06);
}
.suggest.base:hover { border-color: rgba(0,82,255,.40); box-shadow: 0 14px 36px rgba(0,0,0,.28), 0 0 0 1px rgba(0,82,255,.25), inset 0 1px 0 rgba(255,255,255,.06) }
.suggest:hover::before { opacity: 1 }
.suggest .s-cmd {
font: 600 12px/1 var(--mono, 'JetBrains Mono'), monospace;
color: var(--accent-2);
margin-bottom: 8px;
letter-spacing: .02em;
}
.suggest.base .s-cmd { color: var(--base-2) }
.suggest .s-title {
font: 600 15px/1.3 var(--space);
color: #fff;
margin-bottom: 4px;
letter-spacing: -.005em;
}
.suggest .s-sub {
font: 400 13px/1.4 var(--inter, system-ui);
color: rgba(244,244,246,.55);
}
/* MESSAGE BUBBLES · refined depth */
.msg-bubble {
background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018));
border: 1px solid rgba(255,255,255,.07);
box-shadow: 0 6px 18px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.03);
border-radius: 16px;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.msg-user .msg-bubble {
background: linear-gradient(180deg, rgba(139,124,246,.10), rgba(139,124,246,.04));
border-color: rgba(139,124,246,.22);
}
.msg-avatar {
box-shadow: 0 4px 10px rgba(139,124,246,.22), 0 0 0 1px rgba(255,255,255,.08);
}
/* COMPOSER · premium glass with refined focus */
.composer {
background: linear-gradient(0deg, rgba(10,10,13,.95) 30%, rgba(10,10,13,.55) 100%);
backdrop-filter: blur(14px);
border-top: 1px solid rgba(255,255,255,.04);
}
.composer-inner {
background: rgba(20,20,26,.78);
border: 1px solid rgba(255,255,255,.08);
backdrop-filter: blur(18px) saturate(160%);
-webkit-backdrop-filter: blur(18px) saturate(160%);
box-shadow: 0 10px 32px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,.04);
border-radius: 18px;
transition: all .22s ease;
}
.composer-inner:focus-within {
border-color: rgba(139,124,246,.45);
box-shadow:
0 16px 40px rgba(0,0,0,.46),
0 0 0 4px rgba(139,124,246,.10),
inset 0 1px 0 rgba(255,255,255,.06);
}
#composer-input { color: #fff }
#composer-input::placeholder { color: rgba(244,244,246,.40) }
.composer-send {
background: linear-gradient(135deg, var(--accent-2), var(--accent));
border: none;
box-shadow: 0 4px 14px rgba(139,124,246,.40), 0 0 0 1px rgba(255,255,255,.10);
transition: all .22s ease;
}
.composer-send:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(139,124,246,.55), 0 0 0 1px rgba(255,255,255,.14);
}
.composer-send:disabled { opacity: .45; cursor: not-allowed }
.composer-foot { color: rgba(244,244,246,.40); font-size: 11.5px }
.kbd {
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.10);
color: rgba(244,244,246,.75);
font: 500 10.5px/1 var(--mono, 'JetBrains Mono'), monospace;
padding: 2px 6px;
border-radius: 5px;
}
/* SLASH PALETTE · refined dropdown */
.composer-palette {
background: rgba(20,20,26,.92);
border: 1px solid rgba(255,255,255,.10);
backdrop-filter: blur(24px) saturate(180%);
-webkit-backdrop-filter: blur(24px) saturate(180%);
box-shadow: 0 24px 48px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.06);
border-radius: 16px;
}
.pal-item { transition: all .15s ease; border-radius: 10px }
.pal-item:hover, .pal-item.is-active {
background: linear-gradient(90deg, rgba(139,124,246,.14), rgba(139,124,246,.06));
}
.pal-cmd {
color: var(--accent-2);
font: 600 13px/1 var(--mono, 'JetBrains Mono'), monospace;
}
/* DRAWER · refined sidebar */
.drawer {
background: linear-gradient(180deg, rgba(15,15,20,.96), rgba(10,10,14,.96));
backdrop-filter: blur(24px) saturate(150%);
-webkit-backdrop-filter: blur(24px) saturate(150%);
border-left: 1px solid rgba(255,255,255,.06);
box-shadow: -20px 0 60px rgba(0,0,0,.50);
}
/* MODAL · refined glass */
.modal-backdrop {
background: rgba(5,5,8,.72);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
}
.modal, .connect-modal {
background: linear-gradient(180deg, rgba(20,20,26,.96), rgba(14,14,18,.96));
border: 1px solid rgba(255,255,255,.08);
box-shadow: 0 30px 80px rgba(0,0,0,.60), 0 0 0 1px rgba(255,255,255,.04), inset 0 1px 0 rgba(255,255,255,.06);
}
/* CHIP / ACTION BUTTONS · refined */
.action-chip, .followup-chip {
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.10);
transition: all .2s ease;
}
.action-chip:hover, .followup-chip:hover {
background: rgba(139,124,246,.10);
border-color: rgba(139,124,246,.30);
transform: translateY(-1px);
}
.action-chip.is-primary {
background: linear-gradient(135deg, var(--accent-2), var(--accent));
border: none;
color: #0a0a0d;
font-weight: 600;
box-shadow: 0 4px 14px rgba(139,124,246,.32);
}
.action-chip.is-primary:hover {
box-shadow: 0 6px 20px rgba(139,124,246,.48);
transform: translateY(-1px);
}
/* CARD · the result cards from tools */
.card {
background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
border: 1px solid rgba(255,255,255,.08);
backdrop-filter: blur(10px);
border-radius: 14px;
box-shadow: 0 8px 24px rgba(0,0,0,.22);
}
/* SCROLLBAR · premium thin */
.chat-thread::-webkit-scrollbar { width: 8px }
.chat-thread::-webkit-scrollbar-track { background: transparent }
.chat-thread::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, rgba(139,124,246,.18), rgba(139,124,246,.10));
border-radius: 4px;
border: 2px solid transparent;
background-clip: padding-box;
}
.chat-thread::-webkit-scrollbar-thumb:hover { background: rgba(139,124,246,.32) }
/* Mobile tuning */
@media (max-width: 720px) {
.welcome { padding: 36px 18px 48px }
.welcome h1 { font-size: 34px }
.welcome .lead { font-size: 14.5px }
.suggest-grid { grid-template-columns: 1fr 1fr; gap: 10px }
.suggest { padding: 14px 14px 12px }
.suggest .s-title { font-size: 13.5px }
.suggest .s-sub { font-size: 12px }
.composer-inner { border-radius: 14px }
}
@media (max-width: 480px) {
.suggest-grid { grid-template-columns: 1fr }
}
/* ===================================================================== */
/* v3.1 · PREMIUM TG LINK CARD · 2026-05-20 */
/* Used in: /link chat result, account modal Settings, edit-profile. */
/* Three states · empty / has-code / is-linked. Copy button + countdown.*/
/* ===================================================================== */
.tg-card {
background: linear-gradient(180deg, rgba(55,187,254,.06), rgba(0,125,187,.025));
border: 1px solid rgba(55,187,254,.18);
border-radius: 16px;
padding: 16px;
backdrop-filter: blur(12px) saturate(140%);
-webkit-backdrop-filter: blur(12px) saturate(140%);
box-shadow: 0 10px 28px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.04);
display: flex; flex-direction: column; gap: 14px;
margin: 8px 0;
animation: tgCardIn .32s cubic-bezier(.16,1,.3,1);
}
@keyframes tgCardIn { from { opacity: 0; transform: translateY(4px) } to { opacity: 1; transform: translateY(0) } }
.tg-card-head {
display: flex; align-items: center; gap: 12px;
}
.tg-card-icon {
width: 40px; height: 40px; flex-shrink: 0;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 4px 14px rgba(0,125,187,.32), 0 0 0 1px rgba(255,255,255,.06);
}
.tg-card-icon svg { width: 100%; height: 100%; display: block }
.tg-card-head-text { flex: 1; min-width: 0 }
.tg-card-title {
font: 600 15px/1.2 var(--space, 'Space Grotesk', sans-serif);
color: #fff;
letter-spacing: -.005em;
}
.tg-card-sub {
font-size: 12.5px;
color: rgba(244,244,246,.55);
margin-top: 2px;
line-height: 1.4;
}
.tg-card-sub b { color: rgba(244,244,246,.85); font-weight: 600 }
.tg-card-badge {
flex-shrink: 0;
font: 600 10.5px/1 var(--mono, 'JetBrains Mono', monospace);
text-transform: uppercase; letter-spacing: .1em;
padding: 4px 8px;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.10);
color: rgba(244,244,246,.65);
border-radius: 6px;
}
.tg-card-badge.ok { background: rgba(74,222,128,.10); border-color: rgba(74,222,128,.30); color: #86efac }
.tg-card-badge.warn { background: rgba(139,124,246,.10); border-color: rgba(139,124,246,.30); color: var(--accent-2) }
.tg-card-badge.is-expired { background: rgba(248,113,113,.10); border-color: rgba(248,113,113,.30); color: #fca5a5 }
/* Code pill + copy button row */
.tg-code-row {
display: flex; align-items: stretch; gap: 8px;
background: rgba(0,0,0,.32);
border: 1px solid rgba(255,255,255,.08);
border-radius: 12px;
padding: 4px;
}
.tg-code-pill {
flex: 1; min-width: 0;
display: flex; align-items: center;
padding: 0 14px;
font: 600 14.5px/1 var(--mono, 'JetBrains Mono', monospace);
color: var(--accent-2);
letter-spacing: .02em;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
user-select: all;
-webkit-user-select: all;
}
.tg-copy-btn {
flex-shrink: 0;
display: inline-flex; align-items: center; gap: 6px;
padding: 8px 14px;
background: linear-gradient(135deg, var(--accent-2), var(--accent));
border: none;
border-radius: 9px;
color: #0a0a0d;
font: 600 13px/1 var(--inter, system-ui);
cursor: pointer;
transition: all .2s ease;
box-shadow: 0 4px 10px rgba(139,124,246,.32);
position: relative;
}
.tg-copy-btn:hover {
transform: translateY(-1px);
box-shadow: 0 6px 14px rgba(139,124,246,.45);
}
.tg-copy-btn:active { transform: translateY(0) }
.tg-copy-btn svg { width: 14px; height: 14px }
.tg-copy-btn .ico-check { display: none }
.tg-copy-btn.is-copied {
background: linear-gradient(135deg, #4ade80, #22c55e);
color: #0a0a0d;
box-shadow: 0 4px 10px rgba(74,222,128,.32);
}
.tg-copy-btn.is-copied .ico-copy { display: none }
.tg-copy-btn.is-copied .ico-check { display: inline-block }
/* Action button row */
.tg-card-actions {
display: flex; flex-wrap: wrap; gap: 8px;
}
.tg-btn {
display: inline-flex; align-items: center; gap: 6px;
padding: 9px 14px;
border-radius: 10px;
font: 600 13px/1 var(--inter, system-ui);
cursor: pointer;
transition: all .2s ease;
text-decoration: none;
border: 1px solid transparent;
}
.tg-btn svg { width: 14px; height: 14px }
.tg-btn-primary {
background: linear-gradient(135deg, #37bbfe, #007dbb);
color: #fff;
box-shadow: 0 4px 12px rgba(0,125,187,.32);
}
.tg-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,125,187,.48) }
.tg-btn-ghost {
background: rgba(255,255,255,.04);
border-color: rgba(255,255,255,.10);
color: rgba(244,244,246,.85);
}
.tg-btn-ghost:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18) }
.tg-btn-danger {
background: rgba(248,113,113,.08);
border-color: rgba(248,113,113,.22);
color: #fca5a5;
}
.tg-btn-danger:hover { background: rgba(248,113,113,.14); border-color: rgba(248,113,113,.35); color: #fecaca }
.tg-card-foot {
font-size: 11.5px;
color: rgba(244,244,246,.40);
padding-top: 4px;
border-top: 1px dashed rgba(255,255,255,.06);
margin-top: -2px;
}
/* Linked state · subtle green tint */
.tg-card.is-linked {
background: linear-gradient(180deg, rgba(74,222,128,.06), rgba(34,197,94,.025));
border-color: rgba(74,222,128,.22);
}
/* Mobile */
@media (max-width: 480px) {
.tg-code-row { flex-direction: column; padding: 6px }
.tg-code-pill { padding: 10px 12px; font-size: 13.5px; text-align: center }
.tg-copy-btn { justify-content: center; padding: 10px }
.tg-card-actions .tg-btn { flex: 1; justify-content: center }
}
/* ===================================================================== */
/* v3.2 · STATUS PILL + DROPDOWN · 2026-05-20 */
/* Topbar health indicator. Polls /api/public/status every 30s. */
/* ===================================================================== */
.status-pill {
display: inline-flex; align-items: center; gap: 7px;
padding: 5px 11px 5px 10px;
background: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.10);
border-radius: 999px;
color: rgba(244,244,246,.75);
font: 500 12px/1 var(--space, 'Space Grotesk', sans-serif);
letter-spacing: .02em;
cursor: pointer;
transition: all .2s cubic-bezier(.16,1,.3,1);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.status-pill:hover { transform: translateY(-1px); background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16) }
.status-dot {
width: 7px; height: 7px;
border-radius: 50%;
background: rgba(244,244,246,.40);
position: relative;
flex-shrink: 0;
}
.status-dot::after {
content: ''; position: absolute; inset: -3px;
border-radius: 50%;
background: inherit;
opacity: .35;
animation: statusPulse 2s ease-in-out infinite;
}
@keyframes statusPulse {
0%, 100% { opacity: 0; transform: scale(1) }
50% { opacity: .35; transform: scale(1.4) }
}
.status-dot[data-status="live"] { background: #4ade80; box-shadow: 0 0 8px rgba(74,222,128,.50) }
.status-dot[data-status="degraded"] { background: #fbbf24; box-shadow: 0 0 8px rgba(251,191,36,.50) }
.status-dot[data-status="down"] { background: #f87171; box-shadow: 0 0 8px rgba(248,113,113,.55) }
.status-dot[data-status="unknown"] { background: rgba(244,244,246,.30); animation: none }
.status-pill[data-status="live"] { border-color: rgba(74,222,128,.22) }
.status-pill[data-status="degraded"] { border-color: rgba(251,191,36,.28); background: rgba(251,191,36,.06) }
.status-pill[data-status="down"] { border-color: rgba(248,113,113,.32); background: rgba(248,113,113,.08); color: #fca5a5 }
.status-lbl { letter-spacing: .04em; text-transform: lowercase }
/* Hide label text on tight screens · dot + tooltip alone is enough */
@media (max-width: 560px) {
.status-pill { padding: 5px 8px }
.status-lbl { display: none }
}
/* ===== Dropdown ===== */
.status-dropdown {
position: fixed;
top: calc(var(--top-h, 56px) + 8px);
right: 16px;
width: 320px; max-width: calc(100vw - 32px);
z-index: 50;
background: linear-gradient(180deg, rgba(20,20,26,.96), rgba(14,14,18,.96));
border: 1px solid rgba(255,255,255,.10);
border-radius: 14px;
box-shadow: 0 24px 56px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.06);
backdrop-filter: blur(24px) saturate(160%);
-webkit-backdrop-filter: blur(24px) saturate(160%);
padding: 12px;
animation: statusDropdownIn .22s cubic-bezier(.16,1,.3,1);
overflow: hidden;
}
@keyframes statusDropdownIn {
from { opacity: 0; transform: translateY(-6px) scale(.98) }
to { opacity: 1; transform: translateY(0) scale(1) }
}
.status-dropdown-head {
padding: 4px 6px 10px;
border-bottom: 1px solid rgba(255,255,255,.06);
margin-bottom: 8px;
}
.status-dropdown-title {
font: 600 14px/1.2 var(--space, 'Space Grotesk', sans-serif);
color: #fff;
letter-spacing: -.005em;
}
.status-dropdown-meta {
font-size: 11.5px;
color: rgba(244,244,246,.45);
margin-top: 4px;
}
.status-dropdown-body {
display: flex; flex-direction: column; gap: 2px;
}
.status-row {
display: flex; align-items: center; gap: 10px;
padding: 8px 6px;
border-radius: 8px;
font-size: 13px;
transition: background .15s ease;
}
.status-row:hover { background: rgba(255,255,255,.03) }
.status-row-icon {
flex-shrink: 0; width: 14px;
text-align: center;
font-size: 12px;
line-height: 1;
}
.status-row-name {
flex: 1; min-width: 0;
color: rgba(244,244,246,.85);
letter-spacing: -.005em;
}
.status-row-meta {
flex-shrink: 0;
font: 500 11px/1 var(--mono, 'JetBrains Mono', monospace);
color: rgba(244,244,246,.45);
letter-spacing: .03em;
}
.status-row--live .status-row-icon { color: #4ade80 }
.status-row--degraded .status-row-icon { color: #fbbf24 }
.status-row--down .status-row-icon { color: #f87171 }
.status-dropdown-foot {
margin-top: 8px;
padding-top: 8px;
border-top: 1px dashed rgba(255,255,255,.06);
display: flex; justify-content: space-between;
font-size: 10.5px;
color: rgba(244,244,246,.40);
}
.status-dropdown-foot a {
color: var(--accent-2);
text-decoration: none;
font: 500 10.5px/1 var(--mono, 'JetBrains Mono', monospace);
}
.status-dropdown-foot a:hover { color: var(--accent) }
/* ===================================================================== */
/* v3.5 · ADDRESS COPY CHIPS · 2026-05-20 */
/* Re-added cleanly · purely visual styles for [data-copy] chips already */
/* wired by the global copy handler in tg-link-card.js. */
/* ===================================================================== */
.addr-copy {
display: inline-block;
font-family: var(--mono, 'JetBrains Mono', monospace);
font-size: 11px;
color: var(--accent-2);
background: rgba(139,124,246,.06);
border: 1px solid rgba(139,124,246,.18);
border-radius: 5px;
padding: 1px 6px;
cursor: pointer;
transition: all .15s ease;
user-select: all;
-webkit-user-select: all;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: baseline;
}
.addr-copy:hover {
background: rgba(139,124,246,.14);
border-color: rgba(139,124,246,.36);
color: var(--accent);
}
.addr-copy.is-copied {
background: rgba(74,222,128,.12);
border-color: rgba(74,222,128,.40);
color: #86efac;
}
.addr-link {
color: var(--accent-2);
text-decoration: none;
border-bottom: 1px dashed rgba(139,124,246,.30);
transition: all .15s ease;
}
.addr-link:hover { color: var(--accent); border-bottom-color: rgba(139,124,246,.60) }
.rc-meta .copy-btn { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.10) }
.rc-meta .copy-btn:hover { background: rgba(139,124,246,.14); border-color: rgba(139,124,246,.30) }
/* ===================================================================== */
/* v3.3 · SETTINGS PANEL · 2026-05-20 (re-added cleanly) */
/* /settings opens a centered modal with sections. No layout overrides */
/* on existing components; only this modal's own selectors + a small */
/* density utility on the html element. */
/* ===================================================================== */
.settings-backdrop {
position: fixed; inset: 0;
z-index: 100;
background: rgba(5,5,8,.72);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
display: flex; align-items: center; justify-content: center;
padding: 24px;
animation: settingsBackIn .2s ease;
}
@keyframes settingsBackIn { from { opacity: 0 } to { opacity: 1 } }
.settings-modal {
width: min(560px, 100%);
max-height: calc(100vh - 48px);
background: linear-gradient(180deg, rgba(22,22,28,.98), rgba(14,14,18,.98));
border: 1px solid rgba(255,255,255,.10);
border-radius: 18px;
box-shadow: 0 32px 80px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.04), inset 0 1px 0 rgba(255,255,255,.06);
display: flex; flex-direction: column;
overflow: hidden;
animation: settingsModalIn .26s cubic-bezier(.16,1,.3,1);
}
@keyframes settingsModalIn {
from { opacity: 0; transform: translateY(8px) scale(.985) }
to { opacity: 1; transform: translateY(0) scale(1) }
}
.settings-head {
display: flex; align-items: center; justify-content: space-between;
padding: 18px 20px 16px;
border-bottom: 1px solid rgba(255,255,255,.06);
}
.settings-head h2 {
margin: 0;
font: 700 18px/1 var(--space, 'Space Grotesk', sans-serif);
letter-spacing: -.01em;
color: #fff;
}
.settings-close {
width: 32px; height: 32px;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.08);
border-radius: 8px;
color: rgba(244,244,246,.65);
cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
transition: all .2s ease;
}
.settings-close:hover { background: rgba(248,113,113,.10); border-color: rgba(248,113,113,.30); color: #fca5a5 }
.settings-close svg { width: 14px; height: 14px }
.settings-body {
flex: 1; min-height: 0;
overflow-y: auto;
padding: 12px 20px 20px;
}
.settings-body::-webkit-scrollbar { width: 6px }
.settings-body::-webkit-scrollbar-thumb { background: rgba(139,124,246,.18); border-radius: 3px }
.settings-section {
padding: 12px 0;
border-bottom: 1px solid rgba(255,255,255,.05);
}
.settings-section:last-child { border-bottom: 0 }
.settings-section-h {
margin: 0 0 10px;
font: 600 10.5px/1 var(--mono, 'JetBrains Mono', monospace);
color: var(--accent-2);
text-transform: uppercase;
letter-spacing: .14em;
}
.settings-row {
display: flex; align-items: center; gap: 16px;
padding: 8px 0;
}
.settings-row-text { flex: 1; min-width: 0 }
.settings-row-lbl {
font: 600 13.5px/1.3 var(--inter, system-ui);
color: #fff;
letter-spacing: -.005em;
}
.settings-row-sub {
font-size: 11.5px;
color: rgba(244,244,246,.50);
margin-top: 2px;
line-height: 1.4;
}
.settings-row-sub code {
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.10);
border-radius: 4px;
padding: 1px 5px;
font: 500 10.5px/1.3 var(--mono, 'JetBrains Mono', monospace);
color: var(--accent-2);
}
.settings-row-sub b { color: rgba(244,244,246,.85); font-weight: 600 }
.settings-row-ctl { flex-shrink: 0 }
.settings-toggle { display: inline-block; cursor: pointer; user-select: none }
.settings-toggle input { display: none }
.settings-toggle-track {
position: relative; display: inline-block;
width: 38px; height: 22px;
background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.10);
border-radius: 999px;
transition: all .22s cubic-bezier(.16,1,.3,1);
}
.settings-toggle-thumb {
position: absolute; top: 2px; left: 2px;
width: 16px; height: 16px;
background: #f4f4f6;
border-radius: 50%;
transition: all .22s cubic-bezier(.16,1,.3,1);
box-shadow: 0 2px 6px rgba(0,0,0,.30);
}
.settings-toggle input:checked + .settings-toggle-track {
background: linear-gradient(135deg, var(--accent-2), var(--accent));
border-color: var(--accent);
box-shadow: 0 0 12px rgba(139,124,246,.35);
}
.settings-toggle input:checked + .settings-toggle-track .settings-toggle-thumb {
left: calc(100% - 18px);
background: #0a0a0d;
}
.settings-seg {
display: inline-flex;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.08);
border-radius: 10px;
padding: 3px;
gap: 2px;
}
.settings-seg-btn {
padding: 6px 12px;
background: transparent;
border: 0;
border-radius: 7px;
color: rgba(244,244,246,.55);
font: 500 12px/1 var(--inter, system-ui);
cursor: pointer;
transition: all .18s ease;
}
.settings-seg-btn:hover { color: rgba(244,244,246,.85) }
.settings-seg-btn.is-active {
background: linear-gradient(180deg, rgba(139,124,246,.18), rgba(139,124,246,.10));
color: var(--accent-2);
box-shadow: 0 1px 4px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.04);
}
.settings-link {
color: var(--accent-2);
font: 600 12px/1 var(--inter, system-ui);
cursor: pointer;
text-decoration: none;
padding: 6px 10px;
border-radius: 7px;
background: rgba(139,124,246,.06);
border: 1px solid rgba(139,124,246,.20);
transition: all .18s ease;
}
.settings-link:hover { background: rgba(139,124,246,.12); border-color: rgba(139,124,246,.35) }
.settings-btn {
padding: 7px 12px;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.10);
color: rgba(244,244,246,.85);
font: 500 12px/1 var(--inter, system-ui);
border-radius: 8px;
cursor: pointer;
transition: all .18s ease;
}
.settings-btn-danger {
background: rgba(248,113,113,.08);
border-color: rgba(248,113,113,.22);
color: #fca5a5;
}
.settings-btn-danger:hover { background: rgba(248,113,113,.14); border-color: rgba(248,113,113,.40); color: #fecaca }
.settings-empty {
display: flex; align-items: center; gap: 12px;
padding: 12px;
background: rgba(255,255,255,.02);
border-radius: 10px;
}
.settings-empty-text { flex: 1; color: rgba(244,244,246,.55); font-size: 13px }
/* Density variants applied via :root[data-density] · subtle, doesn't break layout */
:root[data-density="compact"] .msg { padding: 4px 0 }
:root[data-density="compact"] .msg-bubble { padding: 8px 12px; font-size: 13px }
:root[data-density="comfortable"] .msg { padding: 12px 0 }
:root[data-density="comfortable"] .msg-bubble { padding: 16px 20px; font-size: 15px }
/* Motion + particle utility classes · safe to be present even when toggled off */
html.no-motion *, html.no-motion *::before, html.no-motion *::after {
animation-duration: 0s !important; transition-duration: 0s !important;
}
html.no-particles #particles, html.no-particles .ambient-orbs { display: none }
html.no-toasts .notice { display: none !important }
@media (max-width: 560px) {
.settings-backdrop { padding: 0; align-items: stretch }
.settings-modal { max-height: 100vh; height: 100vh; border-radius: 0; border: 0 }
.settings-row { flex-wrap: wrap; gap: 8px }
.settings-seg-btn { padding: 6px 10px; font-size: 11.5px }
}
/* ===================================================================== */
/* v3.4 · ONBOARDING TOUR · 2026-05-20 (re-added safely) */
/* CRITICAL · .tour-svg uses pointer-events: none so the spotlight is */
/* visual only. The previous version's pointer-events: auto on a */
/* fullscreen SVG blocked every click on the page. The card itself is */
/* the only interactive layer. */
/* ===================================================================== */
.tour-overlay {
position: fixed; inset: 0;
z-index: 110;
/* Container does not block clicks · the child .tour-card is the only
element that needs pointer-events. */
pointer-events: none;
animation: tourIn .26s ease;
}
@keyframes tourIn { from { opacity: 0 } to { opacity: 1 } }
.tour-svg {
position: absolute; inset: 0;
width: 100%; height: 100%;
/* Visual ONLY · the rect inside this SVG covers the viewport. Without
pointer-events: none the SVG would catch every click and lock the
terminal. This is the fix that was missing in v=79. */
pointer-events: none;
}
#tour-ring { filter: drop-shadow(0 0 14px rgba(139,124,246,.6)) }
.tour-card {
position: absolute;
width: 320px;
background: linear-gradient(180deg, rgba(22,22,28,.98), rgba(14,14,18,.98));
border: 1px solid rgba(255,255,255,.10);
border-radius: 14px;
padding: 16px 18px 14px;
/* The ONLY element of the overlay that captures clicks. */
pointer-events: auto;
box-shadow: 0 24px 56px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.04), inset 0 1px 0 rgba(255,255,255,.06);
backdrop-filter: blur(22px) saturate(160%);
-webkit-backdrop-filter: blur(22px) saturate(160%);
animation: tourCardIn .26s cubic-bezier(.16,1,.3,1);
transition: left .22s cubic-bezier(.16,1,.3,1), top .22s cubic-bezier(.16,1,.3,1);
}
@keyframes tourCardIn {
from { opacity: 0; transform: scale(.96) }
to { opacity: 1; transform: scale(1) }
}
.tour-card::before {
content: ''; position: absolute;
width: 14px; height: 14px;
background: inherit;
border: 1px solid rgba(255,255,255,.10);
transform: rotate(45deg);
left: 50%; margin-left: -7px;
}
.tour-card[data-arrow="top"]::before { top: -8px; border-right: 0; border-bottom: 0 }
.tour-card[data-arrow="bottom"]::before { bottom: -8px; border-left: 0; border-top: 0 }
.tour-progress { display: flex; gap: 5px; margin-bottom: 10px }
.tour-dot {
width: 18px; height: 3px;
background: rgba(255,255,255,.10);
border-radius: 2px;
transition: background .2s ease;
}
.tour-dot.is-done { background: rgba(139,124,246,.50) }
.tour-dot.is-active { background: linear-gradient(90deg, var(--accent-2), var(--accent)); box-shadow: 0 0 8px rgba(139,124,246,.50) }
.tour-title {
font: 700 14.5px/1.2 var(--space, 'Space Grotesk', sans-serif);
color: #fff;
letter-spacing: -.01em;
margin-bottom: 6px;
}
.tour-body {
font-size: 12.5px;
line-height: 1.5;
color: rgba(244,244,246,.72);
margin-bottom: 14px;
}
.tour-body code {
background: rgba(139,124,246,.10);
border: 1px solid rgba(139,124,246,.25);
border-radius: 4px;
padding: 1px 5px;
font: 500 11px/1.3 var(--mono, 'JetBrains Mono', monospace);
color: var(--accent-2);
}
.tour-actions { display: flex; align-items: center; justify-content: space-between }
.tour-skip {
background: transparent;
border: 0;
color: rgba(244,244,246,.50);
font: 500 12px/1 var(--inter, system-ui);
cursor: pointer;
padding: 6px 0;
transition: color .15s ease;
}
.tour-skip:hover { color: rgba(244,244,246,.85) }
.tour-nav { display: inline-flex; gap: 6px }
.tour-prev, .tour-next {
padding: 7px 14px;
border-radius: 8px;
font: 600 12px/1 var(--inter, system-ui);
cursor: pointer;
transition: all .18s ease;
}
.tour-prev {
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.10);
color: rgba(244,244,246,.85);
}
.tour-prev:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18) }
.tour-next {
background: linear-gradient(135deg, var(--accent-2), var(--accent));
border: 0;
color: #0a0a0d;
box-shadow: 0 4px 12px rgba(139,124,246,.36);
}
.tour-next:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(139,124,246,.50) }
@media (max-width: 560px) {
.tour-card { width: calc(100vw - 32px); max-width: 320px }
}
/* ===================================================================== */
/* v3.4b · TOUR CARD POLISH · richer header (icon + step counter) + */
/* "Try it" action button. No layout changes from v3.4 base. */
/* ===================================================================== */
.tour-card { width: 360px } /* wider for richer content */
.tour-card[data-arrow="none"]::before { display: none } /* centered modal step */
.tour-card-head {
display: flex; align-items: center; gap: 10px;
margin-bottom: 12px;
}
.tour-card-icon {
flex-shrink: 0;
width: 30px; height: 30px;
display: inline-flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, rgba(139,124,246,.18), rgba(139,124,246,.08));
border: 1px solid rgba(139,124,246,.30);
border-radius: 9px;
font-size: 16px;
box-shadow: 0 2px 8px rgba(139,124,246,.20), inset 0 1px 0 rgba(255,255,255,.04);
}
.tour-progress { flex: 1; margin: 0 }
.tour-counter {
flex-shrink: 0;
font: 600 10.5px/1 var(--mono, 'JetBrains Mono', monospace);
color: rgba(244,244,246,.45);
letter-spacing: .06em;
}
.tour-title {
font-size: 15.5px;
margin-bottom: 8px;
}
.tour-body {
font-size: 13px;
margin-bottom: 16px;
}
.tour-body b { color: rgba(244,244,246,.92); font-weight: 600 }
.tour-body i { color: rgba(244,244,246,.55) }
.tour-body code {
font-size: 11.5px;
}
.tour-body .kbd {
display: inline-block;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.10);
color: rgba(244,244,246,.85);
font: 500 10px/1 var(--mono, 'JetBrains Mono', monospace);
padding: 2px 5px;
border-radius: 4px;
vertical-align: 1px;
}
.tour-try {
padding: 7px 12px;
border-radius: 8px;
font: 600 11.5px/1 var(--inter, system-ui);
cursor: pointer;
background: rgba(0,82,255,.10);
border: 1px solid rgba(0,82,255,.30);
color: var(--base-2);
transition: all .18s ease;
}
.tour-try:hover { background: rgba(0,82,255,.16); border-color: rgba(0,82,255,.50); transform: translateY(-1px) }
@media (max-width: 560px) {
.tour-card { width: calc(100vw - 32px); max-width: 360px }
.tour-card-icon { width: 26px; height: 26px; font-size: 14px }
}
/* ===================================================================== */
/* v3.6 · AGENT WELCOME CARD · 2026-05-20 */
/* Premium "Welcome back, agent" card · hero + stat grid + price pills + */
/* wallet chip + action chips. Custom card kind, not row-based. */
/* ===================================================================== */
.agent-card {
position: relative;
background: linear-gradient(180deg, rgba(20,20,28,.92), rgba(14,14,18,.92));
border: 1px solid rgba(255,255,255,.10);
border-radius: 18px;
padding: 20px;
overflow: hidden;
box-shadow: 0 14px 36px rgba(0,0,0,.36), 0 0 0 1px rgba(255,255,255,.04), inset 0 1px 0 rgba(255,255,255,.06);
margin: 6px 0;
animation: agentCardIn .42s cubic-bezier(.16,1,.3,1);
}
@keyframes agentCardIn { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: translateY(0) } }
/* Ambient orbs inside the card · subtle premium texture */
.agent-card-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; border-radius: inherit; opacity: .35 }
.agent-card-orb { position: absolute; width: 240px; height: 240px; border-radius: 50%; filter: blur(60px) }
.agent-card-orb.orb-1 {
top: -80px; left: -60px;
background: radial-gradient(circle, rgba(139,124,246,.55), transparent 65%);
}
.agent-card-orb.orb-2 {
bottom: -90px; right: -70px;
background: radial-gradient(circle, rgba(0,82,255,.45), transparent 65%);
}
/* All children sit above the orbs */
.agent-card > * { position: relative; z-index: 1 }
/* HERO ----------------------------------------------------------------- */
.agent-card-hero {
display: flex; align-items: center; gap: 14px;
margin-bottom: 18px;
}
.agent-card-avatar {
flex-shrink: 0;
width: 56px; height: 56px;
border-radius: 14px;
overflow: hidden;
background: linear-gradient(135deg, rgba(139,124,246,.18), rgba(0,82,255,.10));
border: 1px solid rgba(139,124,246,.30);
box-shadow: 0 8px 22px rgba(139,124,246,.22), 0 0 0 1px rgba(255,255,255,.06);
display: grid; place-items: center;
}
.agent-card-avatar img { width: 100%; height: 100%; object-fit: contain; display: block; padding: 4px; background: linear-gradient(135deg, rgba(139,124,246,0.18), rgba(96,165,250,0.10)); }
.agent-card-avatar-emoji { font-size: 28px; line-height: 1 }
.agent-card-hero-text { flex: 1; min-width: 0 }
.agent-card-greet {
font: 700 18px/1.2 var(--space, 'Space Grotesk', sans-serif);
letter-spacing: -.01em;
color: rgba(244,244,246,.85);
}
.agent-card-greet b {
background: linear-gradient(135deg, #ffffff 0%, #A78BFA 100%);
-webkit-background-clip: text; background-clip: text;
color: transparent;
font-weight: 700;
}
.agent-card-sub {
display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
margin-top: 4px;
font-size: 11.5px;
color: rgba(244,244,246,.55);
letter-spacing: .005em;
}
.agent-card-id {
font: 600 10.5px/1 var(--mono, 'JetBrains Mono', monospace);
padding: 3px 7px;
background: rgba(139,124,246,.10);
border: 1px solid rgba(139,124,246,.28);
color: var(--accent-2);
border-radius: 5px;
letter-spacing: .04em;
}
.agent-card-tier {
font: 600 11px/1 var(--mono, 'JetBrains Mono', monospace);
color: rgba(244,244,246,.85);
text-transform: capitalize;
}
.agent-card-dot { color: rgba(244,244,246,.30) }
.agent-card-profile {
flex-shrink: 0;
display: inline-flex; align-items: center; gap: 5px;
padding: 7px 12px;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.10);
border-radius: 9px;
color: rgba(244,244,246,.85);
font: 600 12px/1 var(--inter, system-ui);
text-decoration: none;
transition: all .2s ease;
}
.agent-card-profile:hover { background: rgba(139,124,246,.10); border-color: rgba(139,124,246,.30); color: var(--accent-2); transform: translateY(-1px) }
.agent-card-profile svg { width: 11px; height: 11px }
/* STAT GRID ------------------------------------------------------------ */
.agent-card-stats {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
margin-bottom: 16px;
}
.agent-stat {
position: relative;
padding: 12px 14px;
background: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.06);
border-radius: 12px;
overflow: hidden;
transition: all .22s ease;
}
.agent-stat:hover { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12) }
.agent-stat.is-pos { border-color: rgba(74,222,128,.22); background: linear-gradient(180deg, rgba(74,222,128,.06), rgba(74,222,128,.02)) }
.agent-stat-k {
font: 600 10px/1 var(--mono, 'JetBrains Mono', monospace);
color: rgba(244,244,246,.45);
text-transform: uppercase;
letter-spacing: .12em;
margin-bottom: 8px;
}
.agent-stat-v {
font-family: var(--space, 'Space Grotesk', sans-serif);
display: flex; align-items: baseline; gap: 4px;
color: #fff;
}
.agent-stat-num {
font: 700 19px/1 var(--space, 'Space Grotesk', sans-serif);
letter-spacing: -.01em;
}
.agent-stat-num.dim { color: rgba(244,244,246,.30) }
.agent-stat.is-pos .agent-stat-num { color: #86efac }
.agent-stat-unit {
font: 500 11px/1 var(--mono, 'JetBrains Mono', monospace);
color: rgba(244,244,246,.45);
}
.agent-stat-sub {
font-size: 10.5px;
color: rgba(244,244,246,.45);
margin-top: 4px;
line-height: 1.3;
}
.agent-stat.is-pos .agent-stat-sub { color: rgba(134,239,172,.65) }
/* LIVE PRICE PILLS ----------------------------------------------------- */
.agent-card-prices {
display: flex; gap: 8px; flex-wrap: wrap;
margin-bottom: 16px;
min-height: 32px;
}
.agent-px {
display: inline-flex; align-items: center; gap: 7px;
padding: 7px 12px;
background: rgba(139,124,246,.07);
border: 1px solid rgba(139,124,246,.22);
border-radius: 999px;
font-size: 12px;
color: var(--accent-2);
transition: all .18s ease;
}
.agent-px:hover { transform: translateY(-1px); border-color: rgba(139,124,246,.40) }
.agent-px b { color: #fff; font: 600 12px/1 var(--mono, 'JetBrains Mono', monospace) }
.agent-px em {
font-style: normal; font-size: 10.5px;
padding: 1px 5px; border-radius: 4px; font-weight: 600;
}
.agent-px em.up { color: #86efac; background: rgba(74,222,128,.08) }
.agent-px em.down { color: #fca5a5; background: rgba(248,113,113,.08) }
.agent-px.ax { background: rgba(0,82,255,.07); border-color: rgba(0,82,255,.22); color: var(--base-2) }
.agent-px-dot {
width: 6px; height: 6px; border-radius: 50%;
background: currentColor;
box-shadow: 0 0 6px currentColor;
animation: agentPxPulse 2s ease-in-out infinite;
}
@keyframes agentPxPulse { 0%, 100% { opacity: 1; transform: scale(1) } 50% { opacity: .55; transform: scale(.82) } }
/* WALLET CHIP --------------------------------------------------------- */
.agent-card-wallet {
display: flex; align-items: center; gap: 8px;
margin-bottom: 16px;
padding: 8px 12px;
background: rgba(0,0,0,.18);
border: 1px dashed rgba(255,255,255,.08);
border-radius: 10px;
font-size: 11px;
}
.agent-card-wallet-label {
color: rgba(244,244,246,.45);
font: 600 10px/1 var(--mono, 'JetBrains Mono', monospace);
text-transform: uppercase;
letter-spacing: .14em;
}
.agent-card-wallet .addr-copy {
font-size: 12px;
display: inline-flex; align-items: center; gap: 2px;
}
/* ACTIONS ------------------------------------------------------------- */
.agent-card-actions {
display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px;
}
.agent-action {
display: flex; align-items: center; gap: 12px;
padding: 14px;
background: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.08);
border-radius: 12px;
cursor: pointer;
text-align: left;
transition: all .22s cubic-bezier(.16,1,.3,1);
overflow: hidden;
position: relative;
}
.agent-action::before {
content: ''; position: absolute; inset: 0;
background: linear-gradient(135deg, rgba(139,124,246,.0), rgba(139,124,246,.10));
opacity: 0; transition: opacity .26s ease;
pointer-events: none;
}
.agent-action:hover {
transform: translateY(-2px);
border-color: rgba(139,124,246,.35);
box-shadow: 0 8px 22px rgba(0,0,0,.28), 0 0 0 1px rgba(139,124,246,.20);
}
.agent-action:hover::before { opacity: 1 }
.agent-action.is-primary {
background: linear-gradient(180deg, rgba(139,124,246,.12), rgba(139,124,246,.04));
border-color: rgba(139,124,246,.32);
}
.agent-action.is-primary:hover { border-color: rgba(139,124,246,.55) }
.agent-action-icon {
flex-shrink: 0;
width: 34px; height: 34px;
display: inline-flex; align-items: center; justify-content: center;
background: rgba(139,124,246,.10);
border: 1px solid rgba(139,124,246,.25);
border-radius: 9px;
font-size: 16px;
}
.agent-action.is-primary .agent-action-icon {
background: linear-gradient(135deg, var(--accent-2), var(--accent));
border-color: var(--accent);
box-shadow: 0 4px 10px rgba(139,124,246,.32);
}
.agent-action-stack { flex: 1; min-width: 0; display: flex; flex-direction: column }
.agent-action-label {
font: 600 13px/1.2 var(--inter, system-ui);
color: #fff;
letter-spacing: -.005em;
}
.agent-action-sub {
font-size: 11px;
color: rgba(244,244,246,.50);
margin-top: 2px;
line-height: 1.3;
}
.agent-action-go {
flex-shrink: 0;
color: rgba(244,244,246,.30);
font-size: 18px;
font-weight: 300;
transition: all .22s ease;
}
.agent-action:hover .agent-action-go { color: var(--accent-2); transform: translateX(2px) }
/* MOBILE -------------------------------------------------------------- */
@media (max-width: 720px) {
.agent-card { padding: 16px }
.agent-card-hero { flex-wrap: wrap }
.agent-card-profile { order: 3; flex-basis: 100%; justify-content: center; margin-top: 4px }
.agent-card-stats { grid-template-columns: 1fr 1fr; gap: 8px }
.agent-stat { padding: 10px 12px }
.agent-stat-num { font-size: 17px }
.agent-card-actions { grid-template-columns: 1fr; gap: 8px }
.agent-action-label { font-size: 12.5px }
}
/* ===================================================================== */
/* v3.7 · MESSAGE TIMESTAMP · 2026-05-20 */
/* Subtle inline time on each bubble · only shows on hover by default, */
/* always visible on the user side because there's room. */
/* ===================================================================== */
.msg-time {
display: block;
margin-top: 6px;
font: 500 10px/1 var(--mono, 'JetBrains Mono', monospace);
color: rgba(244,244,246,.32);
letter-spacing: .04em;
user-select: none;
transition: color .15s ease;
}
.msg-bubble:hover .msg-time { color: rgba(244,244,246,.55) }
.msg-user .msg-time { text-align: right; color: rgba(255,224,200,.45) }
.msg-user .msg-bubble:hover .msg-time { color: rgba(255,224,200,.75) }
/* When the bubble contains only a card (no text), still keep the timestamp
nicely separated from the card edge */
.msg-bubble > .result-card + .msg-time,
.msg-bubble > .agent-card + .msg-time,
.msg-bubble > .tg-card + .msg-time { margin-top: 10px }
/* Mobile · timestamp slightly smaller */
@media (max-width: 720px) {
.msg-time { font-size: 9.5px; margin-top: 5px }
}
/* ===================================================================== */
/* v3.8 · xAI / GROK CONNECT WIZARD · 2026-05-20 */
/* /connect xai · 4-step device-code modal · matches other wizards. */
/* ===================================================================== */
.xg-wz .xg-intro { padding: 4px 4px 8px }
.xg-wz .xg-badge {
display: inline-flex; align-items: center; gap: 7px;
padding: 4px 10px;
background: rgba(0,82,255,.08);
border: 1px solid rgba(0,82,255,.28);
border-radius: 999px;
font: 600 10.5px/1 var(--mono, 'JetBrains Mono', monospace);
color: var(--base-2);
text-transform: uppercase; letter-spacing: .12em;
margin-bottom: 14px;
}
.xg-wz .xg-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--base); box-shadow: 0 0 8px var(--base); animation: dotPulse 2s ease-in-out infinite }
.xg-wz .lead { color: var(--txt-2); font-size: 14px; line-height: 1.55; margin-bottom: 16px }
.xg-wz .lead b { color: #fff; font-weight: 600 }
.xg-wz .xg-feat {
list-style: none; padding: 0; margin: 0 0 14px;
display: flex; flex-direction: column; gap: 10px;
}
.xg-wz .xg-feat li {
display: grid; grid-template-columns: 80px 1fr; gap: 12px;
padding: 10px 12px;
background: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.06);
border-radius: 9px;
font-size: 12.5px;
color: var(--txt-1);
line-height: 1.5;
}
.xg-wz .xg-feat-k {
font: 600 10.5px/1.4 var(--mono, 'JetBrains Mono', monospace);
color: var(--accent-2);
text-transform: uppercase; letter-spacing: .1em;
}
.xg-wz .xg-foot-note {
font-size: 11.5px; color: var(--txt-3); line-height: 1.5;
padding: 10px 12px;
background: rgba(0,82,255,.04);
border: 1px dashed rgba(0,82,255,.22);
border-radius: 9px;
}
/* loading state */
.xg-loading { padding: 36px 12px; display: flex; flex-direction: column; align-items: center; gap: 14px }
.xg-spinner {
width: 28px; height: 28px; border-radius: 50%;
border: 2.5px solid rgba(139,124,246,.18);
border-top-color: var(--accent);
animation: xgSpin 0.8s linear infinite;
}
.xg-spinner-lg { width: 44px; height: 44px; border-width: 3px }
@keyframes xgSpin { to { transform: rotate(360deg) } }
.xg-loading-text { font-size: 13px; color: var(--txt-2) }
/* auth screen · code + steps */
.xg-auth { padding: 4px 4px 8px }
.xg-code-wrap {
text-align: center;
padding: 18px 16px 14px;
background: linear-gradient(180deg, rgba(139,124,246,.10), rgba(139,124,246,.04));
border: 1px solid rgba(139,124,246,.30);
border-radius: 14px;
margin-bottom: 16px;
}
.xg-code-label {
font: 600 10.5px/1 var(--mono, 'JetBrains Mono', monospace);
color: var(--accent-2);
text-transform: uppercase; letter-spacing: .14em;
margin-bottom: 8px;
}
.xg-code {
display: inline-block;
font: 700 26px/1 var(--mono, 'JetBrains Mono', monospace);
letter-spacing: .08em;
color: #fff;
padding: 10px 18px;
background: rgba(0,0,0,.32);
border: 1px solid rgba(255,255,255,.10);
border-radius: 10px;
cursor: pointer;
transition: all .18s ease;
user-select: all;
}
.xg-code:hover { border-color: rgba(139,124,246,.50); transform: translateY(-1px) }
.xg-code-hint { font-size: 10.5px; color: var(--txt-3); margin-top: 6px; letter-spacing: .04em }
.xg-steps {
list-style: none; counter-reset: xstep;
padding: 0; margin: 0 0 14px;
display: flex; flex-direction: column; gap: 8px;
}
.xg-steps li {
display: grid; grid-template-columns: 26px 1fr; gap: 12px;
padding: 10px 12px;
background: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.06);
border-radius: 9px;
font-size: 13px;
color: var(--txt-1);
line-height: 1.5;
align-items: center;
}
.xg-step-n {
width: 26px; height: 26px;
border-radius: 50%;
background: linear-gradient(135deg, var(--accent-2), var(--accent));
color: #0a0a0d;
display: grid; place-items: center;
font: 700 12px/1 var(--mono, 'JetBrains Mono', monospace);
}
.xg-link {
color: var(--accent-2);
text-decoration: none;
border-bottom: 1px dashed rgba(139,124,246,.35);
transition: all .15s ease;
}
.xg-link:hover { color: var(--accent); border-bottom-color: rgba(139,124,246,.65) }
.xg-expiry {
text-align: center;
font: 500 11.5px/1 var(--mono, 'JetBrains Mono', monospace);
color: var(--txt-3);
padding: 8px;
background: rgba(0,0,0,.18);
border-radius: 8px;
}
.xg-expiry b { color: var(--accent-2); font-weight: 600 }
/* polling */
.xg-polling { padding: 36px 12px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center }
.xg-poll-title { font: 600 15px/1.3 var(--space, 'Space Grotesk', sans-serif); color: #fff }
.xg-poll-sub { font-size: 12px; color: var(--txt-3); line-height: 1.5 }
.xg-poll-sub b { color: var(--accent-2); font-weight: 600 }
/* error */
.xg-err {
padding: 14px 16px;
background: rgba(248,113,113,.08);
border: 1px solid rgba(248,113,113,.28);
border-radius: 10px;
color: #fca5a5;
font-size: 13px;
line-height: 1.55;
}
.xg-err code {
background: rgba(0,0,0,.30);
border: 1px solid rgba(248,113,113,.22);
padding: 1px 6px; border-radius: 4px;
font: 500 11.5px/1.3 var(--mono, 'JetBrains Mono', monospace);
color: #fecaca;
}
/* success */
.xg-success { padding: 16px 6px 6px; text-align: center }
.xg-check {
width: 64px; height: 64px; border-radius: 50%;
background: linear-gradient(135deg, #4ade80, #22c55e);
color: #0a0a0d;
display: grid; place-items: center;
margin: 0 auto 14px;
box-shadow: 0 12px 30px rgba(74,222,128,.40), inset 0 1px 0 rgba(255,255,255,.18);
}
.xg-success-h { font: 700 17px/1.2 var(--space, 'Space Grotesk', sans-serif); color: #fff; margin-bottom: 6px }
.xg-success p { font-size: 13px; line-height: 1.55; color: var(--txt-2); margin-bottom: 14px }
.xg-status-row {
display: flex; justify-content: space-between; align-items: center;
padding: 8px 14px;
background: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.06);
border-radius: 8px;
margin-bottom: 6px;
}
.xg-status-k { font: 600 10.5px/1 var(--mono, 'JetBrains Mono', monospace); color: var(--txt-3); text-transform: uppercase; letter-spacing: .12em }
.xg-status-v { font: 500 11.5px/1.3 var(--mono, 'JetBrains Mono', monospace); color: var(--txt-1); text-align: right }
.xg-success-cta { display: flex; gap: 8px; justify-content: center; margin-top: 12px }
@media (max-width: 560px) {
.xg-code { font-size: 22px }
.xg-feat li { grid-template-columns: 1fr; gap: 4px }
}
/* xg-tag-ok · small green badge next to "Connect xAI · Grok" when linked */
.xg-tag-ok {
display: inline-block;
margin-left: 8px;
padding: 1px 7px;
background: rgba(74,222,128,.10);
border: 1px solid rgba(74,222,128,.32);
border-radius: 999px;
font: 600 9.5px/1.4 var(--mono, 'JetBrains Mono', monospace);
color: #86efac;
text-transform: uppercase;
letter-spacing: .14em;
vertical-align: 2px;
}
/* x-post no-keys card · shown when /post is run but no x_oauth1 vault rows exist */
.xp-nokeys { text-align: center; padding: 22px 12px 8px }
.xp-nokeys-ico { font-size: 44px; margin-bottom: 10px; opacity: .92 }
.xp-nokeys-h { margin: 0 0 8px; font-size: 17px; letter-spacing: -.01em }
.xp-nokeys-sub {
margin: 0 auto 18px;
max-width: 380px;
color: var(--ink-2, #9aa3b2);
font-size: 13px;
line-height: 1.5;
}
.xp-nokeys-cta { justify-content: center; margin-bottom: 4px }
.xp-nokeys-note {
margin: 14px auto 0;
max-width: 420px;
font-size: 11.5px;
line-height: 1.5;
color: var(--ink-3, #6b7384);
padding: 10px 12px;
background: rgba(255,255,255,.025);
border: 1px solid rgba(255,255,255,.06);
border-radius: 10px;
}
/* x-connect (OAuth 2.0 wizard) · sits alongside xg-* (Grok wizard) tokens */
.xc-await { text-align: center; padding: 28px 20px 14px }
.xc-await-title {
margin-top: 14px;
font-size: 15px;
font-weight: 600;
color: #e9eef5;
letter-spacing: -.005em;
}
.xc-await-sub {
max-width: 360px;
margin: 6px auto 14px;
color: #9aa3b2;
font-size: 12.5px;
line-height: 1.55;
}
/* EIP-7702 hijack banner · renders at top of body when wallet is hijacked */
.hijack-banner {
position: sticky;
top: 0;
left: 0;
right: 0;
z-index: 9999;
background: linear-gradient(135deg, rgba(220,38,38,.95), rgba(190,18,60,.95));
border-bottom: 1px solid rgba(253,164,175,.4);
box-shadow: 0 6px 22px rgba(0,0,0,.35);
color: #fff7f7;
font: 13px/1.45 -apple-system, BlinkMacSystemFont, "Inter", system-ui, sans-serif;
}
.hijack-banner-inner {
display: grid;
grid-template-columns: 28px 1fr auto;
gap: 12px;
align-items: start;
max-width: 1200px;
margin: 0 auto;
padding: 12px 16px;
}
.hijack-banner-ico {
font-size: 22px;
line-height: 1;
padding-top: 2px;
text-align: center;
}
.hijack-banner-h {
font-weight: 700;
font-size: 14px;
letter-spacing: -.005em;
margin-bottom: 4px;
}
.hijack-banner-sub {
color: rgba(255,255,255,.92);
font-size: 12.5px;
margin-bottom: 6px;
}
.hijack-banner-link {
color: #fde7e9;
text-decoration: underline;
text-underline-offset: 2px;
}
.hijack-banner-actions {
display: flex;
flex-wrap: wrap;
gap: 8px 14px;
margin-top: 4px;
font-size: 11.5px;
color: rgba(255,255,255,.85);
}
.hijack-step::before {
content: '';
}
.hijack-banner-x {
align-self: start;
background: transparent;
border: 1px solid rgba(255,255,255,.25);
color: #fff;
width: 26px;
height: 26px;
border-radius: 8px;
cursor: pointer;
font-size: 16px;
line-height: 1;
padding: 0;
}
.hijack-banner-x:hover {
background: rgba(255,255,255,.12);
}
@media (max-width: 560px) {
.hijack-banner-inner { grid-template-columns: 24px 1fr auto; gap: 10px; padding: 10px 12px }
.hijack-banner-h { font-size: 13px }
.hijack-banner-actions { font-size: 11px }
}
/* tg-link celebration · plays briefly when a polling card flips to linked state */
.tg-card.just-linked {
animation: tgJustLinked 2.2s ease-out;
}
@keyframes tgJustLinked {
0% { transform: scale(0.96); box-shadow: 0 0 0 0 rgba(74,222,128,.55), 0 0 0 0 rgba(74,222,128,0) }
18% { transform: scale(1.012); box-shadow: 0 0 0 6px rgba(74,222,128,.32), 0 14px 38px rgba(74,222,128,.18) }
45% { transform: scale(1.0); box-shadow: 0 0 0 12px rgba(74,222,128,0), 0 14px 38px rgba(74,222,128,.10) }
100% { transform: scale(1.0); box-shadow: 0 0 0 0 rgba(74,222,128,0), 0 0 0 0 rgba(74,222,128,0) }
}
.tg-card.just-linked .tg-card-badge.ok {
animation: tgBadgePop 1.2s ease-out;
}
@keyframes tgBadgePop {
0% { transform: scale(0.6); opacity: 0 }
35% { transform: scale(1.18); opacity: 1 }
60% { transform: scale(0.96) }
100% { transform: scale(1) }
}
.tg-card.just-linked .tg-card-icon {
animation: tgIconSpin 1.4s ease-out;
}
@keyframes tgIconSpin {
0% { transform: rotate(-12deg) scale(0.92) }
40% { transform: rotate(8deg) scale(1.06) }
80% { transform: rotate(-3deg) scale(1.0) }
100% { transform: rotate(0) scale(1) }
}
/* =================================================================
Marketplace card · /oxwork-products and /oxwork-services
Premium chat-first browse for the 0xWork marketplace.
================================================================= */
.mp-card {
padding: 0;
overflow: hidden;
background: linear-gradient(180deg, rgba(22,22,30,.96), rgba(14,14,18,.96));
border: 1px solid rgba(139,124,246,.14);
box-shadow: 0 14px 36px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.04);
}
.mp-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
padding: 16px 20px 14px;
border-bottom: 1px solid rgba(255,255,255,.05);
background:
radial-gradient(420px 110px at 0% -30px, rgba(139,124,246,.10), transparent 70%),
rgba(0,0,0,.18);
}
.mp-eyebrow {
font: 600 10.5px/1 'JetBrains Mono', monospace;
color: var(--accent-2, #A78BFA);
letter-spacing: .14em;
text-transform: uppercase;
margin-bottom: 6px;
}
.mp-h {
font: 700 16px/1.2 'Space Grotesk', sans-serif;
letter-spacing: -.008em;
background: linear-gradient(135deg, #fff, #A78BFA);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.mp-meta {
font: 600 11.5px/1 'JetBrains Mono', monospace;
color: var(--accent-2, #A78BFA);
padding: 4px 9px;
background: rgba(139,124,246,.10);
border: 1px solid rgba(139,124,246,.28);
border-radius: 999px;
white-space: nowrap;
}
.mp-body-list { padding: 4px 0 }
.mp-row {
display: grid;
grid-template-columns: 44px 1fr auto;
gap: 14px;
padding: 14px 20px;
text-decoration: none;
color: inherit;
border-bottom: 1px solid rgba(255,255,255,.04);
transition: background 0.18s ease, transform 0.18s ease;
align-items: start;
}
.mp-row:last-child { border-bottom: 0 }
.mp-row:hover {
background: linear-gradient(90deg, rgba(139,124,246,.06), rgba(139,124,246,.02));
}
.mp-row:hover .mp-cta { background: rgba(139,124,246,.22); border-color: rgba(139,124,246,.55); color: #fff }
.mp-row:active { transform: scale(.998) }
.mp-icon {
width: 44px; height: 44px;
display: grid; place-items: center;
background: linear-gradient(135deg, rgba(139,124,246,.16), rgba(0,82,255,.08));
border: 1px solid rgba(255,255,255,.06);
border-radius: 11px;
font-size: 22px;
line-height: 1;
}
.mp-body { min-width: 0 }
.mp-title {
font: 600 14.5px/1.3 'Inter', sans-serif;
color: var(--txt-1, #f4f4f6);
margin-bottom: 5px;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
.mp-summary {
font: 400 12.5px/1.5 'Inter', sans-serif;
color: var(--txt-3, #9aa3b2);
margin-bottom: 7px;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.mp-meta-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
}
.mp-cat {
font: 600 10.5px/1 'JetBrains Mono', monospace;
color: #93c5fd;
background: rgba(0,82,255,.10);
border: 1px solid rgba(0,82,255,.28);
padding: 3px 7px;
border-radius: 6px;
letter-spacing: .04em;
}
.mp-owner {
font: 500 11px/1 'JetBrains Mono', monospace;
color: #6b7384;
letter-spacing: .02em;
}
.mp-rating {
font: 600 11px/1 'JetBrains Mono', monospace;
color: #facc15;
display: inline-flex;
align-items: center;
gap: 4px;
}
.mp-rating-n {
color: #6b7384;
font-weight: 500;
}
.mp-rating-n::before { content: '('; margin-right: 1px }
.mp-rating-n::after { content: ')' }
.mp-action {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 7px;
min-width: 80px;
}
.mp-price {
font: 700 17px/1 'Space Grotesk', sans-serif;
background: linear-gradient(135deg, #fff, #A78BFA);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
letter-spacing: -.008em;
}
.mp-cta {
font: 600 10.5px/1 'JetBrains Mono', monospace;
color: var(--accent-2, #A78BFA);
background: rgba(139,124,246,.10);
border: 1px solid rgba(139,124,246,.30);
padding: 5px 9px;
border-radius: 7px;
letter-spacing: .06em;
transition: all 0.18s ease;
white-space: nowrap;
}
.mp-empty {
padding: 32px 20px;
text-align: center;
color: var(--txt-3, #9aa3b2);
font-size: 13px;
}
.mp-foot {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding: 12px 20px;
background: rgba(0,0,0,.18);
border-top: 1px solid rgba(255,255,255,.04);
font: 500 11.5px/1.4 'Inter', sans-serif;
color: var(--txt-3, #6b7384);
align-items: center;
}
.mp-foot-link {
color: var(--accent-2, #A78BFA);
text-decoration: none;
font-weight: 600;
border-bottom: 1px dashed rgba(139,124,246,.32);
}
.mp-foot-link:hover {
color: #fff;
border-bottom-color: #fff;
}
.mp-foot-sep { color: #4b5563 }
.mp-foot-note { color: #6b7384 }
@media (max-width: 560px) {
.mp-row { grid-template-columns: 38px 1fr auto; gap: 11px; padding: 12px 14px }
.mp-icon { width: 38px; height: 38px; font-size: 19px }
.mp-title { font-size: 13.5px }
.mp-summary { font-size: 12px; -webkit-line-clamp: 3 }
.mp-price { font-size: 15px }
.mp-cta { font-size: 10px; padding: 4px 7px }
.mp-head { padding: 14px 16px 12px }
.mp-h { font-size: 15px }
.mp-foot { padding: 10px 14px; font-size: 11px }
.mp-foot-note { display: none }
}
/* mp-price · FREE variant for products with price=0 */
.mp-price.is-free {
background: linear-gradient(135deg, #fff, #86efac);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-size: 14px;
letter-spacing: .04em;
}
.mp-row-buyable { cursor: pointer; user-select: none }
.mp-row-buyable:hover .mp-cta { background: rgba(139,124,246,.22); border-color: rgba(139,124,246,.55); color: #fff }
.mp-row-buyable:focus-visible {
outline: 2px solid var(--accent-2, #A78BFA);
outline-offset: -2px;
}
/* =================================================================
/buy-product wizard
================================================================= */
.pbuy-wz { max-width: 520px }
.pbuy-review { padding: 6px 4px 2px }
.pbuy-price-block {
text-align: center;
margin-bottom: 14px;
padding: 16px 12px;
background: linear-gradient(180deg, rgba(139,124,246,.10), rgba(139,124,246,.03));
border: 1px solid rgba(139,124,246,.22);
border-radius: 11px;
}
.pbuy-price {
font: 700 34px/1 'Space Grotesk', sans-serif;
background: linear-gradient(135deg, #fff, #A78BFA);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
letter-spacing: -.012em;
margin-bottom: 4px;
}
.pbuy-cat {
display: inline-block;
font: 600 10.5px/1 'JetBrains Mono', monospace;
color: #93c5fd;
background: rgba(0,82,255,.10);
border: 1px solid rgba(0,82,255,.28);
padding: 4px 8px;
border-radius: 6px;
letter-spacing: .08em;
text-transform: uppercase;
margin-top: 4px;
}
.pbuy-desc {
font: 400 13.5px/1.55 'Inter', sans-serif;
color: var(--txt-2, #c4c5cc);
padding: 12px 14px;
background: rgba(255,255,255,.02);
border: 1px solid rgba(255,255,255,.05);
border-radius: 10px;
margin-bottom: 12px;
}
.pbuy-meta {
display: grid;
gap: 6px;
font-size: 12.5px;
margin-bottom: 12px;
}
.pbuy-meta-row {
display: flex;
justify-content: space-between;
gap: 10px;
padding: 7px 10px;
background: rgba(255,255,255,.02);
border-radius: 7px;
}
.pbuy-k { color: var(--txt-3, #9aa3b2); font: 600 10.5px/1.4 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: .08em }
.pbuy-v { color: var(--txt-2, #c4c5cc); text-align: right; max-width: 70%; word-break: break-all }
.pbuy-v.mono { font: 500 12px/1.4 'JetBrains Mono', monospace; color: #A78BFA }
.pbuy-status { margin-top: 8px; min-height: 24px }
.pbuy-done { text-align: center; padding: 16px 8px 6px }
.pbuy-done h4 { margin: 10px 0 4px; font: 700 17px/1.2 'Space Grotesk', sans-serif }
.pbuy-recv { font: 500 12px/1.4 'JetBrains Mono', monospace; color: var(--txt-3, #9aa3b2); margin-top: 6px }
.pbuy-delivery {
margin-top: 12px;
padding: 10px 14px;
background: rgba(74,222,128,.06);
border: 1px solid rgba(74,222,128,.24);
border-radius: 9px;
text-align: left;
}
.pbuy-delivery-k { font: 600 10.5px/1 'JetBrains Mono', monospace; color: #86efac; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 6px }
.pbuy-delivery-v { font-size: 13px; color: var(--txt-2, #c4c5cc); word-break: break-all }
/* Hijack banner · SAFE variant for known smart-wallet delegates (Coinbase Smart Wallet, etc) */
.hijack-banner.is-safe {
background: linear-gradient(135deg, rgba(0,82,255,.85), rgba(34,84,210,.85));
border-bottom-color: rgba(147,197,253,.4);
}
.hijack-banner.is-safe .hijack-banner-ico {
color: #93c5fd;
}
.hijack-banner.is-safe .hijack-banner-link {
color: #dbeafe;
}
/* Smart wallet detected · chat-card variant for the safe-delegate announcement */
.result-card.rc-smart_wallet_detected {
border: 1px solid rgba(147,197,253,.28);
background:
radial-gradient(420px 110px at 0% -40px, rgba(0,82,255,.12), transparent 70%),
linear-gradient(180deg, rgba(22,22,30,.96), rgba(14,14,18,.96));
}
.result-card.rc-smart_wallet_detected .rc-title {
background: linear-gradient(135deg, #fff, #93c5fd);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.result-card.rc-smart_wallet_detected .rc-meta {
color: #93c5fd;
background: rgba(0,82,255,.10);
border: 1px solid rgba(0,82,255,.28);
padding: 3px 8px;
border-radius: 999px;
font: 600 10.5px/1 'JetBrains Mono', monospace;
letter-spacing: .12em;
text-transform: uppercase;
}
/* Unrecognised delegation · chat-card variant for the hijack announcement */
.result-card.rc-hijack_detected {
border: 1px solid rgba(251,113,133,.32);
background:
radial-gradient(420px 110px at 0% -40px, rgba(220,38,38,.14), transparent 70%),
linear-gradient(180deg, rgba(28,18,22,.96), rgba(18,12,16,.96));
}
.result-card.rc-hijack_detected .rc-title {
background: linear-gradient(135deg, #fff, #fda4af);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.result-card.rc-hijack_detected .rc-meta {
color: #fda4af;
background: rgba(220,38,38,.10);
border: 1px solid rgba(251,113,133,.30);
padding: 3px 8px;
border-radius: 999px;
font: 600 10.5px/1 'JetBrains Mono', monospace;
letter-spacing: .12em;
text-transform: uppercase;
}
.result-card.rc-hijack_detected .rc-footer {
color: #fda4af;
font-size: 11.5px;
}
/* Drainer variant · loudest */
.result-card.rc-hijack_detected.drainer {
border-color: rgba(220,38,38,.55);
background:
radial-gradient(520px 130px at 0% -40px, rgba(220,38,38,.24), transparent 70%),
linear-gradient(180deg, rgba(36,16,20,.97), rgba(20,10,14,.97));
box-shadow: 0 16px 40px rgba(220,38,38,.18), inset 0 1px 0 rgba(255,255,255,.04);
}
.result-card.rc-hijack_detected.drainer .rc-meta {
background: rgba(220,38,38,.18);
border-color: rgba(220,38,38,.50);
color: #fff7f7;
animation: hijackPulse 2.4s ease-in-out infinite;
}
@keyframes hijackPulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(220,38,38,.4) }
50% { box-shadow: 0 0 0 6px rgba(220,38,38,0) }
}
/* v2 staging badge · so we can tell which version we're on at a glance */
.brand-v2-badge {
display: inline-block;
margin-left: 8px;
padding: 2px 8px;
font: 700 9.5px/1 'JetBrains Mono', monospace;
letter-spacing: .14em;
text-transform: uppercase;
color: #A78BFA;
background: rgba(139,124,246,.14);
border: 1px solid rgba(139,124,246,.36);
border-radius: 999px;
vertical-align: 2px;
animation: v2Pulse 2.4s ease-in-out infinite;
}
@keyframes v2Pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(139,124,246,.4) }
50% { box-shadow: 0 0 0 4px rgba(139,124,246,0) }
}
/* =================================================================
/bridge wizard · v2
================================================================= */
.br-wz { max-width: 540px }
.br-pick { display: grid; gap: 14px; padding: 4px 2px 2px }
.br-row { display: flex; flex-direction: column; gap: 6px }
.br-lbl {
font: 600 10.5px/1 'JetBrains Mono', monospace;
color: var(--accent-2, #A78BFA);
text-transform: uppercase; letter-spacing: .12em;
}
.br-sel, .br-amt, .br-recv {
width: 100%;
padding: 11px 14px;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.10);
border-radius: 10px;
color: var(--txt, #f4f4f6);
font: 500 14px/1.3 'Inter', sans-serif;
outline: none;
transition: border-color .18s ease, background .18s ease;
}
.br-sel { appearance: none; -webkit-appearance: none; padding-right: 36px; background-image: linear-gradient(45deg, transparent 50%, var(--accent-2, #A78BFA) 50%), linear-gradient(135deg, var(--accent-2, #A78BFA) 50%, transparent 50%); background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat }
.br-amt, .br-recv:focus, .br-sel:focus { border-color: rgba(139,124,246,.42); background: rgba(139,124,246,.04) }
.br-amt { font: 600 17px/1.2 'Space Grotesk', sans-serif }
.br-recv { font: 500 12.5px/1.4 'JetBrains Mono', monospace }
.br-amt-sub { font: 500 11.5px/1.4 'Inter', sans-serif; color: var(--txt-3, #9aa3b2) }
.br-note {
padding: 11px 14px;
background: rgba(0,82,255,.06);
border: 1px solid rgba(0,82,255,.22);
border-radius: 9px;
font: 400 12.5px/1.55 'Inter', sans-serif;
color: var(--txt-3, #9aa3b2);
}
.br-quote { padding: 6px 2px 2px }
.br-quote-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; padding: 16px; background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.06); border-radius: 12px; margin-bottom: 14px }
.br-quote-side { text-align: center }
.br-quote-k { font: 600 10.5px/1 'JetBrains Mono', monospace; color: var(--txt-3, #9aa3b2); text-transform: uppercase; letter-spacing: .12em; margin-bottom: 8px }
.br-quote-v {
font: 700 22px/1.1 'Space Grotesk', sans-serif;
letter-spacing: -.01em;
background: linear-gradient(135deg, #fff, #A78BFA);
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.br-quote-v-out { background: linear-gradient(135deg, #fff, #86efac); -webkit-background-clip: text; background-clip: text; color: transparent }
.br-quote-sym { font-size: 13px; opacity: .85 }
.br-quote-sub { font: 500 11.5px/1 'JetBrains Mono', monospace; color: var(--txt-4, #6b7384); margin-top: 6px; text-transform: uppercase; letter-spacing: .1em }
.br-quote-arrow { font: 700 22px/1 'Inter', sans-serif; color: var(--accent-2, #A78BFA); opacity: .65 }
.br-meta { display: grid; gap: 5px; padding: 10px 14px; background: rgba(255,255,255,.02); border-radius: 9px; margin-bottom: 14px; font-size: 12.5px }
.br-meta-row { display: flex; justify-content: space-between; gap: 12px }
.br-meta-row span:first-child { color: var(--txt-3, #9aa3b2) }
.br-meta-row span:last-child { color: var(--txt, #f4f4f6); font-weight: 500 }
.br-meta-row .mono { font: 500 12px/1 'JetBrains Mono', monospace }
.br-sign { display: grid; gap: 10px; padding: 4px 2px }
.br-sign-row { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 9px 12px; background: rgba(255,255,255,.025); border-radius: 8px; font-size: 13px; align-items: center }
.br-sign-k { color: var(--txt-3, #9aa3b2); font: 600 10.5px/1 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: .08em }
.br-sign-v { color: var(--txt, #f4f4f6); font-weight: 500; word-break: break-all }
.br-sign-v.mono { font: 500 12px/1.4 'JetBrains Mono', monospace; color: var(--accent-2, #A78BFA) }
.br-status { padding: 10px 14px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); border-radius: 8px; font-size: 12.5px; color: var(--txt-2, #c4c5cc); line-height: 1.55 }
.br-status.warn { background: rgba(251,191,36,.06); border-color: rgba(251,191,36,.24); color: #fde68a }
.br-status-wrap { display: grid; gap: 8px; padding: 4px 2px }
.br-status-row { display: grid; grid-template-columns: 32px 1fr; gap: 12px; padding: 12px 14px; background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.05); border-radius: 10px; align-items: center }
.br-status-row.done { border-color: rgba(74,222,128,.24); background: rgba(74,222,128,.05) }
.br-status-row.pending { border-color: rgba(251,191,36,.24); background: rgba(251,191,36,.05) }
.br-status-row.queued { opacity: .6 }
.br-step-ico { width: 32px; height: 32px; display: grid; place-items: center; background: rgba(255,255,255,.04); border-radius: 8px; font-size: 14px }
.br-status-row.done .br-step-ico { background: rgba(74,222,128,.16); color: #86efac }
.br-status-row.pending .br-step-ico { background: rgba(251,191,36,.16) }
.br-step-body { font-size: 13px; color: var(--txt, #f4f4f6); line-height: 1.45 }
.br-step-body .dim { color: var(--txt-3, #9aa3b2); font-size: 11.5px }
.xg-spinner-sm { width: 14px; height: 14px; border-width: 2px }
@media (max-width: 560px) {
.br-quote-row { grid-template-columns: 1fr; text-align: center }
.br-quote-arrow { transform: rotate(90deg); margin: 4px 0 }
.br-sign-row { grid-template-columns: 1fr; padding: 10px 12px }
}
/* Bridge wizard · copy button on the deposit address */
.br-copy-btn {
display: inline-flex;
align-items: center;
gap: 5px;
margin-left: 8px;
padding: 4px 9px;
background: rgba(139,124,246,.10);
border: 1px solid rgba(139,124,246,.30);
border-radius: 7px;
color: var(--accent-2, #A78BFA);
font: 600 11px/1 'Inter', sans-serif;
cursor: pointer;
transition: all .15s ease;
vertical-align: 2px;
}
.br-copy-btn:hover {
background: rgba(139,124,246,.18);
border-color: rgba(139,124,246,.50);
color: #fff;
}
.br-copy-btn.is-copied {
background: rgba(74,222,128,.14);
border-color: rgba(74,222,128,.40);
color: #86efac;
}
.br-copy-btn .ico-copy { display: inline-block }
/* Note variants for status step */
.br-note.pos {
background: rgba(74,222,128,.06);
border-color: rgba(74,222,128,.24);
color: #bbf7d0;
}
.br-note.warn {
background: rgba(251,191,36,.06);
border-color: rgba(251,191,36,.24);
color: #fde68a;
}
.br-note.bad {
background: rgba(251,113,133,.06);
border-color: rgba(251,113,133,.30);
color: #fda4af;
}
/* Failed state for status row */
.br-status-row.failed {
border-color: rgba(251,113,133,.30);
background: rgba(251,113,133,.05);
}
.br-status-row.failed .br-step-ico {
background: rgba(251,113,133,.18);
color: #fda4af;
}
/* =================================================================
/predict bet wizard · v2 · Edge Prediction Market
================================================================= */
.pb-wz { max-width: 540px }
.pb-wz .modal-body { display: grid; gap: 14px }
.pb-wz .modal-foot {
display: flex; gap: 10px; justify-content: flex-end;
padding: 14px 22px 18px;
border-top: 1px solid var(--line-1);
background: rgba(0,0,0,.18);
}
.pb-wz .form-row { display: grid; gap: 8px }
.pb-wz .form-row label {
font: 600 10.5px/1 var(--mono); color: var(--accent-2, #A78BFA);
text-transform: uppercase; letter-spacing: .12em;
}
.pb-wz .hint { font: 500 11.5px/1.4 'Inter', sans-serif; color: var(--txt-3, #9aa3b2) }
.pb-wz .mono { font: 500 12px/1.4 var(--mono); color: var(--txt, #f4f4f6) }
.pb-wz .loading { display: flex; align-items: center; gap: 10px; padding: 18px 2px; color: var(--txt-2, #c4c5cc); font-size: 13px }
.pb-wz .spinner {
width: 14px; height: 14px;
border: 2px solid rgba(255,255,255,.18);
border-top-color: var(--accent-2, #A78BFA);
border-radius: 50%;
animation: pb-spin .8s linear infinite;
display: inline-block; vertical-align: -2px;
}
@keyframes pb-spin { to { transform: rotate(360deg) } }
.pb-wz .note {
padding: 11px 14px;
background: rgba(0,82,255,.06);
border: 1px solid rgba(0,82,255,.22);
border-radius: 9px;
font: 400 12.5px/1.55 'Inter', sans-serif;
color: var(--txt-3, #9aa3b2);
}
.pb-wz .error {
padding: 11px 14px;
background: rgba(251,113,133,.06);
border: 1px solid rgba(251,113,133,.30);
border-radius: 9px;
font: 500 12.5px/1.55 'Inter', sans-serif;
color: #fda4af;
}
.pb-market {
padding: 14px 16px;
background: rgba(255,255,255,.025);
border: 1px solid rgba(255,255,255,.06);
border-radius: 12px;
display: grid; gap: 8px;
}
.pb-q { font: 600 14px/1.4 'Space Grotesk', sans-serif; color: var(--txt, #f4f4f6) }
.pb-side {
display: inline-flex; align-items: center; gap: 8px;
padding: 6px 12px;
border-radius: 7px;
font: 600 12.5px/1 var(--mono);
letter-spacing: .04em;
width: fit-content;
}
.pb-side.pb-yes { background: rgba(74,222,128,.12); color: #86efac; border: 1px solid rgba(74,222,128,.30) }
.pb-side.pb-no { background: rgba(251,113,133,.12); color: #fda4af; border: 1px solid rgba(251,113,133,.30) }
.pb-amt-wrap { position: relative; display: block }
.pb-amt-wrap input {
width: 100%;
padding: 14px 60px 14px 14px;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.10);
border-radius: 10px;
color: var(--txt, #f4f4f6);
font: 700 18px/1.2 'Space Grotesk', sans-serif;
outline: none;
transition: border-color .15s ease, background .15s ease;
}
.pb-amt-wrap input:focus { border-color: rgba(139,124,246,.42); background: rgba(139,124,246,.04) }
.pb-amt-unit {
position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
font: 600 12px/1 var(--mono); color: var(--txt-3, #9aa3b2);
letter-spacing: .08em;
}
.pb-quick { display: flex; flex-wrap: wrap; gap: 6px }
.pb-chip {
padding: 6px 12px;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.10);
border-radius: 7px;
color: var(--txt-2, #c4c5cc);
font: 600 12px/1 var(--mono);
cursor: pointer;
transition: all .15s ease;
}
.pb-chip:hover { background: rgba(139,124,246,.10); border-color: rgba(139,124,246,.40); color: #fff }
.pb-summary, .pb-approval, .pb-confirm {
display: grid; gap: 6px;
padding: 12px 14px;
background: rgba(255,255,255,.025);
border: 1px solid rgba(255,255,255,.06);
border-radius: 10px;
font-size: 13px;
}
.pb-row { display: flex; justify-content: space-between; gap: 12px; align-items: center }
.pb-row > span:first-child { color: var(--txt-3, #9aa3b2); font-size: 12.5px }
.pb-row > span:last-child { color: var(--txt, #f4f4f6); font-weight: 600; text-align: right; word-break: break-all }
.pb-confirm-q { font: 600 13.5px/1.4 'Space Grotesk', sans-serif; color: var(--txt, #f4f4f6); padding-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,.06) }
.pb-confirm-side {
display: inline-flex; align-items: center; gap: 8px;
padding: 6px 12px;
border-radius: 7px;
font: 600 12.5px/1 var(--mono);
width: fit-content;
margin: 4px 0 4px;
}
.pb-confirm-side.pb-yes { background: rgba(74,222,128,.12); color: #86efac; border: 1px solid rgba(74,222,128,.30) }
.pb-confirm-side.pb-no { background: rgba(251,113,133,.12); color: #fda4af; border: 1px solid rgba(251,113,133,.30) }
.pb-success { text-align: center; padding: 12px 6px 6px; display: grid; gap: 8px; justify-items: center }
.pb-success-icon {
width: 56px; height: 56px;
display: grid; place-items: center;
background: rgba(74,222,128,.15);
color: #86efac;
font-size: 30px; font-weight: 700;
border-radius: 50%;
border: 1px solid rgba(74,222,128,.40);
margin-bottom: 2px;
}
.pb-success-title { font: 700 18px/1.2 'Space Grotesk', sans-serif; color: var(--txt, #f4f4f6) }
.pb-success-sub { font: 500 12.5px/1.5 'Inter', sans-serif; color: var(--txt-3, #9aa3b2); max-width: 380px }
/* =================================================================
Bridge history card · /bridges
================================================================= */
.bh-card {
padding: 0;
overflow: hidden;
background: linear-gradient(180deg, rgba(22,22,30,.96), rgba(14,14,18,.96));
border: 1px solid rgba(0,82,255,.18);
box-shadow: 0 14px 36px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.04);
}
.bh-head {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
padding: 16px 20px 14px;
border-bottom: 1px solid rgba(255,255,255,.05);
background:
radial-gradient(420px 110px at 0% -40px, rgba(0,82,255,.10), transparent 70%),
rgba(0,0,0,.18);
flex-wrap: wrap;
}
.bh-eyebrow {
font: 600 10.5px/1 'JetBrains Mono', monospace;
color: #93c5fd;
letter-spacing: .14em;
text-transform: uppercase;
margin-bottom: 6px;
}
.bh-h {
font: 700 16px/1.2 'Space Grotesk', sans-serif;
letter-spacing: -.008em;
background: linear-gradient(135deg, #fff, #93c5fd);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.bh-meta {
font: 600 11.5px/1 'JetBrains Mono', monospace;
color: #93c5fd;
padding: 4px 9px;
background: rgba(0,82,255,.10);
border: 1px solid rgba(0,82,255,.28);
border-radius: 999px;
white-space: nowrap;
}
.bh-body { padding: 4px 0 }
.bh-row {
border-bottom: 1px solid rgba(255,255,255,.04);
}
.bh-row:last-child { border-bottom: 0 }
.bh-summary {
display: grid;
grid-template-columns: 1fr auto auto auto auto;
gap: 14px;
align-items: center;
width: 100%;
padding: 14px 20px;
background: transparent;
border: 0;
cursor: pointer;
text-align: left;
color: var(--txt-1, #f4f4f6);
font: 500 13px/1.3 'Inter', sans-serif;
transition: background .15s ease;
}
.bh-summary:hover { background: rgba(255,255,255,.025) }
.bh-row.is-open .bh-summary { background: rgba(0,82,255,.04) }
.bh-pair {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.bh-asset {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 10px;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.08);
border-radius: 8px;
}
.bh-icon { font-size: 13px; line-height: 1 }
.bh-sym { font: 600 12px/1 'Inter', sans-serif; color: var(--txt-1, #f4f4f6) }
.bh-chain {
font: 500 10px/1 'JetBrains Mono', monospace;
color: var(--txt-3, #9aa3b2);
text-transform: uppercase;
letter-spacing: .08em;
margin-left: 2px;
}
.bh-arrow { color: var(--accent-2, #A78BFA); font-weight: 700; font-size: 13px; opacity: .65 }
.bh-amount {
font: 600 13px/1 'JetBrains Mono', monospace;
color: var(--accent-3, #C4B5FD);
white-space: nowrap;
}
.bh-status {
font: 600 10.5px/1 'JetBrains Mono', monospace;
text-transform: uppercase;
letter-spacing: .12em;
padding: 5px 9px;
border-radius: 999px;
white-space: nowrap;
}
.bh-status-pos { color: #86efac; background: rgba(74,222,128,.10); border: 1px solid rgba(74,222,128,.30) }
.bh-status-warn { color: #fde68a; background: rgba(251,191,36,.10); border: 1px solid rgba(251,191,36,.30) }
.bh-status-neg { color: #fda4af; background: rgba(251,113,133,.10); border: 1px solid rgba(251,113,133,.30) }
.bh-status-live { color: #93c5fd; background: rgba(0,82,255,.10); border: 1px solid rgba(0,82,255,.30); animation: bhPulse 2.4s ease-in-out infinite }
.bh-status-dim { color: var(--txt-3, #9aa3b2); background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.10) }
@keyframes bhPulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(0,82,255,.4) }
50% { box-shadow: 0 0 0 5px rgba(0,82,255,0) }
}
.bh-ago {
font: 500 11px/1 'JetBrains Mono', monospace;
color: var(--txt-4, #6b7384);
white-space: nowrap;
}
.bh-chev {
font-size: 11px;
color: var(--txt-3, #9aa3b2);
transition: transform .2s ease;
}
.bh-row.is-open .bh-chev { transform: rotate(180deg) }
.bh-detail {
padding: 16px 20px 18px;
background: rgba(0,0,0,.20);
border-top: 1px solid rgba(255,255,255,.04);
}
.bh-grid {
display: grid;
grid-template-columns: 140px 1fr;
gap: 8px 14px;
font-size: 12.5px;
}
.bh-k {
color: var(--txt-3, #9aa3b2);
font: 600 10.5px/1.4 'JetBrains Mono', monospace;
text-transform: uppercase;
letter-spacing: .08em;
}
.bh-v {
color: var(--txt-2, #c4c5cc);
word-break: break-all;
}
.bh-v.mono { font: 500 12px/1.4 'JetBrains Mono', monospace }
.bh-link {
color: var(--accent-2, #A78BFA);
text-decoration: none;
border-bottom: 1px dashed rgba(139,124,246,.32);
}
.bh-link:hover { color: #fff; border-bottom-color: #fff }
.bh-empty {
padding: 28px 20px;
text-align: center;
color: var(--txt-3, #9aa3b2);
font-size: 13px;
}
.bh-foot {
padding: 11px 20px;
background: rgba(0,0,0,.18);
border-top: 1px solid rgba(255,255,255,.04);
font: 500 11.5px/1.4 'Inter', sans-serif;
color: var(--txt-3, #6b7384);
}
@media (max-width: 640px) {
.bh-summary { grid-template-columns: 1fr auto; row-gap: 8px }
.bh-amount { grid-column: 1 / -1; margin-top: 2px; text-align: left }
.bh-status { grid-column: 1 / -1; justify-self: start }
.bh-ago, .bh-chev { display: none }
.bh-pair { flex-wrap: wrap }
.bh-grid { grid-template-columns: 110px 1fr }
}
/* Bridge quote · Edge route badge */
.br-route {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
margin-top: 12px;
padding: 12px 14px;
background:
linear-gradient(135deg, rgba(139,124,246,.10), rgba(0,82,255,.08));
border: 1px solid rgba(139,124,246,.30);
border-radius: 11px;
}
.br-route-l { display: grid; gap: 3px; min-width: 0 }
.br-route-h {
font: 700 14px/1 'Space Grotesk', sans-serif;
background: linear-gradient(135deg, #fff, #A78BFA);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
letter-spacing: -.006em;
}
.br-route-s {
font: 500 11px/1.4 'JetBrains Mono', monospace;
color: var(--txt-3, #9aa3b2);
letter-spacing: .04em;
}
.br-route-r {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 11px;
background: rgba(74,222,128,.10);
border: 1px solid rgba(74,222,128,.30);
border-radius: 999px;
font: 600 10.5px/1 'JetBrains Mono', monospace;
color: #86efac;
text-transform: uppercase;
letter-spacing: .14em;
white-space: nowrap;
}
.br-route-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: #4ade80;
box-shadow: 0 0 8px #4ade80;
animation: brRouteDot 2s ease-in-out infinite;
}
@keyframes brRouteDot {
0%, 100% { opacity: 1; transform: scale(1) }
50% { opacity: .55; transform: scale(.78) }
}
@media (max-width: 460px) {
.br-route { flex-direction: column; align-items: flex-start; gap: 8px }
}
/* Bridge wizard · auto-detect indicator on the Sign step (non-EVM origins) */
.br-detect {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
margin-top: 6px;
background: rgba(0,82,255,.05);
border: 1px solid rgba(0,82,255,.22);
border-radius: 9px;
font: 500 12px/1.45 'Inter', sans-serif;
color: #93c5fd;
}
.br-detect .dim { color: var(--txt-3, #9aa3b2) }
/* Quote countdown clock variants */
.br-route-r.is-low {
background: rgba(251,191,36,.10);
border-color: rgba(251,191,36,.42);
color: #fde68a;
}
.br-route-r.is-low .br-route-dot {
background: #fbbf24;
box-shadow: 0 0 8px #fbbf24;
}
.br-route-r.is-expired {
background: rgba(251,113,133,.10);
border-color: rgba(251,113,133,.42);
color: #fda4af;
animation: none;
}
.br-route-r.is-expired .br-route-dot {
background: #fb7185;
box-shadow: 0 0 8px #fb7185;
animation: none;
}
/* Bridge wizard · no-deposit-after-30-min failed indicator */
.br-detect-failed {
display: grid;
grid-template-columns: 28px 1fr;
gap: 12px;
padding: 12px 14px;
margin-top: 6px;
background: rgba(251,113,133,.08);
border: 1px solid rgba(251,113,133,.32);
border-radius: 9px;
font: 500 12.5px/1.5 'Inter', sans-serif;
color: #fecdd3;
align-items: start;
}
.br-detect-failed-ico {
width: 28px;
height: 28px;
display: grid;
place-items: center;
background: rgba(251,113,133,.20);
border-radius: 7px;
color: #fda4af;
font-weight: 700;
}
.br-detect-failed-body b { color: #fff }
.br-detect-failed-body .dim { color: #fda4af; opacity: .82; font-size: 11.5px; margin-top: 4px; line-height: 1.5 }
/* Bridge wizard · "amount below minimum" recovery card */
.br-min-fail {
padding: 18px 16px 6px;
text-align: center;
}
.br-min-fail-h {
font: 600 16px/1.35 'Space Grotesk', sans-serif;
background: linear-gradient(135deg, #fff, #A78BFA);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
margin-bottom: 10px;
}
.br-min-fail-sub {
font: 400 13px/1.55 'Inter', sans-serif;
color: var(--txt-3, #9aa3b2);
margin-bottom: 6px;
max-width: 400px;
margin-left: auto;
margin-right: auto;
}
.br-min-fail-sub code {
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.10);
padding: 1px 6px;
border-radius: 5px;
font: 500 11.5px/1.3 'JetBrains Mono', monospace;
color: var(--accent-3, #C4B5FD);
}
/* 0xWork inbox tab · activity feed rows · v2 mirror */
.drawer-row.ox-row {
display: block;
padding: 12px 14px;
margin-bottom: 6px;
background: rgba(255,255,255,.025);
border: 1px solid rgba(255,255,255,.06);
border-radius: 9px;
text-decoration: none;
color: inherit;
transition: background .15s ease, border-color .15s ease;
}
.drawer-row.ox-row:hover {
background: rgba(139,124,246,.06);
border-color: rgba(139,124,246,.28);
}
.ox-row-h { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; flex-wrap: wrap }
.ox-verb {
font: 600 10px/1 'JetBrains Mono', monospace;
text-transform: uppercase;
letter-spacing: .12em;
padding: 3px 7px;
border-radius: 5px;
}
.ox-verb-posted { color: #93c5fd; background: rgba(0,82,255,.10); border: 1px solid rgba(0,82,255,.28) }
.ox-verb-active { color: #C4B5FD; background: rgba(139,124,246,.10); border: 1px solid rgba(139,124,246,.32) }
.ox-verb-pos { color: #86efac; background: rgba(74,222,128,.10); border: 1px solid rgba(74,222,128,.28) }
.ox-task-id { color: var(--txt-3); font: 500 11px/1 'JetBrains Mono', monospace }
.ox-status {
font: 500 9.5px/1 'JetBrains Mono', monospace;
text-transform: uppercase;
letter-spacing: .1em;
padding: 2px 6px;
border-radius: 4px;
background: rgba(255,255,255,.04);
color: var(--txt-3);
border: 1px solid rgba(255,255,255,.08);
}
.ox-status.ox-open { color: #86efac; border-color: rgba(74,222,128,.30); background: rgba(74,222,128,.06) }
.ox-status.ox-claimed { color: #C4B5FD; border-color: rgba(139,124,246,.30); background: rgba(139,124,246,.06) }
.ox-status.ox-submitted { color: #93c5fd; border-color: rgba(0,82,255,.30); background: rgba(0,82,255,.06) }
.ox-status.ox-approved { color: #c4b5fd; border-color: rgba(167,139,250,.30); background: rgba(167,139,250,.08) }
.ox-row-title { font: 500 13px/1.4 'Inter', sans-serif; color: var(--txt-1, #f4f4f6); margin-bottom: 3px }
.ox-row-sub { font: 500 11.5px/1.3 'JetBrains Mono', monospace; color: var(--txt-3) }
/* 0xWork inbox row · upgraded layout · v=106+ */
.drawer-row.ox-row {
display: grid;
grid-template-columns: 36px 1fr auto;
gap: 10px;
align-items: center;
width: 100%;
padding: 12px 14px;
margin-bottom: 6px;
background: linear-gradient(180deg, rgba(20,20,28,.45), rgba(14,14,18,.45));
border: 1px solid rgba(255,255,255,.06);
border-radius: 10px;
text-align: left;
color: inherit;
cursor: pointer;
transition: background .15s ease, border-color .15s ease, transform .12s ease;
}
.drawer-row.ox-row:hover {
background: linear-gradient(180deg, rgba(139,124,246,.07), rgba(139,124,246,.02));
border-color: rgba(139,124,246,.32);
transform: translateY(-1px);
}
.drawer-row.ox-row:active { transform: translateY(0) }
.ox-row-icon {
width: 36px; height: 36px;
display: grid; place-items: center;
background: linear-gradient(135deg, rgba(139,124,246,.14), rgba(0,82,255,.08));
border: 1px solid rgba(255,255,255,.06);
border-radius: 9px;
font-size: 18px;
}
.ox-row-body { min-width: 0; overflow: hidden }
.ox-row-right { display: flex; align-items: center; gap: 6px; min-width: 0 }
.ox-bounty-chip {
font: 700 12.5px/1 'Space Grotesk', sans-serif;
background: linear-gradient(135deg, #fff, #A78BFA);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
padding: 4px 8px;
border-radius: 7px;
background-color: rgba(139,124,246,.10);
border: 1px solid rgba(139,124,246,.30);
-webkit-text-fill-color: transparent;
}
.ox-row-chev {
font: 700 18px/1 'Inter', sans-serif;
color: var(--txt-3);
opacity: .55;
}
.drawer-row.ox-row:hover .ox-row-chev { color: var(--accent-2, #A78BFA); opacity: 1 }
/* 0xWork task-detail card · rendered in chat after inbox click */
.result-card.tdc-card {
padding: 0;
overflow: hidden;
background: linear-gradient(180deg, rgba(22,22,30,.96), rgba(14,14,18,.96));
border: 1px solid rgba(139,124,246,.18);
box-shadow: 0 14px 36px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.04);
}
.tdc-card.tdc-tone-pos { border-color: rgba(74,222,128,.28) }
.tdc-card.tdc-tone-warn { border-color: rgba(251,191,36,.28) }
.tdc-card.tdc-tone-live { border-color: rgba(0,82,255,.28) }
.tdc-card.tdc-tone-neg { border-color: rgba(251,113,133,.30) }
.tdc-head {
display: grid;
grid-template-columns: 1fr auto;
gap: 16px;
padding: 16px 20px 14px;
border-bottom: 1px solid rgba(255,255,255,.05);
background:
radial-gradient(420px 110px at 0% -40px, rgba(139,124,246,.10), transparent 70%),
rgba(0,0,0,.18);
align-items: start;
}
.tdc-head-l { display: flex; gap: 12px; align-items: center; min-width: 0 }
.tdc-icon {
width: 44px; height: 44px;
display: grid; place-items: center;
background: linear-gradient(135deg, rgba(139,124,246,.16), rgba(0,82,255,.08));
border: 1px solid rgba(255,255,255,.06);
border-radius: 11px;
font-size: 22px;
}
.tdc-head-meta { min-width: 0 }
.tdc-eyebrow {
font: 600 10.5px/1 'JetBrains Mono', monospace;
color: var(--accent-2, #A78BFA);
letter-spacing: .14em;
text-transform: uppercase;
margin-bottom: 6px;
}
.tdc-mine {
color: #86efac;
background: rgba(74,222,128,.10);
border: 1px solid rgba(74,222,128,.28);
padding: 2px 7px;
border-radius: 4px;
font: 600 9.5px/1 'JetBrains Mono', monospace;
}
.tdc-id { font: 600 14px/1 'Space Grotesk', sans-serif; color: var(--txt-1, #f4f4f6) }
.tdc-head-r { display: flex; flex-direction: column; align-items: flex-end; gap: 8px }
.tdc-bounty {
font: 800 24px/1 'Space Grotesk', sans-serif;
letter-spacing: -.012em;
background: linear-gradient(135deg, #fff, #A78BFA);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.tdc-bounty-sub {
font: 600 10.5px/1 'JetBrains Mono', monospace;
color: var(--txt-3);
margin-left: 4px;
background: none;
-webkit-text-fill-color: var(--txt-3);
}
.tdc-status {
font: 600 10.5px/1 'JetBrains Mono', monospace;
text-transform: uppercase;
letter-spacing: .14em;
padding: 4px 9px;
border-radius: 999px;
}
.tdc-status-pos { color: #86efac; background: rgba(74,222,128,.10); border: 1px solid rgba(74,222,128,.30) }
.tdc-status-warn { color: #fde68a; background: rgba(251,191,36,.10); border: 1px solid rgba(251,191,36,.30) }
.tdc-status-live { color: #93c5fd; background: rgba(0,82,255,.10); border: 1px solid rgba(0,82,255,.30); animation: tdcPulse 2.4s ease-in-out infinite }
.tdc-status-neg { color: #fda4af; background: rgba(251,113,133,.10); border: 1px solid rgba(251,113,133,.30) }
.tdc-status-dim { color: var(--txt-3); background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.10) }
@keyframes tdcPulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(0,82,255,.4) }
50% { box-shadow: 0 0 0 5px rgba(0,82,255,0) }
}
.tdc-desc {
padding: 14px 20px;
font: 400 13.5px/1.55 'Inter', sans-serif;
color: var(--txt-2, #c4c5cc);
border-bottom: 1px solid rgba(255,255,255,.04);
}
.tdc-meta-grid {
display: grid;
gap: 6px;
padding: 14px 20px;
border-bottom: 1px solid rgba(255,255,255,.04);
}
.tdc-meta-row {
display: flex;
justify-content: space-between;
gap: 12px;
font-size: 12.5px;
}
.tdc-k {
color: var(--txt-3, #9aa3b2);
font: 600 10.5px/1.4 'JetBrains Mono', monospace;
text-transform: uppercase;
letter-spacing: .08em;
}
.tdc-v { color: var(--txt-2, #c4c5cc); text-align: right; word-break: break-all }
.tdc-v.mono { font: 500 12px/1.4 'JetBrains Mono', monospace; color: var(--accent-2, #A78BFA) }
.tdc-you {
color: #86efac;
background: rgba(74,222,128,.10);
border: 1px solid rgba(74,222,128,.30);
padding: 1px 6px;
border-radius: 4px;
font: 600 9.5px/1 'JetBrains Mono', monospace;
text-transform: uppercase;
letter-spacing: .1em;
}
.tdc-deadline { font-weight: 600 }
.tdc-deadline-pos { color: #86efac }
.tdc-deadline-warn { color: #fde68a }
.tdc-deadline-neg { color: #fda4af }
.tdc-cta-row {
display: flex;
gap: 8px;
padding: 12px 20px;
background: rgba(0,0,0,.18);
flex-wrap: wrap;
}
.tdc-cta {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
border-radius: 8px;
font: 600 12px/1 'Inter', sans-serif;
text-decoration: none;
border: 0;
transition: transform .15s ease, box-shadow .15s ease;
}
.tdc-cta-primary {
background: linear-gradient(135deg, var(--accent-2, #A78BFA), var(--accent, #8B7CF6));
color: #0a0a0d !important;
box-shadow: 0 4px 12px rgba(139,124,246,.32);
}
.tdc-cta-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(139,124,246,.48); color: #0a0a0d !important; border: 0 }
.tdc-cta-ghost {
background: rgba(255,255,255,.04);
color: var(--txt-2, #c4c5cc) !important;
border: 1px solid rgba(255,255,255,.08);
}
.tdc-cta-ghost:hover { background: rgba(255,255,255,.08); color: #fff !important; border-color: rgba(255,255,255,.16) }
@media (max-width: 560px) {
.tdc-head { grid-template-columns: 1fr; gap: 10px }
.tdc-head-r { flex-direction: row; align-items: center }
.tdc-bounty { font-size: 20px }
}
/* X tweet metrics · styled pill row (v=108+) */
.x-metrics { margin-top: 8px }
.xm-grid {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.xm-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 10px;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.08);
border-radius: 8px;
font: 500 11.5px/1 'Inter', sans-serif;
color: var(--txt-2, #c4c5cc);
transition: background .15s ease, border-color .15s ease;
}
.xm-pill:hover {
background: rgba(139,124,246,.08);
border-color: rgba(139,124,246,.32);
color: var(--accent-2, #A78BFA);
}
.xm-ico { font-size: 12px; line-height: 1 }
.xm-val { font: 600 12px/1 'JetBrains Mono', monospace; color: var(--txt-1, #f4f4f6) }
.xm-pill:hover .xm-val { color: var(--accent-2, #A78BFA) }
.xm-row {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 10px;
background: rgba(255,255,255,.025);
border: 1px solid rgba(255,255,255,.06);
border-radius: 8px;
font: 500 11.5px/1 'Inter', sans-serif;
color: var(--txt-3, #9aa3b2);
}
.xm-loading .xm-pulse {
width: 8px; height: 8px; border-radius: 50%;
background: var(--accent-2, #A78BFA);
box-shadow: 0 0 8px var(--accent-2, #A78BFA);
animation: xmPulse 1.4s ease-in-out infinite;
}
@keyframes xmPulse {
0%, 100% { opacity: 1; transform: scale(1) }
50% { opacity: .55; transform: scale(.78) }
}
.posted-card .di-actions { margin-top: 8px }
/* =================================================================
Edge Forge · advanced launch wizard · .fa-wz
================================================================= */
.fa-wz { max-width: 620px }
.fa-wz .modal-body { display: grid; gap: 14px }
.fa-form { display: grid; gap: 14px; padding: 4px 2px 2px }
.fa-row { display: grid; gap: 6px }
.fa-lbl {
font: 600 10.5px/1 var(--mono); color: var(--accent-2, #A78BFA);
text-transform: uppercase; letter-spacing: .12em;
display: flex; justify-content: space-between; align-items: center;
}
.fa-val { color: #fff; font: 700 13px/1 'Space Grotesk', sans-serif; letter-spacing: 0 }
.fa-input {
width: 100%; padding: 10px 12px;
background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.10);
border-radius: 9px; color: var(--txt, #f4f4f6);
font: 600 14px/1.2 'Space Grotesk', sans-serif; outline: none;
transition: border-color .15s, background .15s;
}
.fa-input:focus { border-color: rgba(139,124,246,.42); background: rgba(139,124,246,.04) }
.fa-slide-row { display: grid; grid-template-columns: 1fr 96px; gap: 10px; align-items: center }
.fa-slide {
-webkit-appearance: none; appearance: none;
width: 100%; height: 6px; border-radius: 3px;
background: rgba(255,255,255,.10); outline: none; cursor: pointer;
}
.fa-slide::-webkit-slider-thumb {
-webkit-appearance: none; appearance: none;
width: 18px; height: 18px; border-radius: 50%;
background: var(--accent-2, #A78BFA); border: 2px solid #1a1a22;
box-shadow: 0 0 12px rgba(139,124,246,.45); cursor: pointer;
}
.fa-slide::-moz-range-thumb {
width: 18px; height: 18px; border-radius: 50%;
background: var(--accent-2, #A78BFA); border: 2px solid #1a1a22; cursor: pointer;
}
.fa-num {
padding: 8px 10px; text-align: right;
background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.10);
border-radius: 7px; color: var(--txt, #f4f4f6);
font: 600 13px/1 var(--mono); outline: none;
}
.fa-num:focus { border-color: rgba(139,124,246,.42) }
.fa-hint { font: 500 11.5px/1.5 'Inter', sans-serif; color: var(--txt-3, #9aa3b2) }
.fa-hint b { color: var(--txt-2, #c4c5cc) }
.fa-hint code { font: 500 11.5px/1 var(--mono); background: var(--bg-2); padding: 1px 5px; border-radius: 4px; border: 1px solid var(--line-1) }
.fa-split { display: grid; gap: 8px; padding: 12px 14px; background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.06); border-radius: 10px }
.fa-split-bar { display: flex; height: 11px; border-radius: 6px; overflow: hidden; background: #14141a; border: 1px solid rgba(255,255,255,.06) }
.fa-seg { transition: width .18s ease }
.fa-seg-c { background: linear-gradient(90deg, #A78BFA, #8B7CF6) }
.fa-seg-i { background: linear-gradient(90deg, #3b82f6, #0052ff) }
.fa-seg-d { background: rgba(255,255,255,.18) }
.fa-legend { display: flex; flex-wrap: wrap; gap: 12px; font: 500 11.5px/1 'Inter', sans-serif; color: var(--txt-3, #9aa3b2) }
.fa-legend .sw { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; vertical-align: middle }
.fa-legend .sw-c { background: #A78BFA }
.fa-legend .sw-i { background: #3b82f6 }
.fa-legend .sw-d { background: rgba(255,255,255,.45) }
.fa-legend b { color: var(--txt, #f4f4f6); font-weight: 600; margin-left: 2px }
.fa-alloc { display: grid; gap: 6px; padding: 10px 14px; background: rgba(0,82,255,.05); border: 1px solid rgba(0,82,255,.18); border-radius: 9px; font-size: 12.5px }
.fa-alloc-row { display: flex; justify-content: space-between; gap: 12px; color: var(--txt-3, #9aa3b2) }
.fa-alloc-row b { color: var(--txt, #f4f4f6); font-weight: 600 }
.fa-note { padding: 10px 14px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); border-radius: 9px; font: 400 12.5px/1.55 'Inter', sans-serif; color: var(--txt-2, #c4c5cc) }
.fa-note.info { background: rgba(0,82,255,.06); border-color: rgba(0,82,255,.22); color: #bfd0ff }
.fa-note code { font: 500 12px/1 var(--mono); background: var(--bg-2); padding: 2px 6px; border-radius: 5px }
.fa-note b { color: #fff }
.fa-err { padding: 11px 14px; background: rgba(251,113,133,.06); border: 1px solid rgba(251,113,133,.30); border-radius: 9px; font: 500 12.5px/1.55 'Inter', sans-serif; color: #fda4af }
.fa-loading { display: flex; align-items: center; gap: 10px; padding: 18px 4px; color: var(--txt-2, #c4c5cc); font-size: 13px }
.fa-spinner { width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.18); border-top-color: var(--accent-2, #A78BFA); border-radius: 50%; animation: fa-spin .8s linear infinite; display: inline-block; vertical-align: -2px }
@keyframes fa-spin { to { transform: rotate(360deg) } }
.fa-preview, .fa-mine, .fa-sign { display: grid; gap: 8px; padding: 4px 2px }
.fa-pv-row { display: flex; justify-content: space-between; gap: 12px; padding: 9px 12px; background: rgba(255,255,255,.025); border-radius: 8px; font-size: 13px; align-items: center }
.fa-pv-row .k { color: var(--txt-3, #9aa3b2); font: 600 10.5px/1 var(--mono); text-transform: uppercase; letter-spacing: .08em }
.fa-pv-row .v { color: var(--txt, #f4f4f6); font-weight: 500; text-align: right; word-break: break-all }
.fa-pv-row .v.mono { font: 500 12px/1.4 var(--mono); color: var(--accent-2, #A78BFA) }
.fa-pv-row .v a { color: var(--accent-2, #A78BFA); text-decoration: none }
.fa-pv-row .v a:hover { text-decoration: underline }
.fa-bene-table { display: grid; gap: 4px; margin-top: 6px }
.fa-bene-row { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 8px 12px; background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.05); border-radius: 7px; font-size: 12px; align-items: center }
.fa-bene-row.you { background: rgba(139,124,246,.06); border-color: rgba(139,124,246,.22) }
.fa-bene-label { font: 600 11px/1.2 'Inter', sans-serif; color: var(--txt, #f4f4f6) }
.fa-bene-addr { font: 500 11px/1.2 var(--mono); color: var(--txt-3, #9aa3b2); margin-top: 2px }
.fa-bene-share { font: 700 12.5px/1 'Space Grotesk', sans-serif; color: var(--accent-2, #A78BFA) }
.fa-mine-h { display: flex; align-items: center; gap: 10px; font: 600 13px/1.4 'Inter', sans-serif; color: var(--txt, #f4f4f6) }
.fa-mine-sub { font-size: 12px; color: var(--txt-3, #9aa3b2); line-height: 1.55 }
.fa-mine-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px }
.fa-stat { padding: 10px 12px; background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.06); border-radius: 8px; text-align: center }
.fa-stat .k { font: 600 10px/1 var(--mono); color: var(--txt-3, #9aa3b2); text-transform: uppercase; letter-spacing: .12em; margin-bottom: 5px }
.fa-stat .v { font: 700 16px/1 'Space Grotesk', sans-serif; color: var(--accent-2, #A78BFA) }
.fa-mine-actions { display: flex; justify-content: center; margin-top: 6px }
.fa-sign-status { padding: 11px 14px; background: rgba(251,191,36,.06); border: 1px solid rgba(251,191,36,.22); border-radius: 9px; font: 500 12.5px/1.55 'Inter', sans-serif; color: #fde68a; display: flex; align-items: center; gap: 10px }
.fa-sign-status .mono { font: 500 11.5px/1 var(--mono) }
.fa-success { display: grid; gap: 8px; padding: 4px 2px; text-align: center }
.fa-success-icon { width: 52px; height: 52px; margin: 6px auto 2px; display: grid; place-items: center; background: rgba(74,222,128,.15); color: #86efac; font-size: 28px; font-weight: 700; border-radius: 50%; border: 1px solid rgba(74,222,128,.40) }
.fa-success-title { font: 700 17px/1.2 'Space Grotesk', sans-serif; color: var(--txt, #f4f4f6) }
.fa-success-sub { font: 500 12.5px/1.5 'Inter', sans-serif; color: var(--txt-3, #9aa3b2); margin-bottom: 6px }
.fa-success-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 8px }
.fa-claim-result { padding: 9px 12px; background: rgba(255,255,255,.025); border-radius: 7px; font-size: 12px; color: var(--txt-2, #c4c5cc); text-align: left }
.fa-claim-result a { color: var(--accent-2, #A78BFA) }
@media (max-width: 560px) {
.fa-slide-row { grid-template-columns: 1fr 80px }
.fa-bene-row { grid-template-columns: 1fr; gap: 4px }
.fa-bene-share { text-align: left }
.fa-mine-stats { grid-template-columns: 1fr }
}
/* =================================================================
/perp wizard · Edge Perps (modeled after .pb-wz · same spacing scale)
================================================================= */
.pe-wz { max-width: 560px }
.pe-wz .modal-body { display: grid; gap: 14px }
.pe-wz .modal-foot {
display: flex; gap: 10px; justify-content: flex-end;
padding: 14px 22px 18px;
border-top: 1px solid var(--line-1);
background: rgba(0,0,0,.18);
}
.pe-wz .form-row { display: grid; gap: 8px }
.pe-wz .form-row label {
font: 600 10.5px/1 var(--mono); color: var(--accent-2, #A78BFA);
text-transform: uppercase; letter-spacing: .12em;
}
.pe-wz .hint { font: 500 11.5px/1.4 'Inter', sans-serif; color: var(--txt-3, #9aa3b2) }
.pe-wz .mono { font: 500 12px/1.4 var(--mono); color: var(--txt, #f4f4f6) }
.pe-wz .loading { display: flex; align-items: center; gap: 10px; padding: 18px 2px; color: var(--txt-2, #c4c5cc); font-size: 13px }
.pe-wz .spinner {
width: 14px; height: 14px;
border: 2px solid rgba(255,255,255,.18);
border-top-color: var(--accent-2, #A78BFA);
border-radius: 50%;
animation: pe-spin .8s linear infinite;
display: inline-block; vertical-align: -2px;
}
@keyframes pe-spin { to { transform: rotate(360deg) } }
.pe-wz .note {
padding: 11px 14px;
background: rgba(0,82,255,.06);
border: 1px solid rgba(0,82,255,.22);
border-radius: 9px;
font: 400 12.5px/1.55 'Inter', sans-serif;
color: var(--txt-3, #9aa3b2);
}
.pe-wz .error {
padding: 11px 14px;
background: rgba(251,113,133,.06);
border: 1px solid rgba(251,113,133,.30);
border-radius: 9px;
font: 500 12.5px/1.55 'Inter', sans-serif;
color: #fda4af;
}
.pe-market {
padding: 14px 16px;
background: rgba(255,255,255,.025);
border: 1px solid rgba(255,255,255,.06);
border-radius: 12px;
display: grid; gap: 8px;
}
.pe-q { font: 700 16px/1.2 'Space Grotesk', sans-serif; color: var(--txt, #f4f4f6) }
.pe-q .pe-sub { font-weight: 500; font-size: 12px; color: var(--txt-3, #9aa3b2) }
.pe-side {
display: inline-flex; align-items: center; gap: 8px;
padding: 6px 12px;
border-radius: 7px;
font: 600 12.5px/1 var(--mono);
letter-spacing: .04em;
width: fit-content;
}
.pe-side.pe-long { background: rgba(74,222,128,.12); color: #86efac; border: 1px solid rgba(74,222,128,.30) }
.pe-side.pe-short { background: rgba(251,113,133,.12); color: #fda4af; border: 1px solid rgba(251,113,133,.30) }
.pe-amt-wrap { position: relative; display: block }
.pe-amt-wrap input {
width: 100%;
padding: 14px 60px 14px 14px;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.10);
border-radius: 10px;
color: var(--txt, #f4f4f6);
font: 700 18px/1.2 'Space Grotesk', sans-serif;
outline: none;
transition: border-color .15s ease, background .15s ease;
}
.pe-amt-wrap input:focus { border-color: rgba(139,124,246,.42); background: rgba(139,124,246,.04) }
.pe-amt-unit {
position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
font: 600 12px/1 var(--mono); color: var(--txt-3, #9aa3b2);
letter-spacing: .08em;
}
.pe-quick { display: flex; flex-wrap: wrap; gap: 6px }
.pe-chip {
padding: 6px 12px;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.10);
border-radius: 7px;
color: var(--txt-2, #c4c5cc);
font: 600 12px/1 var(--mono);
cursor: pointer;
transition: all .15s ease;
}
.pe-chip:hover { background: rgba(139,124,246,.10); border-color: rgba(139,124,246,.40); color: #fff }
.pe-slide-row { display: grid; grid-template-columns: 1fr 96px; gap: 10px; align-items: center }
.pe-slide {
-webkit-appearance: none; appearance: none;
width: 100%; height: 6px; background: rgba(255,255,255,.08);
border-radius: 999px; outline: none;
}
.pe-slide::-webkit-slider-thumb {
-webkit-appearance: none; appearance: none;
width: 16px; height: 16px; border-radius: 50%;
background: var(--accent-2, #A78BFA); cursor: pointer;
box-shadow: 0 0 0 3px rgba(139,124,246,.18);
}
.pe-slide::-moz-range-thumb {
width: 16px; height: 16px; border-radius: 50%;
background: var(--accent-2, #A78BFA); cursor: pointer; border: none;
}
.pe-num {
padding: 8px 10px;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.10);
border-radius: 8px;
color: var(--txt, #f4f4f6);
font: 600 13px/1 var(--mono);
outline: none;
text-align: right;
}
.pe-num:focus { border-color: rgba(139,124,246,.42) }
.pe-summary, .pe-approval, .pe-confirm {
display: grid; gap: 6px;
padding: 12px 14px;
background: rgba(255,255,255,.025);
border: 1px solid rgba(255,255,255,.06);
border-radius: 10px;
font-size: 13px;
}
.pe-row { display: flex; justify-content: space-between; gap: 12px; align-items: center }
.pe-row > span:first-child { color: var(--txt-3, #9aa3b2); font-size: 12.5px }
.pe-row > span:last-child { color: var(--txt, #f4f4f6); font-weight: 600; text-align: right; word-break: break-all }
.pe-confirm-q { font: 600 13.5px/1.4 'Space Grotesk', sans-serif; color: var(--txt, #f4f4f6); padding-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,.06) }
.pe-confirm-side {
display: inline-flex; align-items: center; gap: 8px;
padding: 6px 12px;
border-radius: 7px;
font: 600 12.5px/1 var(--mono);
width: fit-content;
margin: 4px 0 4px;
}
.pe-confirm-side.pe-long { background: rgba(74,222,128,.12); color: #86efac; border: 1px solid rgba(74,222,128,.30) }
.pe-confirm-side.pe-short { background: rgba(251,113,133,.12); color: #fda4af; border: 1px solid rgba(251,113,133,.30) }
.pe-success { text-align: center; padding: 12px 6px 6px; display: grid; gap: 8px; justify-items: center }
.pe-success-icon {
width: 56px; height: 56px;
display: grid; place-items: center;
background: rgba(74,222,128,.15);
color: #86efac;
font-size: 30px; font-weight: 700;
border-radius: 50%;
border: 1px solid rgba(74,222,128,.40);
margin-bottom: 2px;
}
.pe-success-title { font: 700 18px/1.2 'Space Grotesk', sans-serif; color: var(--txt, #f4f4f6) }
.pe-success-sub { font: 500 12.5px/1.5 'Inter', sans-serif; color: var(--txt-3, #9aa3b2); max-width: 380px }
@media (max-width: 560px) {
.pe-slide-row { grid-template-columns: 1fr 80px }
}
/* ── /build wizard · Edge bot launchpad (modeled on .pb-wz · same scale) ───── */
.bb-wz { max-width: 620px }
.bb-wz .modal-body { display: grid; gap: 14px }
.bb-wz .bb-lead {
font: 500 13.5px/1.55 'Inter', sans-serif;
color: var(--txt-2, #c4c5cc);
margin: 0;
}
.bb-wz .bb-form { display: grid; gap: 10px }
.bb-wz .bb-row { display: grid; gap: 6px }
.bb-wz .bb-lbl {
font: 600 11.5px/1 'Inter', sans-serif;
color: var(--txt-3, #9aa3b2);
letter-spacing: .04em;
text-transform: uppercase;
}
.bb-wz .bb-textarea, .bb-wz .bb-input {
width: 100%;
padding: 11px 12px;
background: rgba(255,255,255,.04);
color: var(--txt, #f4f4f6);
border: 1px solid rgba(255,255,255,.10);
border-radius: 10px;
font: 500 13.5px/1.55 'Inter', sans-serif;
resize: vertical;
}
.bb-wz .bb-input { font: 500 13px/1 var(--mono); }
.bb-wz .bb-textarea:focus, .bb-wz .bb-input:focus {
outline: none;
border-color: rgba(255,122,24,.55);
box-shadow: 0 0 0 3px rgba(255,122,24,.15);
}
.bb-wz .bb-hint { font: 500 11.5px/1.4 'Inter', sans-serif; color: var(--txt-3, #9aa3b2) }
.bb-wz .bb-mono, .bb-wz .mono { font: 500 12px/1.4 var(--mono); color: var(--txt, #f4f4f6) }
.bb-wz .bb-loading {
display: flex; align-items: center; gap: 12px;
padding: 28px 12px;
}
.bb-wz .bb-loading-text { display: grid; gap: 4px }
.bb-wz .bb-spinner {
display: inline-block;
width: 18px; height: 18px;
border: 2px solid rgba(255,122,24,.18);
border-top-color: #ff7a18;
border-radius: 50%;
animation: bb-spin 0.8s linear infinite;
}
@keyframes bb-spin { to { transform: rotate(360deg) } }
.bb-wz .bb-err {
padding: 14px;
background: rgba(248,113,113,.10);
border: 1px solid rgba(248,113,113,.32);
border-radius: 10px;
color: #fda4af;
font: 500 13px/1.5 'Inter', sans-serif;
}
.bb-wz .bb-note {
padding: 12px 14px;
background: rgba(96,165,250,.08);
border: 1px solid rgba(96,165,250,.22);
border-radius: 10px;
color: var(--txt-2, #c4c5cc);
font: 500 12.5px/1.55 'Inter', sans-serif;
}
.bb-wz .bb-note.info b { color: var(--txt, #f4f4f6) }
.bb-wz .bb-spec, .bb-wz .bb-review {
display: grid; gap: 8px;
padding: 12px;
background: rgba(255,255,255,.025);
border: 1px solid rgba(255,255,255,.06);
border-radius: 12px;
}
.bb-wz .bb-spec-row {
display: grid;
grid-template-columns: 130px 1fr;
gap: 12px;
align-items: start;
padding: 5px 0;
}
.bb-wz .bb-spec-row.col { grid-template-columns: 1fr; gap: 4px }
.bb-wz .bb-spec-row .k {
font: 600 11.5px/1.3 'Inter', sans-serif;
color: var(--txt-3, #9aa3b2);
text-transform: uppercase;
letter-spacing: .04em;
}
.bb-wz .bb-spec-row .v {
font: 500 13px/1.5 'Inter', sans-serif;
color: var(--txt, #f4f4f6);
word-break: break-word;
}
.bb-wz .bb-vc {
display: flex;
align-items: flex-start;
gap: 8px;
justify-content: space-between;
}
.bb-wz .bb-vc .bb-vc-txt { flex: 1; min-width: 0; }
.bb-wz .bb-copy {
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 22px;
padding: 0;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.10);
color: var(--txt-3, #9aa3b2);
border-radius: 6px;
cursor: pointer;
font: 600 11px/1 'Inter', sans-serif;
transition: background .12s, color .12s, border-color .12s;
}
.bb-wz .bb-copy:hover {
background: rgba(255,122,24,.10);
border-color: rgba(255,122,24,.35);
color: #ffb685;
}
.bb-wz .bb-copy.ok {
background: rgba(74,222,128,.12);
border-color: rgba(74,222,128,.40);
color: #4ade80;
}
.bb-wz .bb-list { display: grid; gap: 6px }
.bb-wz .bb-list-row {
padding: 8px 10px;
background: rgba(255,255,255,.025);
border: 1px solid rgba(255,255,255,.05);
border-radius: 8px;
}
.bb-wz .bb-list-sub { font: 500 11.5px/1.4 'Inter', sans-serif; color: var(--txt-3, #9aa3b2); margin-top: 2px }
.bb-wz .bb-chip {
display: inline-block;
padding: 3px 9px;
background: rgba(255,122,24,.10);
border: 1px solid rgba(255,122,24,.30);
color: #ffb685;
font: 600 11.5px/1.4 var(--mono);
border-radius: 12px;
margin-right: 4px;
margin-bottom: 4px;
}
.bb-wz .bb-chip-sec {
background: rgba(96,165,250,.10);
border-color: rgba(96,165,250,.30);
color: #93c5fd;
}
.bb-wz .bb-adjust {
padding: 8px 12px;
background: rgba(255,255,255,.02);
border: 1px solid rgba(255,255,255,.06);
border-radius: 10px;
}
.bb-wz .bb-adjust summary {
cursor: pointer;
font: 500 12.5px/1.4 'Inter', sans-serif;
color: var(--txt-2, #c4c5cc);
}
.bb-wz .bb-secrets { display: grid; gap: 14px }
.bb-wz .bb-secret {
padding: 14px;
background: rgba(255,255,255,.025);
border: 1px solid rgba(255,255,255,.07);
border-radius: 12px;
display: grid; gap: 8px;
}
.bb-wz .bb-secret-head { display: flex; align-items: center; gap: 8px }
.bb-wz .bb-secret-label {
font: 600 13px/1 var(--mono);
color: var(--txt, #f4f4f6);
}
.bb-wz .bb-secret-pill {
font: 600 10.5px/1 'Inter', sans-serif;
color: #fda4af;
background: rgba(248,113,113,.12);
border: 1px solid rgba(248,113,113,.30);
padding: 3px 7px;
border-radius: 10px;
text-transform: uppercase;
letter-spacing: .05em;
}
.bb-wz .bb-secret-howto {
background: rgba(96,165,250,.06);
border: 1px solid rgba(96,165,250,.18);
border-radius: 8px;
padding: 10px 14px;
font: 500 12.5px/1.55 'Inter', sans-serif;
color: var(--txt-2, #c4c5cc);
}
.bb-wz .bb-secret-howto b { color: var(--txt, #f4f4f6); display: block; margin-bottom: 4px }
.bb-wz .bb-secret-howto ol { margin: 4px 0 0 18px; padding: 0 }
.bb-wz .bb-secret-howto li { margin: 3px 0 }
.bb-wz .bb-secret-howto a { color: #60a5fa }
.bb-wz .bb-secret-howto code {
font: 500 11.5px/1 var(--mono);
background: rgba(0,0,0,.25);
padding: 1px 5px;
border-radius: 4px;
}
.bb-wz .bb-section-title {
font: 600 11.5px/1 'Inter', sans-serif;
color: var(--txt-3, #9aa3b2);
text-transform: uppercase;
letter-spacing: .06em;
margin-top: 8px;
padding-top: 8px;
border-top: 1px solid rgba(255,255,255,.06);
}
.bb-wz .bb-cost-card {
padding: 12px 14px;
background: linear-gradient(135deg, rgba(255,122,24,.08), rgba(255,122,24,.02));
border: 1px solid rgba(255,122,24,.22);
border-radius: 10px;
}
.bb-wz .bb-cost-row {
display: flex; justify-content: space-between; align-items: baseline;
font: 500 13.5px/1.4 'Inter', sans-serif;
color: var(--txt, #f4f4f6);
}
.bb-wz .bb-cost-sub {
margin-top: 4px;
font: 500 11.5px/1.4 'Inter', sans-serif;
color: var(--txt-3, #9aa3b2);
}
.bb-wz .bb-success {
text-align: center; padding: 14px 6px 6px;
display: grid; gap: 6px; justify-items: center;
}
.bb-wz .bb-success-icon {
width: 56px; height: 56px;
display: grid; place-items: center;
background: rgba(74,222,128,.14);
border-radius: 50%;
border: 1px solid rgba(74,222,128,.36);
font-size: 28px;
margin-bottom: 4px;
}
.bb-wz .bb-success-title {
font: 700 18px/1.2 'Space Grotesk', sans-serif;
color: var(--txt, #f4f4f6);
}
.bb-wz .bb-success-sub {
font: 500 12.5px/1.5 'Inter', sans-serif;
color: var(--txt-3, #9aa3b2);
}
.bb-wz .bb-success-actions {
display: flex; gap: 8px; justify-content: center;
margin-top: 12px;
}
@media (max-width: 560px) {
.bb-wz .bb-spec-row { grid-template-columns: 100px 1fr }
}
/* ── /build · step 3.5 burn card (Phase 2a) ──────────────────────────────── */
.bb-wz .bb-burn-card {
padding: 18px 18px 14px;
background: linear-gradient(135deg, rgba(255,122,24,.10), rgba(244,63,94,.05));
border: 1px solid rgba(255,122,24,.30);
border-radius: 14px;
text-align: center;
display: grid; gap: 6px; justify-items: center;
}
.bb-wz .bb-burn-icon {
font-size: 36px; line-height: 1; margin-bottom: 2px;
}
.bb-wz .bb-burn-title {
font: 700 20px/1.2 'Space Grotesk', sans-serif;
color: #ff7a18;
}
.bb-wz .bb-burn-sub {
font: 500 12.5px/1.4 'Inter', sans-serif;
color: var(--txt-3, #9aa3b2);
}
.bb-wz .bb-burn-card .bb-spec-row { width: 100%; text-align: left; }
.bb-wz .bb-burn-card .bb-note { width: 100%; text-align: left; }
.bb-wz .bb-burn-pending {
margin-top: 12px;
padding: 12px 14px;
background: rgba(96,165,250,.08);
border: 1px solid rgba(96,165,250,.28);
border-radius: 10px;
font: 500 13px/1.4 'Inter', sans-serif;
color: var(--txt-2, #d1d5db);
display: grid; gap: 4px;
}
.bb-wz .bb-note.warn {
background: rgba(251,191,36,.08);
border: 1px solid rgba(251,191,36,.30);
}
/* ── /build · step 0 premium polish ──────────────────────────────────────── */
.bb-wz .bb-step0 { gap: 18px }
/* Hero · big intro */
.bb-wz .bb-hero {
padding: 4px 2px 2px;
display: grid; gap: 6px;
}
.bb-wz .bb-hero-eyebrow {
font: 600 10.5px/1 'JetBrains Mono', monospace;
color: var(--accent-2, #A78BFA);
text-transform: uppercase;
letter-spacing: .14em;
}
.bb-wz .bb-hero-title {
font: 700 22px/1.2 'Space Grotesk', sans-serif;
letter-spacing: -.015em;
background: linear-gradient(135deg, #ffffff 0%, #ffd0a8 50%, #ff7a18 100%);
-webkit-background-clip: text; background-clip: text; color: transparent;
margin: 2px 0 4px;
}
.bb-wz .bb-lead {
font: 500 13.5px/1.6 'Inter', sans-serif;
color: var(--txt-2, #c4c5cc);
margin: 0;
max-width: 540px;
}
.bb-wz .bb-lead b {
color: var(--accent-2, #A78BFA);
font-weight: 600;
}
/* Suggestion chips */
.bb-wz .bb-suggest-row {
display: flex; flex-wrap: wrap; gap: 8px;
padding: 4px 0;
}
.bb-wz .bb-suggest {
font: 600 12px/1 'Inter', sans-serif;
padding: 8px 13px;
background: rgba(255,255,255,.04);
color: var(--txt-2, #c4c5cc);
border: 1px solid rgba(255,255,255,.10);
border-radius: 999px;
cursor: pointer;
transition: all .18s ease;
}
.bb-wz .bb-suggest:hover {
background: rgba(255,122,24,.10);
border-color: rgba(255,122,24,.40);
color: #fff;
transform: translateY(-1px);
box-shadow: 0 4px 14px rgba(255,122,24,.18);
}
.bb-wz .bb-suggest:active { transform: translateY(0) }
/* Textarea shell · premium with focus glow */
.bb-wz .bb-intent-wrap { gap: 8px }
.bb-wz .bb-ta-shell {
position: relative;
border-radius: 14px;
padding: 1px;
background: linear-gradient(135deg, rgba(255,122,24,0.0) 0%, rgba(255,122,24,0.0) 100%);
transition: background .25s ease;
}
.bb-wz .bb-ta-shell:focus-within {
background: linear-gradient(135deg, rgba(255,122,24,0.7) 0%, rgba(0,82,255,0.55) 100%);
box-shadow: 0 0 0 4px rgba(255,122,24,0.10), 0 8px 30px rgba(255,122,24,0.10);
}
.bb-wz .bb-textarea-premium {
width: 100%;
padding: 16px 18px;
background: linear-gradient(180deg, #0e0e14, #0b0b10);
color: var(--txt, #f4f4f6);
border: 1px solid rgba(255,255,255,.06);
border-radius: 13px;
font: 500 14px/1.65 'Inter', sans-serif;
resize: vertical;
min-height: 160px;
outline: none;
transition: border-color .18s ease;
}
.bb-wz .bb-textarea-premium:focus { border-color: transparent }
.bb-wz .bb-textarea-premium::placeholder {
color: var(--txt-4, #6b7384);
font-style: italic;
}
/* Meta row below textarea · hint + char counter */
.bb-wz .bb-ta-meta {
display: flex;
justify-content: space-between;
align-items: center;
padding: 4px 4px 0;
gap: 12px;
}
.bb-wz .bb-ta-hint {
font: 500 11px/1 'JetBrains Mono', monospace;
color: var(--txt-4, #6b7384);
letter-spacing: .04em;
}
.bb-wz .bb-chars {
font: 600 11px/1 'JetBrains Mono', monospace;
color: var(--txt-3, #9aa3b2);
letter-spacing: .04em;
}
.bb-wz .bb-chars .bb-chars-sep, .bb-wz .bb-chars .bb-chars-max { color: var(--txt-4, #6b7384) }
.bb-wz .bb-chars.warn { color: #fbbf24 }
.bb-wz .bb-chars.danger { color: #fb7185 }
/* Premium note · gradient border, icon, two-line layout */
.bb-wz .bb-note-premium {
display: grid;
grid-template-columns: 36px 1fr;
gap: 14px;
align-items: start;
padding: 14px 16px;
background:
linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
border: 1px solid rgba(255,255,255,.08);
border-left: 3px solid var(--accent-2, #A78BFA);
border-radius: 11px;
position: relative;
overflow: hidden;
}
.bb-wz .bb-note-premium::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(800px 60px at 0% 0%, rgba(255,122,24,.08), transparent 70%);
pointer-events: none;
}
.bb-wz .bb-note-icon {
width: 36px; height: 36px;
border-radius: 10px;
background: rgba(255,122,24,.10);
border: 1px solid rgba(255,122,24,.28);
display: grid; place-items: center;
font-size: 16px;
}
.bb-wz .bb-note-body { display: grid; gap: 4px }
.bb-wz .bb-note-title {
font: 600 12.5px/1.3 'Inter', sans-serif;
color: var(--txt, #f4f4f6);
letter-spacing: .01em;
}
.bb-wz .bb-note-sub {
font: 500 12px/1.55 'Inter', sans-serif;
color: var(--txt-3, #9aa3b2);
}
.bb-wz .bb-note-sub b { color: var(--txt-2, #c4c5cc); font-weight: 600 }
@media (max-width: 560px) {
.bb-wz .bb-hero-title { font-size: 19px }
.bb-wz .bb-suggest { font-size: 11.5px; padding: 7px 11px }
.bb-wz .bb-textarea-premium { padding: 14px 14px; font-size: 13.5px }
.bb-wz .bb-note-premium { grid-template-columns: 28px 1fr; gap: 10px; padding: 12px }
.bb-wz .bb-note-icon { width: 28px; height: 28px; font-size: 14px }
}
/* Edge Alpha signal · premium chat-card style · 2026-05-29 */
.msg .card.kind-alpha_signal,
.card.kind-alpha_signal {
background:
linear-gradient(135deg, rgba(255,122,30,0.10) 0%, rgba(255,160,90,0.04) 100%),
rgba(20,28,46,0.62);
border: 1px solid rgba(255,160,90,0.32);
border-left: 3px solid #ff7a18;
box-shadow: 0 0 24px rgba(255,122,30,0.10), 0 8px 26px rgba(0,0,0,0.32);
position: relative;
padding: 14px 16px 14px 18px;
}
.card.kind-alpha_signal::before {
content: "ALPHA";
position: absolute; top: -10px; left: 14px;
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: 10px; font-weight: 800; letter-spacing: 1.2px;
color: #ff7a18;
background: #0a0f1e; padding: 2px 8px; border-radius: 6px;
border: 1px solid rgba(255,160,90,0.4);
}
.card.kind-alpha_signal .card-title { color: #ffb070; font-weight: 700; }
.card.kind-alpha_signal .card-meta { color: #9aa3b8; font-size: 12px; }
.card.kind-alpha_signal .k { color: #9aa3b8; }
.card.kind-alpha_signal .v { color: #ffffff; }
/* Edge Perps wizard · premium polish 2026-05-29 · matches portfolio/fees aesthetic */
.pe-wz {
position: relative;
background: linear-gradient(135deg, rgba(255,122,30,0.05) 0%, rgba(20,28,46,0.72) 100%);
border: 1px solid rgba(255,160,90,0.28);
border-left: 3px solid #ff7a18;
box-shadow: 0 0 28px rgba(255,122,30,0.08), 0 12px 28px rgba(0,0,0,0.35);
}
.pe-wz::before {
content: "EDGE PERPS";
position: absolute; top: -10px; left: 18px;
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: 10px; font-weight: 800; letter-spacing: 1.4px;
color: #ff7a18; background: #0a0f1e;
padding: 2px 9px; border-radius: 6px;
border: 1px solid rgba(255,160,90,0.45);
}
/* ─── Edge Perps · referral opt-in chip · 2026-05-29 ─────────────────────── */
.pe-ref-chip {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 11px 14px; border-radius: 12px;
font: 500 12.5px/1.4 'Inter', sans-serif;
margin-bottom: 8px;
}
.pe-ref-chip.pe-ref-prompt {
background: linear-gradient(135deg, rgba(251,191,36,0.10) 0%, rgba(167,139,250,0.08) 100%);
border: 1px solid rgba(251,191,36,0.28);
color: #fcd34d;
}
.pe-ref-chip.pe-ref-active {
background: rgba(34,197,94,0.10);
border: 1px solid rgba(34,197,94,0.30);
color: #86efac;
font-weight: 600;
}
.pe-ref-chip.pe-ref-other {
background: rgba(148,163,184,0.08);
border: 1px solid rgba(148,163,184,0.22);
color: var(--txt-2, #c4c5cc);
font-size: 12px;
}
.pe-ref-chip .pe-ref-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.pe-ref-chip .pe-ref-text strong { color: #fde68a; font-weight: 600; font-size: 13px; }
.pe-ref-chip .pe-ref-text span { color: rgba(252,211,77,0.75); font-size: 11.5px; }
.pe-ref-chip .pe-ref-btns { display: flex; gap: 6px; flex-shrink: 0; }
.pe-ref-chip .pe-ref-skip,
.pe-ref-chip .pe-ref-enable {
padding: 6px 11px; border-radius: 8px; font: 600 11.5px/1 'Inter', sans-serif;
cursor: pointer; transition: opacity 0.15s ease;
border: 1px solid transparent;
}
.pe-ref-chip .pe-ref-skip {
background: transparent; color: rgba(252,211,77,0.7);
border-color: rgba(251,191,36,0.20);
}
.pe-ref-chip .pe-ref-skip:hover { color: #fde68a; border-color: rgba(251,191,36,0.40); }
.pe-ref-chip .pe-ref-enable {
background: linear-gradient(135deg, #fbbf24 0%, #8B7CF6 100%);
color: #1c1917;
}
.pe-ref-chip .pe-ref-enable:hover { opacity: 0.92; }
.pe-ref-chip .pe-ref-enable:disabled { opacity: 0.7; cursor: wait; }
@media (max-width: 540px) {
.pe-ref-chip { flex-direction: column; align-items: stretch; gap: 8px; }
.pe-ref-chip .pe-ref-btns { justify-content: flex-end; }
}
/* ─── Edge Alpha signal card · 2026-05-29 ──────────────────────────────── */
.alpha-signal-card {
position: relative;
background: linear-gradient(135deg, rgba(255,255,255,0.02), rgba(255,255,255,0.005));
}
.alpha-signal-card .as-sym {
font: 700 16px/1.2 'Space Grotesk', 'Inter', sans-serif;
color: var(--txt, #f4f4f6);
letter-spacing: 0.01em;
word-break: break-word;
}
.alpha-signal-card .as-pct {
font: 600 13px/1.2 'Inter', sans-serif;
}
.alpha-signal-card .as-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
gap: 8px;
margin-bottom: 10px;
}
.alpha-signal-card .as-stat {
display: flex;
flex-direction: column;
gap: 2px;
padding: 8px 10px;
border-radius: 8px;
background: rgba(255,255,255,0.025);
border: 1px solid rgba(255,255,255,0.05);
}
.alpha-signal-card .as-stat > span {
font: 500 10.5px/1.2 'Inter', sans-serif;
color: var(--txt-3, #9aa3b2);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.alpha-signal-card .as-stat > strong {
font: 700 13.5px/1.2 var(--mono, 'JetBrains Mono', monospace);
color: var(--txt, #f4f4f6);
}
.alpha-signal-card .as-text {
font: 500 13px/1.5 'Inter', sans-serif;
color: var(--txt-2, #c4c5cc);
margin-bottom: 10px;
}
.alpha-signal-card .as-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 10px;
}
.alpha-signal-card .as-chip {
padding: 7px 12px;
border-radius: 8px;
border: 1px solid rgba(139,124,246,0.30);
background: rgba(139,124,246,0.08);
color: #C4B5FD;
font: 600 12px/1 'Inter', sans-serif;
cursor: pointer;
transition: background 0.12s ease, border-color 0.12s ease;
}
.alpha-signal-card .as-chip:hover {
background: rgba(139,124,246,0.18);
border-color: rgba(139,124,246,0.55);
color: #fff;
}
.alpha-signal-card .as-footer-row {
margin: 8px 0;
font: 500 11.5px/1.4 var(--mono, 'JetBrains Mono', monospace);
}
.alpha-signal-card .as-ca {
color: #60a5fa;
text-decoration: none;
}
.alpha-signal-card .as-ca:hover { text-decoration: underline; }
.alpha-signal-card .as-nfa {
display: flex;
align-items: flex-start;
gap: 8px;
padding: 9px 11px;
margin-top: 4px;
border-radius: 8px;
background: rgba(251,191,36,0.06);
border: 1px solid rgba(251,191,36,0.22);
color: rgba(252,211,77,0.85);
font: 500 11px/1.5 'Inter', sans-serif;
font-style: italic;
}
.alpha-signal-card .as-nfa-tag {
display: inline-block;
flex-shrink: 0;
padding: 2px 6px;
border-radius: 4px;
background: rgba(251,191,36,0.22);
color: #fde68a;
font: 700 9.5px/1.2 'Inter', sans-serif;
font-style: normal;
letter-spacing: 0.08em;
}
/* ─── Drawer signal items + sticky close · 2026-05-30 ─────────────────── */
.dt-badge {
display: inline-block;
margin-left: 6px;
padding: 1px 6px;
border-radius: 8px;
background: #8B7CF6;
color: #0a0a14;
font: 700 10px/1.4 'Inter', sans-serif;
vertical-align: middle;
}
.ds-sig-list {
display: flex;
flex-direction: column;
gap: 6px;
padding-bottom: 10px;
}
.drawer-item.ds-sig {
padding: 10px 12px;
background: rgba(255,255,255,0.02);
border-radius: 10px;
transition: background 0.12s ease;
}
.drawer-item.ds-sig:hover {
background: rgba(255,255,255,0.05);
}
.ds-sig-row {
display: flex;
align-items: center;
gap: 10px;
}
.ds-sig-emoji {
font-size: 18px;
flex-shrink: 0;
}
.ds-sig-body {
flex: 1;
min-width: 0;
}
.ds-sig-kind {
font: 700 10px/1.2 'Inter', sans-serif;
letter-spacing: 0.07em;
text-transform: uppercase;
margin-bottom: 2px;
}
.ds-sig-head {
font: 500 13px/1.3 'Inter', sans-serif;
color: var(--txt-2, #c4c5cc);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ds-sig-ago {
font: 500 11px/1.2 'JetBrains Mono', monospace;
color: var(--txt-3, #9aa3b2);
flex-shrink: 0;
}
.ds-sig-clear {
width: 100%;
margin-top: 6px;
padding: 9px 14px;
border-radius: 10px;
background: transparent;
border: 1px solid rgba(255,255,255,0.10);
color: var(--txt-3, #9aa3b2);
font: 600 12px/1 'Inter', sans-serif;
cursor: pointer;
}
.ds-sig-clear:hover {
border-color: rgba(251,113,133,0.4);
color: #fda4af;
}
.drawer-close-bottom {
display: block;
width: calc(100% - 24px);
margin: 0 12px 12px;
padding: 12px;
border-radius: 12px;
background: linear-gradient(180deg, rgba(139,124,246,0.10), rgba(139,124,246,0.04));
border: 1px solid rgba(139,124,246,0.30);
color: #C4B5FD;
font: 700 13px/1 'Inter', sans-serif;
letter-spacing: 0.04em;
cursor: pointer;
transition: background 0.12s ease, border-color 0.12s ease;
position: sticky;
bottom: 0;
}
.drawer-close-bottom:hover {
background: linear-gradient(180deg, rgba(139,124,246,0.18), rgba(139,124,246,0.10));
border-color: rgba(139,124,246,0.55);
color: #fff;
}
/* ─── /perms wizard · 2026-05-30 · v2 only ─────────────────────────── */
.pw-wz { max-width: 540px }
.pw-wz .modal-body { display: grid; gap: 14px }
.pw-wz .modal-foot { display: flex; gap: 10px; justify-content: flex-end; padding-top: 12px }
.pw-wz .hint { font: 500 12px/1.5 'Inter', sans-serif; color: var(--txt-3, #9aa3b2) }
.pw-wz .note { font: 500 13px/1.55 'Inter', sans-serif; color: var(--txt-2, #c4c5cc); background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 12px 14px }
.pw-wz .error { color: #fda4af; background: rgba(251,113,133,0.06); border: 1px solid rgba(251,113,133,0.30); border-radius: 12px; padding: 12px 14px; font: 500 13px/1.5 'Inter', sans-serif }
.pw-wz .loading { display: flex; align-items: center; gap: 10px; padding: 14px 0; color: var(--txt-2, #c4c5cc); font-size: 13px }
.pw-wz .mono { font: 500 12px/1.3 var(--mono, 'JetBrains Mono', monospace); color: var(--txt, #f4f4f6) }
.pw-active, .pw-scope, .pw-info-row { display: flex; flex-direction: column; gap: 9px; padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.06) }
.pw-info-row { flex-direction: row; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 14px }
.pw-info-k { font: 500 12px/1.2 'Inter', sans-serif; color: var(--txt-3, #9aa3b2) }
.pw-info-v { font: 600 13px/1.2 'Inter', sans-serif; color: var(--txt, #f4f4f6) }
.pw-row { display: flex; justify-content: space-between; gap: 12px; align-items: center }
.pw-row > span:first-child { color: var(--txt-3, #9aa3b2); font-size: 12.5px }
.pw-row > span:last-child { color: var(--txt, #f4f4f6); font-weight: 600; text-align: right; word-break: break-all }
.pw-scope-h, .pw-active-bar { font: 700 11px/1.2 'Inter', sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: var(--txt-3, #9aa3b2); margin-bottom: 2px }
.pw-active-bar { color: #86efac }
.pw-active-bar > span { display: inline-block; padding: 3px 9px; border-radius: 10px; background: rgba(74,222,128,0.12); border: 1px solid rgba(74,222,128,0.30); color: #86efac; font-size: 11px; letter-spacing: 0.06em }
.btn-danger {
padding: 9px 14px;
border-radius: 10px;
background: rgba(251,113,133,0.10);
border: 1px solid rgba(251,113,133,0.30);
color: #fda4af;
font: 600 13px/1 'Inter', sans-serif;
cursor: pointer;
}
.btn-danger:hover { background: rgba(251,113,133,0.18); color: #fff; border-color: rgba(251,113,133,0.55); }
.btn-danger:disabled { opacity: 0.6; cursor: wait; }
/* ─── Welcome card enrichment v2 · 2026-05-30 ──────────────────────── */
/* Hero badges */
.agent-card-badges {
display: flex;
gap: 6px;
flex-wrap: wrap;
margin-top: 8px;
}
.agent-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 10px;
border-radius: 100px;
font: 600 11.5px/1.2 'Inter', sans-serif;
letter-spacing: 0.01em;
}
.agent-badge-x {
background: rgba(96,165,250,0.10);
border: 1px solid rgba(96,165,250,0.32);
color: #93c5fd;
}
.agent-badge-helixa {
background: rgba(167,139,250,0.10);
border: 1px solid rgba(167,139,250,0.32);
color: #c4b5fd;
}
/* Migrate banner · v2 redesign */
.agent-card-migrate {
display: flex;
align-items: flex-start;
gap: 14px;
margin-top: 14px;
padding: 14px 16px;
border-radius: 14px;
background:
linear-gradient(135deg, rgba(251,191,36,0.08), rgba(251,191,36,0.02)),
rgba(255,255,255,0.01);
border: 1px solid rgba(251,191,36,0.32);
position: relative;
overflow: hidden;
}
.agent-card-migrate-icon {
flex-shrink: 0;
width: 36px;
height: 36px;
border-radius: 10px;
background: rgba(251,191,36,0.18);
color: #fde68a;
display: flex;
align-items: center;
justify-content: center;
}
.agent-card-migrate-body {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.agent-card-migrate-title {
font: 700 14px/1.25 'Inter', 'Space Grotesk', sans-serif;
color: #fde68a;
letter-spacing: -0.005em;
}
.agent-card-migrate-desc {
font: 500 12.5px/1.5 'Inter', sans-serif;
color: rgba(252,211,77,0.78);
}
.agent-card-migrate-addr {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-weight: 600;
font-size: 11.5px;
padding: 1px 6px;
border-radius: 5px;
background: rgba(251,191,36,0.18);
color: #fde68a;
}
.agent-card-migrate-btn {
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: 5px;
padding: 8px 14px;
border-radius: 10px;
background: linear-gradient(135deg, #fbbf24 0%, #8B7CF6 100%);
border: none;
color: #1c1917;
font: 700 12.5px/1 'Inter', sans-serif;
letter-spacing: 0.02em;
cursor: pointer;
transition: transform 0.12s ease, box-shadow 0.12s ease;
align-self: flex-start;
box-shadow: 0 2px 8px rgba(139,124,246,0.25);
}
.agent-card-migrate-btn:hover {
transform: translateY(-1px);
box-shadow: 0 4px 14px rgba(139,124,246,0.40);
}
.agent-card-migrate-btn:active { transform: translateY(0); }
@media (max-width: 540px) {
.agent-card-migrate { flex-wrap: wrap; }
.agent-card-migrate-btn { width: 100%; justify-content: center; align-self: stretch; margin-top: 4px; }
}
/* Live activity strip */
.agent-card-live { margin-top: 14px; }
.agent-live-tiles {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 8px;
}
.agent-live-tile {
display: flex;
flex-direction: column;
gap: 3px;
padding: 12px 13px;
border-radius: 12px;
background: rgba(255,255,255,0.025);
border: 1px solid rgba(255,255,255,0.06);
color: var(--txt, #f4f4f6);
font-family: 'Inter', sans-serif;
cursor: pointer;
text-align: left;
transition: background 0.12s ease, border-color 0.12s ease, transform 0.12s ease;
}
.agent-live-tile:hover {
background: rgba(255,255,255,0.05);
border-color: rgba(255,255,255,0.14);
transform: translateY(-1px);
}
.agent-live-tile.pos { border-color: rgba(74,222,128,0.30); }
.agent-live-tile.pos:hover { border-color: rgba(74,222,128,0.55); }
.agent-live-tile.neg { border-color: rgba(251,113,133,0.30); }
.agent-live-tile.neg:hover { border-color: rgba(251,113,133,0.55); }
.agent-live-k {
font: 600 11px/1.3 'Inter', sans-serif;
color: var(--txt-3, #9aa3b2);
letter-spacing: 0.02em;
}
.agent-live-v {
font: 700 16px/1.2 'Space Grotesk', 'Inter', sans-serif;
color: var(--txt, #f4f4f6);
}
.agent-live-tile.pos .agent-live-v { color: #86efac; }
.agent-live-tile.neg .agent-live-v { color: #fda4af; }
.agent-live-sub {
font: 500 10.5px/1.3 'Inter', sans-serif;
color: var(--txt-3, #9aa3b2);
}
/* Skills section · v2 redesign */
.agent-card-skills {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-top: 14px;
}
.agent-card-skills-block {
padding: 12px 14px;
border-radius: 12px;
background: rgba(255,255,255,0.02);
border: 1px solid rgba(255,255,255,0.06);
display: flex;
flex-direction: column;
gap: 8px;
min-width: 0;
}
.agent-card-skills-label {
font: 700 10px/1.2 'Inter', sans-serif;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--txt-3, #9aa3b2);
}
.agent-card-skills-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.agent-skill-chip {
display: inline-flex;
align-items: center;
padding: 4px 10px;
border-radius: 100px;
background: rgba(96,165,250,0.10);
border: 1px solid rgba(96,165,250,0.28);
color: #93c5fd;
font: 600 11.5px/1.2 'Inter', sans-serif;
letter-spacing: 0.01em;
transition: background 0.12s ease, border-color 0.12s ease;
}
.agent-skill-chip:hover {
background: rgba(96,165,250,0.18);
border-color: rgba(96,165,250,0.50);
}
.agent-card-skills-text {
font: 500 12.5px/1.5 'Inter', sans-serif;
color: var(--txt-2, #c4c5cc);
word-break: break-word;
}
@media (max-width: 540px) {
.agent-card-skills { grid-template-columns: 1fr; }
}
/* ─── Migrate · coming-soon card · 2026-05-30 ───────────────────────── */
.migrate-soon-card {
position: relative;
overflow: hidden;
padding: 22px 22px 18px;
border-radius: 16px;
background:
linear-gradient(135deg, rgba(251,191,36,0.07) 0%, rgba(251,191,36,0.01) 60%),
rgba(20,28,46,0.65);
border: 1px solid rgba(251,191,36,0.28);
font-family: 'Inter', sans-serif;
color: var(--txt, #f4f4f6);
box-shadow: 0 12px 40px rgba(0,0,0,0.35), 0 0 32px rgba(251,191,36,0.06);
}
.migrate-soon-card .ms-bg {
position: absolute; inset: 0;
pointer-events: none;
overflow: hidden;
z-index: 0;
}
.migrate-soon-card .ms-orb {
position: absolute;
border-radius: 50%;
filter: blur(50px);
opacity: 0.35;
}
.migrate-soon-card .ms-orb-1 { width: 200px; height: 200px; background: #fbbf24; top: -60px; right: -40px; }
.migrate-soon-card .ms-orb-2 { width: 160px; height: 160px; background: #8B7CF6; bottom: -50px; left: -30px; opacity: 0.22; }
.migrate-soon-card > *:not(.ms-bg) { position: relative; z-index: 1; }
/* Header */
.migrate-soon-card .ms-head {
display: flex;
align-items: flex-start;
gap: 14px;
margin-bottom: 18px;
}
.migrate-soon-card .ms-icon-wrap {
flex-shrink: 0;
width: 48px; height: 48px;
border-radius: 12px;
background: linear-gradient(135deg, rgba(251,191,36,0.22), rgba(251,191,36,0.10));
border: 1px solid rgba(251,191,36,0.32);
display: flex; align-items: center; justify-content: center;
font-size: 24px;
box-shadow: 0 4px 14px rgba(251,191,36,0.15);
}
.migrate-soon-card .ms-head-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.migrate-soon-card .ms-badge {
display: inline-block;
align-self: flex-start;
padding: 3px 10px;
border-radius: 100px;
background: rgba(251,191,36,0.20);
color: #fde68a;
font: 700 10.5px/1.3 'Inter', sans-serif;
text-transform: uppercase;
letter-spacing: 0.10em;
border: 1px solid rgba(251,191,36,0.30);
}
.migrate-soon-card .ms-title {
font: 700 21px/1.2 'Space Grotesk', 'Inter', sans-serif;
margin: 0;
color: #fff;
letter-spacing: -0.01em;
}
.migrate-soon-card .ms-lead {
font: 500 13px/1.55 'Inter', sans-serif;
margin: 0;
color: var(--txt-2, #c4c5cc);
max-width: 540px;
}
/* Two columns */
.migrate-soon-card .ms-cols {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin: 4px 0 18px;
}
.migrate-soon-card .ms-col {
padding: 13px 14px;
border-radius: 12px;
background: rgba(255,255,255,0.025);
border: 1px solid rgba(255,255,255,0.06);
display: flex; flex-direction: column; gap: 9px;
}
.migrate-soon-card .ms-col-keep { border-color: rgba(74,222,128,0.18); background: rgba(74,222,128,0.04); }
.migrate-soon-card .ms-col-reset { border-color: rgba(251,191,36,0.18); background: rgba(251,191,36,0.04); }
.migrate-soon-card .ms-col-label {
display: flex; align-items: center; gap: 7px;
font: 700 10px/1.2 'Inter', sans-serif;
text-transform: uppercase;
letter-spacing: 0.10em;
color: var(--txt-3, #9aa3b2);
}
.migrate-soon-card .ms-col-dot {
width: 7px; height: 7px; border-radius: 50%;
}
.migrate-soon-card .ms-keep-dot { background: #86efac; box-shadow: 0 0 8px rgba(134,239,172,0.50); }
.migrate-soon-card .ms-reset-dot { background: #fbbf24; box-shadow: 0 0 8px rgba(251,191,36,0.50); }
.migrate-soon-card .ms-list {
list-style: none; padding: 0; margin: 0;
display: flex; flex-direction: column; gap: 7px;
}
.migrate-soon-card .ms-list li {
display: flex; align-items: flex-start; gap: 9px;
font: 500 12.5px/1.4 'Inter', sans-serif;
color: var(--txt, #f4f4f6);
}
.migrate-soon-card .ms-bullet {
flex-shrink: 0;
display: inline-flex; align-items: center; justify-content: center;
width: 18px; height: 18px;
border-radius: 50%;
font: 700 11px/1 'Inter', sans-serif;
}
.migrate-soon-card .ms-bullet-keep { background: rgba(74,222,128,0.18); color: #86efac; border: 1px solid rgba(74,222,128,0.35); }
.migrate-soon-card .ms-bullet-reset { background: rgba(251,191,36,0.18); color: #fde68a; border: 1px solid rgba(251,191,36,0.35); font-size: 13px; }
.migrate-soon-card .ms-col-note {
font: 500 11px/1.45 'Inter', sans-serif;
color: var(--txt-3, #9aa3b2);
padding-top: 7px;
border-top: 1px solid rgba(255,255,255,0.05);
font-style: italic;
}
/* Status pill + progress */
.migrate-soon-card .ms-status {
padding: 11px 13px;
border-radius: 10px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.06);
display: flex; flex-direction: column; gap: 8px;
margin-bottom: 16px;
}
.migrate-soon-card .ms-status-row {
display: flex; align-items: center; gap: 8px;
font: 600 12px/1.3 'Inter', sans-serif;
color: var(--txt-2, #c4c5cc);
}
.migrate-soon-card .ms-status-dot {
width: 8px; height: 8px;
border-radius: 50%;
background: #fbbf24;
box-shadow: 0 0 0 0 rgba(251,191,36,0.50);
animation: ms-pulse 2s ease-in-out infinite;
}
@keyframes ms-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(251,191,36,0.50); }
50% { box-shadow: 0 0 0 8px rgba(251,191,36,0); }
}
.migrate-soon-card .ms-status-text { flex: 1; }
.migrate-soon-card .ms-steps {
display: flex;
align-items: center;
gap: 6px;
margin-top: 2px;
}
.migrate-soon-card .ms-step {
display: flex;
align-items: center;
gap: 6px;
padding: 4px 8px;
border-radius: 8px;
background: rgba(255,255,255,0.025);
border: 1px solid rgba(255,255,255,0.06);
color: var(--txt-3, #9aa3b2);
font: 600 10.5px/1.2 'Inter', sans-serif;
flex: 1;
min-width: 0;
}
.migrate-soon-card .ms-step.is-active {
background: linear-gradient(135deg, rgba(251,191,36,0.22), rgba(251,191,36,0.10));
border-color: rgba(251,191,36,0.40);
color: #fde68a;
box-shadow: 0 0 12px rgba(251,191,36,0.18);
}
.migrate-soon-card .ms-step-num {
display: inline-flex; align-items: center; justify-content: center;
width: 16px; height: 16px;
border-radius: 50%;
background: rgba(255,255,255,0.08);
font: 700 9px/1 var(--mono, 'JetBrains Mono', monospace);
flex-shrink: 0;
}
.migrate-soon-card .ms-step.is-active .ms-step-num {
background: rgba(251,191,36,0.30);
color: #1c1917;
}
.migrate-soon-card .ms-step-label {
letter-spacing: 0.04em;
text-transform: uppercase;
}
.migrate-soon-card .ms-step-sep {
width: 6px; height: 1px;
background: rgba(255,255,255,0.12);
flex-shrink: 0;
}
/* Actions */
.migrate-soon-card .ms-actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-bottom: 14px;
}
.migrate-soon-card .ms-action {
display: flex; align-items: center; gap: 10px;
padding: 10px 12px;
border-radius: 10px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.08);
color: var(--txt, #f4f4f6);
font-family: 'Inter', sans-serif;
cursor: pointer;
text-align: left;
transition: background 0.12s ease, border-color 0.12s ease, transform 0.12s ease;
}
.migrate-soon-card .ms-action:hover {
background: rgba(255,255,255,0.06);
border-color: rgba(255,255,255,0.16);
transform: translateY(-1px);
}
.migrate-soon-card .ms-action-primary {
background: linear-gradient(135deg, rgba(139,124,246,0.16), rgba(139,124,246,0.06));
border-color: rgba(139,124,246,0.32);
}
.migrate-soon-card .ms-action-primary:hover {
background: linear-gradient(135deg, rgba(139,124,246,0.26), rgba(139,124,246,0.12));
border-color: rgba(139,124,246,0.50);
}
.migrate-soon-card .ms-action-icon {
font-size: 18px; flex-shrink: 0;
}
.migrate-soon-card .ms-action-text {
display: flex; flex-direction: column; gap: 1px;
min-width: 0;
}
.migrate-soon-card .ms-action-label {
font: 700 12.5px/1.2 'Inter', sans-serif;
}
.migrate-soon-card .ms-action-sub {
font: 500 10.5px/1.3 'Inter', sans-serif;
color: var(--txt-3, #9aa3b2);
}
/* Footer · follow @SmartCodedBot */
.migrate-soon-card .ms-footer {
display: flex; align-items: center; gap: 8px;
padding: 9px 11px;
border-radius: 8px;
background: rgba(96,165,250,0.05);
border: 1px solid rgba(96,165,250,0.16);
font: 500 11.5px/1.4 'Inter', sans-serif;
color: var(--txt-2, #c4c5cc);
}
.migrate-soon-card .ms-footer-icon { font-size: 14px; flex-shrink: 0; }
.migrate-soon-card .ms-footer a {
color: #60a5fa;
text-decoration: none;
font-weight: 600;
}
.migrate-soon-card .ms-footer a:hover { text-decoration: underline; color: #93c5fd; }
@media (max-width: 540px) {
.migrate-soon-card { padding: 18px 16px 14px; }
.migrate-soon-card .ms-cols { grid-template-columns: 1fr; }
.migrate-soon-card .ms-actions { grid-template-columns: 1fr; }
.migrate-soon-card .ms-title { font-size: 18px; }
}
/* ─── 0xwork stats card · premium · 2026-05-30 ──────────────────────── */
.oxwork-stats-card {
position: relative;
overflow: hidden;
padding: 22px 22px 18px;
border-radius: 16px;
background:
linear-gradient(135deg, rgba(96,165,250,0.06) 0%, rgba(96,165,250,0.01) 60%),
rgba(20,28,46,0.65);
border: 1px solid rgba(96,165,250,0.22);
font-family: 'Inter', sans-serif;
color: var(--txt, #f4f4f6);
box-shadow: 0 12px 40px rgba(0,0,0,0.35), 0 0 32px rgba(96,165,250,0.05);
}
.oxwork-stats-card .oxs-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.oxwork-stats-card .oxs-orb { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.30; }
.oxwork-stats-card .oxs-orb-1 { width: 220px; height: 220px; background: #60a5fa; top: -70px; right: -50px; }
.oxwork-stats-card .oxs-orb-2 { width: 180px; height: 180px; background: #a78bfa; bottom: -60px; left: -40px; opacity: 0.18; }
.oxwork-stats-card > *:not(.oxs-bg) { position: relative; z-index: 1; }
/* Header */
.oxwork-stats-card .oxs-head {
display: flex; align-items: flex-start; gap: 14px;
margin-bottom: 18px;
}
.oxwork-stats-card .oxs-head-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.oxwork-stats-card .oxs-badge {
display: inline-flex; align-items: center; gap: 6px;
align-self: flex-start;
padding: 3px 9px 3px 7px;
border-radius: 100px;
background: rgba(74,222,128,0.14);
color: #86efac;
font: 700 10px/1.3 'Inter', sans-serif;
text-transform: uppercase;
letter-spacing: 0.12em;
border: 1px solid rgba(74,222,128,0.30);
}
.oxwork-stats-card .oxs-live-dot {
width: 6px; height: 6px; border-radius: 50%;
background: #4ade80;
box-shadow: 0 0 6px rgba(74,222,128,0.80);
animation: oxs-pulse 1.6s ease-in-out infinite;
}
@keyframes oxs-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.45; } }
.oxwork-stats-card .oxs-title {
font: 700 21px/1.2 'Space Grotesk', 'Inter', sans-serif;
margin: 0;
color: #fff;
letter-spacing: -0.01em;
}
.oxwork-stats-card .oxs-lead {
font: 500 12.5px/1.5 'Inter', sans-serif;
margin: 0;
color: var(--txt-2, #c4c5cc);
max-width: 480px;
}
.oxwork-stats-card .oxs-head-link {
flex-shrink: 0;
display: inline-flex; align-items: center; justify-content: center;
width: 32px; height: 32px;
border-radius: 10px;
background: rgba(96,165,250,0.10);
border: 1px solid rgba(96,165,250,0.20);
color: #93c5fd;
font-size: 16px;
text-decoration: none;
transition: background 0.12s ease, border-color 0.12s ease;
}
.oxwork-stats-card .oxs-head-link:hover {
background: rgba(96,165,250,0.18);
border-color: rgba(96,165,250,0.40);
}
/* Hero tiles · 4-up grid */
.oxwork-stats-card .oxs-tiles {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
margin-bottom: 14px;
}
.oxwork-stats-card .oxs-tile {
padding: 12px 14px;
border-radius: 12px;
background: rgba(255,255,255,0.025);
border: 1px solid rgba(255,255,255,0.06);
display: flex; flex-direction: column; gap: 3px;
}
.oxwork-stats-card .oxs-tile-accent-amber {
background: linear-gradient(135deg, rgba(251,191,36,0.10), rgba(251,191,36,0.02));
border-color: rgba(251,191,36,0.26);
box-shadow: 0 0 16px rgba(251,191,36,0.05);
}
.oxwork-stats-card .oxs-tile-k {
font: 600 10px/1.2 'Inter', sans-serif;
color: var(--txt-3, #9aa3b2);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.oxwork-stats-card .oxs-tile-v {
font: 700 19px/1.15 'Space Grotesk', 'Inter', sans-serif;
color: var(--txt, #f4f4f6);
letter-spacing: -0.01em;
}
.oxwork-stats-card .oxs-tile-accent-amber .oxs-tile-v { color: #fde68a; }
.oxwork-stats-card .oxs-tile-sub {
font: 500 10.5px/1.3 'Inter', sans-serif;
color: var(--txt-3, #9aa3b2);
}
/* Open right now · highlight panel */
.oxwork-stats-card .oxs-open-panel {
padding: 14px 16px;
border-radius: 12px;
background: linear-gradient(135deg, rgba(139,124,246,0.08), rgba(139,124,246,0.015));
border: 1px solid rgba(139,124,246,0.28);
margin-bottom: 14px;
}
.oxwork-stats-card .oxs-open-row {
display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
flex-wrap: wrap;
}
.oxwork-stats-card .oxs-open-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.oxwork-stats-card .oxs-open-label {
font: 600 10.5px/1.2 'Inter', sans-serif;
color: #C4B5FD;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.oxwork-stats-card .oxs-open-val {
display: flex; align-items: baseline; gap: 7px;
}
.oxwork-stats-card .oxs-open-num {
font: 700 28px/1.05 'Space Grotesk', 'Inter', sans-serif;
color: #fff;
letter-spacing: -0.02em;
}
.oxwork-stats-card .oxs-open-unit {
font: 500 12px/1.2 'Inter', sans-serif;
color: var(--txt-2, #c4c5cc);
}
.oxwork-stats-card .oxs-open-money {
font: 600 13px/1.3 var(--mono, 'JetBrains Mono', monospace);
color: #C4B5FD;
}
.oxwork-stats-card .oxs-open-aside {
flex-shrink: 0;
padding: 8px 12px;
border-radius: 10px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
text-align: right;
display: flex; flex-direction: column; gap: 2px;
}
.oxwork-stats-card .oxs-open-aside-num {
font: 700 18px/1 'Space Grotesk', 'Inter', sans-serif;
color: var(--txt, #f4f4f6);
}
.oxwork-stats-card .oxs-open-aside-label {
font: 500 10px/1.2 'Inter', sans-serif;
color: var(--txt-3, #9aa3b2);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.oxwork-stats-card .oxs-open-foot {
margin-top: 10px;
padding-top: 9px;
border-top: 1px solid rgba(139,124,246,0.16);
font: 500 11px/1.5 'Inter', sans-serif;
color: rgba(252,211,77,0.70);
font-style: italic;
}
/* By category · horizontal bar chart */
.oxwork-stats-card .oxs-cats {
padding: 13px 14px 14px;
border-radius: 12px;
background: rgba(255,255,255,0.02);
border: 1px solid rgba(255,255,255,0.06);
margin-bottom: 14px;
}
.oxwork-stats-card .oxs-cats-head {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 10px;
}
.oxwork-stats-card .oxs-cats-title {
font: 700 10.5px/1.2 'Inter', sans-serif;
color: var(--txt-3, #9aa3b2);
text-transform: uppercase;
letter-spacing: 0.10em;
}
.oxwork-stats-card .oxs-cats-total {
font: 600 11px/1.2 var(--mono, 'JetBrains Mono', monospace);
color: var(--txt-3, #9aa3b2);
}
.oxwork-stats-card .oxs-cats-list { display: flex; flex-direction: column; gap: 6px; }
.oxwork-stats-card .oxs-cat-row {
display: grid;
grid-template-columns: 18px 90px 1fr 46px 38px;
align-items: center;
gap: 9px;
font: 600 11.5px/1.2 'Inter', sans-serif;
}
.oxwork-stats-card .oxs-cat-icon { font-size: 14px; text-align: center; }
.oxwork-stats-card .oxs-cat-name { color: var(--txt, #f4f4f6); }
.oxwork-stats-card .oxs-cat-bar {
height: 8px;
background: rgba(255,255,255,0.04);
border-radius: 4px;
overflow: hidden;
}
.oxwork-stats-card .oxs-cat-fill {
height: 100%;
border-radius: 4px;
transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.oxwork-stats-card .oxs-cat-count {
text-align: right;
font: 700 11.5px/1.2 var(--mono, 'JetBrains Mono', monospace);
color: var(--txt, #f4f4f6);
}
.oxwork-stats-card .oxs-cat-pct {
text-align: right;
font: 500 10.5px/1.2 'Inter', sans-serif;
color: var(--txt-3, #9aa3b2);
}
/* Actions */
.oxwork-stats-card .oxs-actions {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
margin-bottom: 12px;
}
.oxwork-stats-card .oxs-action {
display: flex; align-items: center; gap: 10px;
padding: 10px 12px;
border-radius: 10px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.08);
color: var(--txt, #f4f4f6);
font-family: 'Inter', sans-serif;
cursor: pointer;
text-align: left;
transition: background 0.12s ease, border-color 0.12s ease, transform 0.12s ease;
}
.oxwork-stats-card .oxs-action:hover {
background: rgba(255,255,255,0.06);
border-color: rgba(255,255,255,0.16);
transform: translateY(-1px);
}
.oxwork-stats-card .oxs-action-primary {
background: linear-gradient(135deg, rgba(96,165,250,0.16), rgba(96,165,250,0.06));
border-color: rgba(96,165,250,0.32);
}
.oxwork-stats-card .oxs-action-primary:hover {
background: linear-gradient(135deg, rgba(96,165,250,0.26), rgba(96,165,250,0.12));
border-color: rgba(96,165,250,0.50);
}
.oxwork-stats-card .oxs-action-icon { font-size: 18px; flex-shrink: 0; }
.oxwork-stats-card .oxs-action-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.oxwork-stats-card .oxs-action-label { font: 700 12.5px/1.2 'Inter', sans-serif; }
.oxwork-stats-card .oxs-action-sub { font: 500 10.5px/1.3 'Inter', sans-serif; color: var(--txt-3, #9aa3b2); }
/* Footer */
.oxwork-stats-card .oxs-footer {
display: flex; align-items: center; gap: 7px;
font: 500 10.5px/1.3 'Inter', sans-serif;
color: var(--txt-3, #9aa3b2);
padding-top: 10px;
border-top: 1px solid rgba(255,255,255,0.05);
}
.oxwork-stats-card .oxs-footer-sep { opacity: 0.5; }
.oxwork-stats-card .oxs-footer a { color: #60a5fa; text-decoration: none; font-weight: 600; }
.oxwork-stats-card .oxs-footer a:hover { text-decoration: underline; color: #93c5fd; }
@media (max-width: 720px) {
.oxwork-stats-card .oxs-tiles { grid-template-columns: repeat(2, 1fr); }
.oxwork-stats-card .oxs-actions { grid-template-columns: 1fr; }
.oxwork-stats-card .oxs-cat-row { grid-template-columns: 18px 80px 1fr 40px 32px; gap: 7px; }
}
@media (max-width: 480px) {
.oxwork-stats-card { padding: 18px 16px 14px; }
.oxwork-stats-card .oxs-title { font-size: 18px; }
.oxwork-stats-card .oxs-open-num { font-size: 24px; }
}
/* ─── Big-S → mascot helpers · 2026-05-30 ───────────────────────────── */
.pf-brand-ico { width: 100%; height: 100%; object-fit: contain; display: block; padding: 4px; }
.pf-mono { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 100%; font: 700 14px/1 'Inter', sans-serif; color: var(--txt, #f4f4f6); }
.tk-logo-brand { padding: 6px; object-fit: contain; background: linear-gradient(135deg, rgba(139,124,246,0.22), rgba(139,124,246,0.06)); border: 1px solid rgba(139,124,246,0.32); }
/* ─── Portfolio hero · 24h delta + 7d sparkline · 2026-05-30 ────────── */
.pf-hero-delta {
display: flex; align-items: baseline; gap: 8px;
margin-top: 4px;
font: 600 13px/1.2 'Inter', sans-serif;
}
.pf-hero-d-amt {
font: 500 11.5px/1.2 var(--mono, 'JetBrains Mono', monospace);
color: var(--txt-3, #9aa3b2);
}
.pf-spark {
display: block;
width: 100%;
max-width: 280px;
height: 36px;
margin-top: 8px;
}
/* ─── Stats hero · WoW delta + 7d sparkline · 2026-05-30 ────────────── */
.es-hero-delta {
display: inline-flex; align-items: baseline; gap: 7px;
margin-top: 6px;
padding: 3px 9px;
border-radius: 100px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.06);
font: 600 12px/1.2 'Inter', sans-serif;
}
.es-hero-delta .es-pos { color: #86efac; }
.es-hero-delta .es-neg { color: #fda4af; }
.es-hero-delta-k { color: var(--txt-3, #9aa3b2); font-weight: 500; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; }
.es-spark {
display: block; width: 100%; max-width: 320px; height: 40px; margin: 10px 0 4px;
}
/* ─── Bridge history · summary tile strip · 2026-05-30 ──────────────── */
.bh-summary-strip {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
gap: 8px;
padding: 14px 14px 4px;
border-bottom: 1px solid rgba(255,255,255,0.05);
margin-bottom: 6px;
}
.bh-sum-tile {
display: flex; flex-direction: column; gap: 2px;
padding: 9px 11px;
border-radius: 10px;
background: rgba(255,255,255,0.025);
border: 1px solid rgba(255,255,255,0.06);
font-family: 'Inter', sans-serif;
}
.bh-sum-tile.bh-sum-ok { border-color: rgba(74,222,128,0.22); background: rgba(74,222,128,0.04); }
.bh-sum-tile.bh-sum-pending { border-color: rgba(251,191,36,0.22); background: rgba(251,191,36,0.04); }
.bh-sum-tile.bh-sum-fail { border-color: rgba(251,113,133,0.22); background: rgba(251,113,133,0.04); }
.bh-sum-k {
font: 600 9.5px/1.2 'Inter', sans-serif;
color: var(--txt-3, #9aa3b2);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.bh-sum-v {
font: 700 17px/1.1 'Space Grotesk', 'Inter', sans-serif;
color: var(--txt, #f4f4f6);
}
.bh-sum-tile.bh-sum-ok .bh-sum-v { color: #86efac; }
.bh-sum-tile.bh-sum-pending .bh-sum-v { color: #fde68a; }
.bh-sum-tile.bh-sum-fail .bh-sum-v { color: #fda4af; }
.bh-sum-s {
font: 500 10px/1.3 'Inter', sans-serif;
color: var(--txt-3, #9aa3b2);
}
/* ─── Account · clickable tiles + tier progress · 2026-05-30 ────────── */
.ac-tile-btn {
cursor: pointer;
transition: background 0.12s ease, border-color 0.12s ease, transform 0.12s ease;
position: relative;
text-align: left;
font-family: 'Inter', sans-serif;
color: var(--txt, #f4f4f6);
}
.ac-tile-btn:hover {
background: rgba(255,255,255,0.05);
border-color: rgba(255,255,255,0.16);
transform: translateY(-1px);
}
.ac-tile-btn:focus-visible {
outline: 2px solid rgba(96,165,250,0.50);
outline-offset: 2px;
}
.ac-tile-go {
position: absolute;
top: 9px; right: 11px;
font: 700 14px/1 'Inter', sans-serif;
color: var(--txt-3, #9aa3b2);
opacity: 0;
transition: opacity 0.12s ease, transform 0.12s ease;
}
.ac-tile-btn:hover .ac-tile-go {
opacity: 1;
transform: translateX(2px);
}
.ac-tier-progress {
margin-top: 14px;
padding: 11px 12px;
border-radius: 10px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.07);
display: flex; flex-direction: column; gap: 7px;
}
.ac-tier-max {
background: linear-gradient(135deg, rgba(251,191,36,0.10), rgba(251,191,36,0.02));
border-color: rgba(251,191,36,0.28);
}
.ac-tier-progress-msg {
font: 600 12.5px/1.4 'Inter', sans-serif;
color: #fde68a;
}
.ac-tier-prow {
display: flex; align-items: center; justify-content: space-between; gap: 8px;
font: 600 11px/1.2 'Inter', sans-serif;
flex-wrap: wrap;
}
.ac-tier-pcur { color: var(--txt-2, #c4c5cc); }
.ac-tier-pneed {
font: 700 11px/1.2 var(--mono, 'JetBrains Mono', monospace);
color: #fbbf24;
flex: 1;
text-align: center;
}
.ac-tier-pnext { color: var(--txt-3, #9aa3b2); }
.ac-tier-pbar {
height: 6px;
background: rgba(255,255,255,0.06);
border-radius: 4px;
overflow: hidden;
}
.ac-tier-pfill {
height: 100%;
background: linear-gradient(90deg, #8B7CF6 0%, #fbbf24 50%, #fde68a 100%);
border-radius: 4px;
transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 0 12px rgba(251,191,36,0.40);
}
/* ─── /discover · premium grid · 2026-05-30 ─────────────────────────── */
.discover-card {
position: relative;
overflow: hidden;
padding: 22px 22px 18px;
border-radius: 16px;
background:
linear-gradient(135deg, rgba(74,222,128,0.05) 0%, rgba(74,222,128,0.01) 60%),
rgba(20,28,46,0.65);
border: 1px solid rgba(74,222,128,0.22);
font-family: 'Inter', sans-serif;
box-shadow: 0 12px 40px rgba(0,0,0,0.32);
}
.discover-card .dx-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.discover-card .dx-orb { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.25; }
.discover-card .dx-orb-1 { width: 220px; height: 220px; background: #4ade80; top: -70px; right: -50px; }
.discover-card > *:not(.dx-bg) { position: relative; z-index: 1; }
.discover-card .dx-head {
display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
margin-bottom: 16px;
}
.discover-card .dx-head-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.discover-card .dx-eyebrow {
display: inline-flex; align-items: center; gap: 6px;
font: 700 10.5px/1.2 'Inter', sans-serif;
color: #86efac;
text-transform: uppercase;
letter-spacing: 0.10em;
}
.discover-card .dx-live-dot {
width: 6px; height: 6px; border-radius: 50%;
background: #4ade80;
box-shadow: 0 0 6px rgba(74,222,128,0.80);
animation: dx-pulse 1.6s ease-in-out infinite;
}
@keyframes dx-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.45; } }
.discover-card .dx-title {
font: 700 19px/1.2 'Space Grotesk', 'Inter', sans-serif;
margin: 0;
color: #fff;
letter-spacing: -0.01em;
}
.discover-card .dx-pool {
flex-shrink: 0;
text-align: right;
display: flex; flex-direction: column; gap: 1px;
}
.discover-card .dx-pool-v {
font: 700 17px/1.05 'Space Grotesk', 'Inter', sans-serif;
color: #fbbf24;
}
.discover-card .dx-pool-k {
font: 600 10px/1.2 'Inter', sans-serif;
color: var(--txt-3, #9aa3b2);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.discover-card .dx-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 10px;
margin-bottom: 14px;
}
.discover-card .dx-tile {
display: flex; flex-direction: column; gap: 8px;
padding: 12px 13px;
border-radius: 12px;
background: rgba(255,255,255,0.025);
border: 1px solid rgba(255,255,255,0.07);
color: var(--txt, #f4f4f6);
font-family: 'Inter', sans-serif;
cursor: pointer;
text-align: left;
transition: background 0.12s ease, border-color 0.12s ease, transform 0.12s ease;
}
.discover-card .dx-tile:hover {
background: rgba(255,255,255,0.05);
border-color: rgba(255,255,255,0.18);
transform: translateY(-1px);
}
.discover-card .dx-tile-hot {
border-color: rgba(251,191,36,0.30);
background: linear-gradient(135deg, rgba(251,191,36,0.06), rgba(255,255,255,0.025));
}
.discover-card .dx-tile-hot:hover { border-color: rgba(251,191,36,0.50); }
.discover-card .dx-tile-top {
display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.discover-card .dx-tile-cat {
font: 600 11px/1.2 'Inter', sans-serif;
color: var(--txt-2, #c4c5cc);
}
.discover-card .dx-tile-bounty {
font: 700 14px/1 'Space Grotesk', 'Inter', sans-serif;
color: var(--txt, #f4f4f6);
letter-spacing: -0.005em;
}
.discover-card .dx-bounty-hot { color: #fbbf24; }
.discover-card .dx-tile-desc {
font: 500 12px/1.4 'Inter', sans-serif;
color: var(--txt-2, #c4c5cc);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.discover-card .dx-tile-foot {
display: flex; align-items: center; justify-content: space-between; gap: 6px;
padding-top: 6px;
border-top: 1px solid rgba(255,255,255,0.04);
}
.discover-card .dx-tile-id {
font: 700 10px/1.2 var(--mono, 'JetBrains Mono', monospace);
color: var(--txt-3, #9aa3b2);
letter-spacing: 0.04em;
}
.discover-card .dx-tile-meta {
font: 500 10px/1.2 'Inter', sans-serif;
color: var(--txt-3, #9aa3b2);
}
.discover-card .dx-empty {
padding: 24px 16px;
text-align: center;
color: var(--txt-3, #9aa3b2);
font: 500 13px/1.4 'Inter', sans-serif;
}
.discover-card .dx-foot {
font: 500 11px/1.4 'Inter', sans-serif;
color: var(--txt-3, #9aa3b2);
padding-top: 8px;
border-top: 1px solid rgba(255,255,255,0.05);
text-align: center;
}
/* ─── /send · review/complete preview · 2026-05-30 ──────────────────── */
.send-intent-card {
position: relative;
overflow: hidden;
padding: 20px 20px 16px;
border-radius: 16px;
background:
linear-gradient(135deg, rgba(251,191,36,0.06) 0%, rgba(251,191,36,0.01) 60%),
rgba(20,28,46,0.65);
border: 1px solid rgba(251,191,36,0.28);
font-family: 'Inter', sans-serif;
color: var(--txt, #f4f4f6);
box-shadow: 0 12px 40px rgba(0,0,0,0.32);
}
.send-intent-card.si-complete {
background:
linear-gradient(135deg, rgba(74,222,128,0.06) 0%, rgba(74,222,128,0.01) 60%),
rgba(20,28,46,0.65);
border-color: rgba(74,222,128,0.28);
}
.send-intent-card .si-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.send-intent-card .si-orb {
position: absolute;
width: 200px; height: 200px;
border-radius: 50%;
filter: blur(60px);
opacity: 0.22;
top: -60px; right: -50px;
}
.send-intent-card > *:not(.si-bg) { position: relative; z-index: 1; }
.send-intent-card .si-head {
display: flex; align-items: center; gap: 12px;
margin-bottom: 16px;
}
.send-intent-card .si-icon {
flex-shrink: 0;
width: 40px; height: 40px;
border-radius: 12px;
border: 1px solid;
display: flex; align-items: center; justify-content: center;
font: 700 18px/1 'Inter', sans-serif;
}
.send-intent-card .si-head-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.send-intent-card .si-eyebrow {
font: 700 10.5px/1.2 'Inter', sans-serif;
text-transform: uppercase;
letter-spacing: 0.10em;
}
.send-intent-card .si-title {
font: 700 18px/1.2 'Space Grotesk', 'Inter', sans-serif;
margin: 0;
color: #fff;
letter-spacing: -0.01em;
}
.send-intent-card .si-amount-row {
display: flex; align-items: center; gap: 14px;
padding: 14px 14px;
border-radius: 12px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.07);
margin-bottom: 12px;
}
.send-intent-card .si-token-mascot {
width: 44px; height: 44px;
border-radius: 12px;
padding: 6px;
background: linear-gradient(135deg, rgba(139,124,246,0.22), rgba(139,124,246,0.06));
border: 1px solid rgba(139,124,246,0.32);
object-fit: contain;
flex-shrink: 0;
}
.send-intent-card .si-token-mono {
width: 44px; height: 44px;
border-radius: 12px;
background: linear-gradient(135deg, rgba(96,165,250,0.18), rgba(96,165,250,0.06));
border: 1px solid rgba(96,165,250,0.32);
display: flex; align-items: center; justify-content: center;
font: 800 13px/1 'Space Grotesk', 'Inter', sans-serif;
color: #93c5fd;
letter-spacing: -0.02em;
flex-shrink: 0;
}
.send-intent-card .si-amount-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.send-intent-card .si-amount-v {
font: 700 24px/1.05 'Space Grotesk', 'Inter', sans-serif;
color: #fff;
letter-spacing: -0.02em;
}
.send-intent-card .si-amount-sym {
font-size: 16px;
color: var(--txt-2, #c4c5cc);
font-weight: 600;
margin-left: 3px;
}
.send-intent-card .si-amount-usd {
font: 600 12.5px/1.2 var(--mono, 'JetBrains Mono', monospace);
color: var(--txt-3, #9aa3b2);
}
.send-intent-card .si-route {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 10px;
align-items: center;
padding: 12px 14px;
border-radius: 12px;
background: rgba(255,255,255,0.025);
border: 1px solid rgba(255,255,255,0.06);
margin-bottom: 10px;
}
.send-intent-card .si-route-from, .send-intent-card .si-route-to {
display: flex; flex-direction: column; gap: 2px;
min-width: 0;
}
.send-intent-card .si-route-to { text-align: right; }
.send-intent-card .si-route-k {
font: 600 10px/1.2 'Inter', sans-serif;
color: var(--txt-3, #9aa3b2);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.send-intent-card .si-route-v {
font: 600 13px/1.3 'Inter', sans-serif;
color: var(--txt, #f4f4f6);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.send-intent-card .si-route-arrow {
font: 700 18px/1 'Inter', sans-serif;
color: #fbbf24;
flex-shrink: 0;
}
.send-intent-card.si-complete .si-route-arrow { color: #86efac; }
.send-intent-card .si-addr-link {
color: #60a5fa;
text-decoration: none;
font-size: 13px;
}
.send-intent-card .si-addr-link:hover { text-decoration: underline; color: #93c5fd; }
.send-intent-card .si-addr-ellipsis { color: var(--txt-3, #9aa3b2); margin: 0 1px; }
.send-intent-card .si-tx-row {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 10px 13px;
border-radius: 10px;
background: rgba(74,222,128,0.05);
border: 1px solid rgba(74,222,128,0.20);
margin-bottom: 10px;
}
.send-intent-card .si-tx-k {
font: 600 11px/1.2 'Inter', sans-serif;
color: #86efac;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.send-intent-card .si-tx-v {
font: 600 12.5px/1.2 var(--mono, 'JetBrains Mono', monospace);
text-align: right;
}
.send-intent-card .si-tx-v a {
color: #60a5fa;
text-decoration: none;
}
.send-intent-card .si-tx-v a:hover { text-decoration: underline; color: #93c5fd; }
.send-intent-card .si-note {
display: flex; align-items: flex-start; gap: 9px;
padding: 10px 12px;
border-radius: 10px;
background: rgba(251,191,36,0.06);
border: 1px solid rgba(251,191,36,0.22);
font: 500 12px/1.45 'Inter', sans-serif;
color: rgba(252,211,77,0.85);
margin-bottom: 10px;
}
.send-intent-card .si-note-ic {
font-size: 13px; flex-shrink: 0;
}
.send-intent-card .si-meta {
display: flex; justify-content: center;
padding-top: 4px;
}
.send-intent-card .si-meta-pill {
font: 600 10.5px/1.3 'Inter', sans-serif;
color: var(--txt-3, #9aa3b2);
padding: 3px 10px;
border-radius: 100px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.06);
text-transform: uppercase;
letter-spacing: 0.06em;
}
@media (max-width: 480px) {
.discover-card .dx-grid { grid-template-columns: 1fr; }
.send-intent-card .si-amount-v { font-size: 20px; }
.send-intent-card .si-route { grid-template-columns: 1fr; text-align: left; }
.send-intent-card .si-route-to { text-align: left; }
.send-intent-card .si-route-arrow { transform: rotate(90deg); justify-self: start; }
.ac-tier-prow { justify-content: flex-start; }
.ac-tier-pneed { text-align: left; flex: 0; }
}
/* ─── /send help card · 2026-05-30 ─────────────────────────────────── */
.send-help-card {
position: relative;
overflow: hidden;
padding: 20px 20px 16px;
border-radius: 16px;
background: linear-gradient(135deg, rgba(96,165,250,0.06) 0%, rgba(96,165,250,0.01) 60%), rgba(20,28,46,0.65);
border: 1px solid rgba(96,165,250,0.24);
font-family: 'Inter', sans-serif;
color: var(--txt, #f4f4f6);
box-shadow: 0 12px 40px rgba(0,0,0,0.32);
}
.send-help-card .sh-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.send-help-card .sh-orb { position: absolute; width: 200px; height: 200px; border-radius: 50%; background: #60a5fa; filter: blur(60px); opacity: 0.22; top: -60px; right: -50px; }
.send-help-card > *:not(.sh-bg) { position: relative; z-index: 1; }
.send-help-card .sh-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.send-help-card .sh-icon {
flex-shrink: 0;
width: 40px; height: 40px;
border-radius: 12px;
background: linear-gradient(135deg, rgba(96,165,250,0.22), rgba(96,165,250,0.10));
border: 1px solid rgba(96,165,250,0.32);
display: flex; align-items: center; justify-content: center;
font: 700 18px/1 'Inter', sans-serif;
color: #93c5fd;
}
.send-help-card .sh-head-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.send-help-card .sh-eyebrow {
font: 700 10.5px/1.2 'Inter', sans-serif;
color: #93c5fd;
text-transform: uppercase;
letter-spacing: 0.10em;
}
.send-help-card .sh-title {
font: 700 18px/1.2 'Space Grotesk', 'Inter', sans-serif;
margin: 0; color: #fff;
letter-spacing: -0.01em;
}
.send-help-card .sh-lead {
font: 500 12.5px/1.55 'Inter', sans-serif;
margin: 4px 0 0;
color: var(--txt-2, #c4c5cc);
}
.send-help-card .sh-section { margin-bottom: 14px; }
.send-help-card .sh-section-label {
font: 700 10px/1.2 'Inter', sans-serif;
color: var(--txt-3, #9aa3b2);
text-transform: uppercase;
letter-spacing: 0.10em;
margin-bottom: 8px;
}
.send-help-card .sh-examples { display: flex; flex-direction: column; gap: 6px; }
.send-help-card .sh-example {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 9px 12px;
border-radius: 10px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.07);
cursor: pointer;
text-align: left;
transition: background 0.12s ease, border-color 0.12s ease, transform 0.12s ease;
font-family: inherit; color: inherit;
}
.send-help-card .sh-example:hover {
background: rgba(96,165,250,0.10);
border-color: rgba(96,165,250,0.32);
transform: translateY(-1px);
}
.send-help-card .sh-example-cmd {
font: 600 12px/1.3 var(--mono, 'JetBrains Mono', monospace);
color: #93c5fd;
background: none; padding: 0;
}
.send-help-card .sh-example-desc {
font: 500 11px/1.3 'Inter', sans-serif;
color: var(--txt-3, #9aa3b2);
text-align: right;
flex-shrink: 0;
}
.send-help-card .sh-tokens { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; }
.send-help-card .sh-tok-row {
display: flex; align-items: center; gap: 8px;
padding: 5px 8px;
border-radius: 8px;
background: rgba(255,255,255,0.02);
border: 1px solid rgba(255,255,255,0.05);
}
.send-help-card .sh-tok-mascot {
width: 22px; height: 22px;
padding: 3px;
border-radius: 6px;
background: linear-gradient(135deg, rgba(139,124,246,0.22), rgba(139,124,246,0.06));
border: 1px solid rgba(139,124,246,0.32);
object-fit: contain;
flex-shrink: 0;
}
.send-help-card .sh-tok-pill {
display: inline-flex; align-items: center; justify-content: center;
min-width: 32px; height: 22px;
padding: 0 6px;
border-radius: 6px;
border: 1px solid;
font: 700 9.5px/1 'Space Grotesk', 'Inter', sans-serif;
flex-shrink: 0;
letter-spacing: 0.02em;
}
.send-help-card .sh-tok-sym {
font: 700 12px/1.2 'Inter', sans-serif;
color: var(--txt, #f4f4f6);
}
.send-help-card .sh-tok-desc {
font: 500 10.5px/1.3 'Inter', sans-serif;
color: var(--txt-3, #9aa3b2);
margin-left: auto;
text-align: right;
}
.send-help-card .sh-foot {
display: flex; align-items: flex-start; gap: 8px;
padding: 9px 11px;
border-radius: 10px;
background: rgba(251,191,36,0.05);
border: 1px solid rgba(251,191,36,0.18);
font: 500 11.5px/1.45 'Inter', sans-serif;
color: var(--txt-2, #c4c5cc);
}
.send-help-card .sh-foot-ic { font-size: 13px; flex-shrink: 0; }
.send-help-card .sh-foot b { color: #fde68a; }
/* ─── send_intent tweaks · token-mono size variants + usd-main · 2026-05-30 ── */
.send-intent-card .si-token-mono-sm { font-size: 15px; }
.send-intent-card .si-token-mono { font-size: 12px; }
.send-intent-card .si-token-mono-lg { font-size: 10px; letter-spacing: -0.03em; }
.send-intent-card .si-amount-usd-main {
font: 700 24px/1.05 'Space Grotesk', 'Inter', sans-serif;
color: #fff;
letter-spacing: -0.02em;
}
@media (max-width: 480px) {
.send-help-card .sh-tokens { grid-template-columns: 1fr; }
.send-help-card .sh-example { flex-direction: column; align-items: flex-start; }
.send-help-card .sh-example-desc { text-align: left; }
}
/* ─── /history timeline card · 2026-05-30 ──────────────────────────── */
.history-card {
position: relative;
overflow: hidden;
padding: 22px 22px 18px;
border-radius: 16px;
background: linear-gradient(135deg, rgba(167,139,250,0.06) 0%, rgba(167,139,250,0.01) 60%), rgba(20,28,46,0.65);
border: 1px solid rgba(167,139,250,0.22);
font-family: 'Inter', sans-serif;
color: var(--txt, #f4f4f6);
box-shadow: 0 12px 40px rgba(0,0,0,0.32);
}
.history-card .hi-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.history-card .hi-orb { position: absolute; width: 220px; height: 220px; border-radius: 50%; background: #a78bfa; filter: blur(60px); opacity: 0.22; top: -70px; right: -50px; }
.history-card > *:not(.hi-bg) { position: relative; z-index: 1; }
.history-card .hi-head { margin-bottom: 14px; }
.history-card .hi-head-text { display: flex; flex-direction: column; gap: 4px; }
.history-card .hi-eyebrow {
font: 700 10.5px/1.2 'Inter', sans-serif;
color: #c4b5fd;
text-transform: uppercase;
letter-spacing: 0.10em;
}
.history-card .hi-title {
font: 700 19px/1.2 'Space Grotesk', 'Inter', sans-serif;
margin: 0; color: #fff;
letter-spacing: -0.01em;
}
.history-card .hi-lead {
font: 500 12px/1.45 'Inter', sans-serif;
margin: 4px 0 0;
color: var(--txt-3, #9aa3b2);
}
/* Summary tile row */
.history-card .hi-sum {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
gap: 6px;
margin-bottom: 16px;
}
.history-card .hi-sum-tile {
display: flex; flex-direction: column; align-items: center; gap: 2px;
padding: 8px 6px;
border-radius: 10px;
background: rgba(255,255,255,0.025);
border: 1px solid rgba(255,255,255,0.06);
cursor: pointer;
font-family: 'Inter', sans-serif;
color: var(--txt, #f4f4f6);
transition: background 0.12s ease, transform 0.12s ease;
}
.history-card .hi-sum-tile:hover {
background: rgba(255,255,255,0.05);
transform: translateY(-1px);
}
.history-card .hi-sum-icon { font-size: 16px; line-height: 1; }
.history-card .hi-sum-v {
font: 700 16px/1 'Space Grotesk', 'Inter', sans-serif;
color: var(--txt, #f4f4f6);
letter-spacing: -0.01em;
}
.history-card .hi-sum-k {
font: 600 9.5px/1.2 'Inter', sans-serif;
color: var(--txt-3, #9aa3b2);
text-transform: uppercase;
letter-spacing: 0.06em;
}
/* Timeline · groups + rows */
.history-card .hi-timeline {
display: flex; flex-direction: column; gap: 14px;
margin-bottom: 14px;
}
.history-card .hi-group { display: flex; flex-direction: column; gap: 4px; }
.history-card .hi-group-head {
display: flex; align-items: center; gap: 10px;
margin-bottom: 4px;
}
.history-card .hi-group-label {
font: 700 10.5px/1.2 'Inter', sans-serif;
color: var(--txt-3, #9aa3b2);
text-transform: uppercase;
letter-spacing: 0.10em;
flex-shrink: 0;
}
.history-card .hi-group-line { flex: 1; height: 1px; background: rgba(255,255,255,0.06); }
.history-card .hi-group-items { display: flex; flex-direction: column; gap: 4px; }
.history-card .hi-row {
display: grid;
grid-template-columns: 56px 20px 1fr auto;
align-items: center;
gap: 10px;
padding: 8px 10px;
border-radius: 9px;
background: rgba(255,255,255,0.02);
border: 1px solid rgba(255,255,255,0.04);
transition: background 0.12s ease, border-color 0.12s ease;
}
.history-card .hi-row:hover {
background: rgba(255,255,255,0.04);
border-color: rgba(255,255,255,0.08);
}
.history-card .hi-row.hi-row-pos {
border-left: 2px solid rgba(74,222,128,0.35);
}
.history-card .hi-row.hi-row-neg {
border-left: 2px solid rgba(251,113,133,0.35);
}
.history-card .hi-row-time {
font: 600 10.5px/1.2 var(--mono, 'JetBrains Mono', monospace);
color: var(--txt-3, #9aa3b2);
}
.history-card .hi-row-icon { font-size: 15px; text-align: center; }
.history-card .hi-row-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.history-card .hi-row-title {
font: 600 12.5px/1.2 'Inter', sans-serif;
color: var(--txt, #f4f4f6);
}
.history-card .hi-row-detail {
font: 500 11px/1.3 'Inter', sans-serif;
color: var(--txt-3, #9aa3b2);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.history-card .hi-row-amount {
font: 700 12px/1.2 var(--mono, 'JetBrains Mono', monospace);
color: var(--txt, #f4f4f6);
text-align: right;
}
.history-card .hi-empty {
padding: 24px 16px;
text-align: center;
color: var(--txt-3, #9aa3b2);
font: 500 13px/1.4 'Inter', sans-serif;
}
.history-card .hi-actions { display: flex; gap: 8px; }
.history-card .hi-action {
flex: 1;
display: flex; align-items: center; gap: 10px;
padding: 10px 12px;
border-radius: 10px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.08);
color: var(--txt, #f4f4f6);
font-family: 'Inter', sans-serif;
cursor: pointer;
text-align: left;
transition: background 0.12s ease, border-color 0.12s ease, transform 0.12s ease;
}
.history-card .hi-action:hover {
background: rgba(255,255,255,0.06);
border-color: rgba(255,255,255,0.16);
transform: translateY(-1px);
}
.history-card .hi-action-primary {
background: linear-gradient(135deg, rgba(167,139,250,0.16), rgba(167,139,250,0.06));
border-color: rgba(167,139,250,0.32);
}
.history-card .hi-action-primary:hover {
background: linear-gradient(135deg, rgba(167,139,250,0.26), rgba(167,139,250,0.12));
border-color: rgba(167,139,250,0.50);
}
.history-card .hi-action-icon { font-size: 18px; flex-shrink: 0; }
.history-card .hi-action-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.history-card .hi-action-label { font: 700 12.5px/1.2 'Inter', sans-serif; }
.history-card .hi-action-sub { font: 500 10.5px/1.3 'Inter', sans-serif; color: var(--txt-3, #9aa3b2); }
@media (max-width: 480px) {
.history-card .hi-row { grid-template-columns: 48px 18px 1fr auto; gap: 7px; padding: 7px 8px; }
.history-card .hi-row-time { font-size: 9.5px; }
.history-card .hi-sum { grid-template-columns: repeat(3, 1fr); }
}
/* ─── Wave 3 polish · 2026-05-30 ────────────────────────────────────── */
/* my-bots aggregate hero */
.rc-my-bots .mb-aggregate {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
gap: 8px;
padding: 12px 14px;
border-bottom: 1px solid rgba(255,255,255,0.05);
}
.rc-my-bots .mb-agg-tile {
display: flex; flex-direction: column; gap: 2px;
padding: 9px 11px;
border-radius: 10px;
background: rgba(255,255,255,0.025);
border: 1px solid rgba(255,255,255,0.06);
font-family: 'Inter', sans-serif;
}
.rc-my-bots .mb-agg-tile.mb-agg-live {
background: linear-gradient(135deg, rgba(74,222,128,0.10), rgba(74,222,128,0.02));
border-color: rgba(74,222,128,0.26);
}
.rc-my-bots .mb-agg-tile.mb-agg-err {
background: linear-gradient(135deg, rgba(251,113,133,0.10), rgba(251,113,133,0.02));
border-color: rgba(251,113,133,0.26);
}
.rc-my-bots .mb-agg-k {
font: 600 9.5px/1.2 'Inter', sans-serif;
color: var(--txt-3, #9aa3b2);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.rc-my-bots .mb-agg-v {
font: 700 18px/1.05 'Space Grotesk', 'Inter', sans-serif;
color: var(--txt, #f4f4f6);
letter-spacing: -0.01em;
}
.rc-my-bots .mb-agg-live .mb-agg-v { color: #86efac; }
.rc-my-bots .mb-agg-err .mb-agg-v { color: #fda4af; }
.rc-my-bots .mb-agg-s {
font: 500 10px/1.3 'Inter', sans-serif;
color: var(--txt-3, #9aa3b2);
}
/* marketplace category filter row */
.mp-card .mp-filters {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding: 10px 16px 6px;
}
.mp-card .mp-filter {
display: inline-flex; align-items: center; gap: 5px;
padding: 5px 11px;
border-radius: 100px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.08);
color: var(--txt-2, #c4c5cc);
font: 600 11.5px/1.2 'Inter', sans-serif;
cursor: pointer;
transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.mp-card .mp-filter:hover {
background: rgba(96,165,250,0.10);
border-color: rgba(96,165,250,0.32);
color: #93c5fd;
}
.mp-card .mp-filter.is-active {
background: linear-gradient(135deg, rgba(96,165,250,0.22), rgba(96,165,250,0.10));
border-color: rgba(96,165,250,0.50);
color: #fff;
font-weight: 700;
}
/* task-detail Read more (CSS-only via ) */
.tdc-card .tdc-desc-details {
margin-top: 8px;
}
.tdc-card .tdc-desc-summary {
list-style: none;
cursor: pointer;
display: block;
font: 500 13px/1.55 'Inter', sans-serif;
color: var(--txt-2, #c4c5cc);
}
.tdc-card .tdc-desc-summary::-webkit-details-marker { display: none; }
.tdc-card .tdc-desc-toggle {
display: inline-block;
margin-left: 6px;
padding: 1px 8px;
border-radius: 100px;
background: rgba(96,165,250,0.10);
border: 1px solid rgba(96,165,250,0.24);
color: #93c5fd;
font: 700 10.5px/1.4 'Inter', sans-serif;
text-transform: uppercase;
letter-spacing: 0.05em;
transition: background 0.12s ease;
}
.tdc-card .tdc-desc-toggle:hover {
background: rgba(96,165,250,0.20);
}
.tdc-card .tdc-toggle-less { display: none; }
.tdc-card .tdc-desc-details[open] .tdc-toggle-more { display: none; }
.tdc-card .tdc-desc-details[open] .tdc-toggle-less { display: inline; }
.tdc-card .tdc-desc-details[open] .tdc-desc-short { display: none; }
.tdc-card .tdc-desc-full {
font: 500 13px/1.55 'Inter', sans-serif;
color: var(--txt-2, #c4c5cc);
margin-top: 4px;
white-space: pre-wrap;
}
@media (max-width: 480px) {
.rc-my-bots .mb-aggregate { grid-template-columns: repeat(2, 1fr); }
}
/* ─── action_result primitive · 2026-05-30 ──────────────────────────── */
.action-result-card {
position: relative;
padding: 16px 16px 14px;
border-radius: 14px;
border: 1px solid;
font-family: 'Inter', sans-serif;
color: var(--txt, #f4f4f6);
box-shadow: 0 8px 28px rgba(0,0,0,0.25);
}
.action-result-card .ar-head { display: flex; align-items: flex-start; gap: 12px; }
.action-result-card .ar-icon {
flex-shrink: 0;
width: 36px; height: 36px;
border-radius: 10px;
border: 1px solid;
display: flex; align-items: center; justify-content: center;
font: 700 17px/1 'Inter', sans-serif;
}
.action-result-card .ar-head-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.action-result-card .ar-eyebrow {
font: 700 9.5px/1.2 'Inter', sans-serif;
text-transform: uppercase;
letter-spacing: 0.12em;
}
.action-result-card .ar-title {
font: 700 15px/1.25 'Space Grotesk', 'Inter', sans-serif;
color: #fff;
margin: 0;
letter-spacing: -0.005em;
}
.action-result-card .ar-detail {
font: 500 12.5px/1.5 'Inter', sans-serif;
color: var(--txt-2, #c4c5cc);
margin: 4px 0 0;
}
.action-result-card .ar-fields {
display: grid;
grid-template-columns: 1fr;
gap: 6px;
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid rgba(255,255,255,0.05);
}
.action-result-card .ar-field {
display: grid;
grid-template-columns: 90px 1fr;
gap: 10px;
align-items: baseline;
font: 500 12px/1.4 'Inter', sans-serif;
}
.action-result-card .ar-field-k {
font-weight: 600;
color: var(--txt-3, #9aa3b2);
text-transform: uppercase;
font-size: 10px;
letter-spacing: 0.06em;
}
.action-result-card .ar-field-v {
color: var(--txt, #f4f4f6);
word-break: break-word;
}
.action-result-card .ar-field-v a {
color: #60a5fa;
text-decoration: none;
}
.action-result-card .ar-field-v a:hover { text-decoration: underline; }
.action-result-card .ar-chips {
display: flex;
gap: 6px;
flex-wrap: wrap;
margin-top: 12px;
}
.action-result-card .ar-chip {
padding: 7px 12px;
border-radius: 100px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.10);
color: var(--txt, #f4f4f6);
font: 600 11.5px/1 'Inter', sans-serif;
cursor: pointer;
transition: background 0.12s ease, border-color 0.12s ease;
}
.action-result-card .ar-chip:hover {
background: rgba(255,255,255,0.08);
border-color: rgba(255,255,255,0.20);
}
.action-result-card .ar-chip-primary {
background: linear-gradient(135deg, rgba(139,124,246,0.18), rgba(139,124,246,0.06));
border-color: rgba(139,124,246,0.40);
color: #C4B5FD;
}
.action-result-card .ar-chip-primary:hover {
background: linear-gradient(135deg, rgba(139,124,246,0.28), rgba(139,124,246,0.12));
border-color: rgba(139,124,246,0.60);
}
.action-result-card .ar-footer {
margin-top: 10px;
padding-top: 8px;
border-top: 1px solid rgba(255,255,255,0.05);
font: 500 10.5px/1.4 'Inter', sans-serif;
color: var(--txt-3, #9aa3b2);
}
/* ─── /portfolio · pf-tok-ico mascot sizing fix · 2026-05-30 ────────── */
/* The legacy pf-tok-ico container had no width/height in CSS · mascot SVG
inside it (width:100% height:100%) collapsed to 0x0 so the alt text showed.
Give the container explicit dimensions matching the existing pf-tok layout. */
.pf-tok .pf-tok-ico {
width: 28px;
height: 28px;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 8px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
overflow: hidden;
font: 700 12px/1 'Inter', sans-serif;
color: var(--txt-2, #c4c5cc);
}
.pf-tok .pf-tok-ico img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
.pf-tok .pf-tok-ico .pf-brand-ico {
padding: 3px;
background: linear-gradient(135deg, rgba(139,124,246,0.22), rgba(139,124,246,0.06));
border-color: rgba(139,124,246,0.32);
border-radius: 8px;
width: 100%;
height: 100%;
}
/* ─── detail_card primitive · 2026-05-30 ────────────────────────────── */
.detail-card {
position: relative;
padding: 18px 18px 16px;
border-radius: 14px;
border: 1px solid;
background: rgba(20,28,46,0.72);
font-family: 'Inter', sans-serif;
color: var(--txt, #f4f4f6);
box-shadow: 0 8px 28px rgba(0,0,0,0.25);
}
.detail-card .dc-head {
display: flex; align-items: flex-start; gap: 12px;
margin-bottom: 14px;
}
.detail-card .dc-icon {
flex-shrink: 0;
width: 40px; height: 40px;
border-radius: 11px;
border: 1px solid;
display: flex; align-items: center; justify-content: center;
font: 700 18px/1 'Inter', sans-serif;
overflow: hidden;
}
.detail-card .dc-icon img {
width: 100%; height: 100%; object-fit: contain; display: block; padding: 4px;
}
.detail-card .dc-head-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.detail-card .dc-eyebrow {
font: 700 10px/1.2 'Inter', sans-serif;
text-transform: uppercase;
letter-spacing: 0.12em;
}
.detail-card .dc-title {
font: 700 17px/1.25 'Space Grotesk', 'Inter', sans-serif;
margin: 0; color: #fff;
letter-spacing: -0.005em;
}
.detail-card .dc-subtitle {
font: 500 12px/1.3 var(--mono, 'JetBrains Mono', monospace);
color: var(--txt-3, #9aa3b2);
margin-top: 2px;
}
.detail-card .dc-meta {
flex-shrink: 0;
font: 600 11px/1.2 'Inter', sans-serif;
color: var(--txt-3, #9aa3b2);
padding: 4px 9px;
border-radius: 100px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.06);
}
/* Hero · big number + delta */
.detail-card .dc-hero {
display: flex; align-items: baseline; gap: 10px;
flex-wrap: wrap;
padding: 12px 14px;
border-radius: 11px;
background: rgba(255,255,255,0.025);
border: 1px solid rgba(255,255,255,0.06);
margin-bottom: 12px;
}
.detail-card .dc-hero-v {
font: 700 24px/1.05 'Space Grotesk', 'Inter', sans-serif;
color: #fff;
letter-spacing: -0.02em;
}
.detail-card .dc-hero-delta {
font: 700 12.5px/1.2 'Inter', sans-serif;
padding: 3px 9px;
border-radius: 100px;
}
.detail-card .dc-hero-delta.dc-pos { background: rgba(74,222,128,0.14); color: #86efac; }
.detail-card .dc-hero-delta.dc-neg { background: rgba(251,113,133,0.14); color: #fda4af; }
.detail-card .dc-hero-label {
width: 100%;
font: 500 11px/1.3 'Inter', sans-serif;
color: var(--txt-3, #9aa3b2);
text-transform: uppercase;
letter-spacing: 0.06em;
}
/* Stats · grid */
.detail-card .dc-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
gap: 6px;
margin-bottom: 12px;
}
.detail-card .dc-stat {
display: flex; flex-direction: column; gap: 2px;
padding: 8px 10px;
border-radius: 9px;
background: rgba(255,255,255,0.025);
border: 1px solid rgba(255,255,255,0.06);
}
.detail-card .dc-stat-pos { border-color: rgba(74,222,128,0.20); background: rgba(74,222,128,0.04); }
.detail-card .dc-stat-neg { border-color: rgba(251,113,133,0.20); background: rgba(251,113,133,0.04); }
.detail-card .dc-stat-k {
font: 600 9.5px/1.2 'Inter', sans-serif;
color: var(--txt-3, #9aa3b2);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.detail-card .dc-stat-v {
font: 700 13.5px/1.2 'Space Grotesk', 'Inter', sans-serif;
color: var(--txt, #f4f4f6);
}
.detail-card .dc-stat-pos .dc-stat-v { color: #86efac; }
.detail-card .dc-stat-neg .dc-stat-v { color: #fda4af; }
/* Fields · k/v rows */
.detail-card .dc-fields {
display: flex; flex-direction: column; gap: 4px;
margin-bottom: 12px;
padding-top: 6px;
border-top: 1px solid rgba(255,255,255,0.05);
}
.detail-card .dc-field {
display: grid;
grid-template-columns: 100px 1fr;
gap: 10px;
align-items: baseline;
padding: 4px 0;
font: 500 12px/1.4 'Inter', sans-serif;
}
.detail-card .dc-field-k {
font-weight: 600;
color: var(--txt-3, #9aa3b2);
text-transform: uppercase;
font-size: 10px;
letter-spacing: 0.06em;
}
.detail-card .dc-field-v {
color: var(--txt, #f4f4f6);
word-break: break-word;
}
.detail-card .dc-field-v a {
color: #60a5fa;
text-decoration: none;
}
.detail-card .dc-field-v a:hover { text-decoration: underline; }
.detail-card .dc-field-sub {
grid-column: 2;
font: 500 10.5px/1.3 'Inter', sans-serif;
color: var(--txt-3, #9aa3b2);
}
/* Chips */
.detail-card .dc-chips {
display: flex; gap: 6px; flex-wrap: wrap;
margin-top: 8px;
}
.detail-card .dc-chip {
padding: 7px 12px;
border-radius: 100px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.10);
color: var(--txt, #f4f4f6);
font: 600 11.5px/1 'Inter', sans-serif;
cursor: pointer;
transition: background 0.12s ease, border-color 0.12s ease;
}
.detail-card .dc-chip:hover {
background: rgba(255,255,255,0.08);
border-color: rgba(255,255,255,0.20);
}
.detail-card .dc-chip-primary {
background: linear-gradient(135deg, rgba(139,124,246,0.18), rgba(139,124,246,0.06));
border-color: rgba(139,124,246,0.40);
color: #C4B5FD;
}
.detail-card .dc-chip-primary:hover {
background: linear-gradient(135deg, rgba(139,124,246,0.28), rgba(139,124,246,0.12));
border-color: rgba(139,124,246,0.60);
}
/* Footer */
.detail-card .dc-footer {
margin-top: 10px;
padding-top: 8px;
border-top: 1px solid rgba(255,255,255,0.05);
font: 500 10.5px/1.4 'Inter', sans-serif;
color: var(--txt-3, #9aa3b2);
font-style: italic;
}
@media (max-width: 480px) {
.detail-card .dc-stats { grid-template-columns: repeat(2, 1fr); }
.detail-card .dc-field { grid-template-columns: 1fr; gap: 2px; }
.detail-card .dc-field-sub { grid-column: 1; }
}
/* ─── mascot-pfp.png renders edge-to-edge · strip clashing brand container · 2026-05-30 ── */
/* The PNG mascot has its own dark/orange/aura visual baked in · the brand-tinted
containers I built earlier for the simpler S-logo SVG now clash. Reset to transparent
+ remove inner padding so the mascot fills its slot. Keep dimensions + border-radius. */
.tk-logo.tk-logo-brand,
.send-intent-card .si-token-mascot,
.send-help-card .sh-tok-mascot,
.agent-card-avatar img,
.pf-brand-ico,
.pf-tok .pf-tok-ico .pf-brand-ico,
.detail-card .dc-icon img {
background: transparent !important;
border-color: transparent !important;
padding: 0 !important;
object-fit: cover !important;
}
/* Reset parent dc-icon when it wraps an img (the mascot) · brand-tone bg was meant for emoji */
.detail-card .dc-icon:has(img) {
background: transparent !important;
border-color: transparent !important;
}
/* ===== Edge Deep Research card · premium cited report (2026-06-07) ===== */
.research-card{position:relative;overflow:hidden;border:1px solid rgba(96,165,250,.18);border-radius:18px;background:linear-gradient(180deg,rgba(20,28,46,.92),rgba(12,16,28,.96));padding:0;}
.research-card .rs-bg{position:absolute;inset:0;pointer-events:none;z-index:0;}
.research-card .rs-orb{position:absolute;top:-70px;right:-50px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(96,165,250,.22),transparent 70%);filter:blur(8px);}
.research-card .rs-head{position:relative;z-index:1;padding:18px 20px 14px;border-bottom:1px solid rgba(255,255,255,.06);}
.research-card .rs-eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#7cc0ff;}
.research-card .rs-dot{width:7px;height:7px;border-radius:50%;background:#60a5fa;box-shadow:0 0 0 0 rgba(96,165,250,.6);animation:rs-pulse 2.2s infinite;}
@keyframes rs-pulse{0%{box-shadow:0 0 0 0 rgba(96,165,250,.5)}70%{box-shadow:0 0 0 9px rgba(96,165,250,0)}100%{box-shadow:0 0 0 0 rgba(96,165,250,0)}}
.research-card .rs-title{margin:8px 0 6px;font-size:18px;line-height:1.3;font-weight:750;color:#f1f5f9;letter-spacing:-.01em;}
.research-card .rs-meta{font-size:11.5px;color:#7c8aa3;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;}
.research-card .rs-body{position:relative;z-index:1;padding:6px 20px 4px;}
.research-card .rs-section{padding:14px 0;border-bottom:1px solid rgba(255,255,255,.05);}
.research-card .rs-section:last-child{border-bottom:0;}
.research-card .rs-sec-h{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:750;color:#cbd5e1;text-transform:uppercase;letter-spacing:.05em;margin-bottom:9px;}
.research-card .rs-sec-ic{font-size:15px;line-height:1;filter:saturate(1.1);}
.research-card .rs-sec-b{font-size:14px;line-height:1.62;color:#d6deeb;}
.research-card .rs-sec-b p{margin:0 0 9px;}
.research-card .rs-sec-b p:last-child{margin-bottom:0;}
.research-card .rs-sec-b ul,.research-card .rs-sec-b ol{margin:4px 0 4px;padding-left:6px;list-style:none;}
.research-card .rs-sec-b li{position:relative;padding-left:18px;margin:0 0 8px;}
.research-card .rs-sec-b li::before{content:"";position:absolute;left:3px;top:9px;width:5px;height:5px;border-radius:50%;background:#60a5fa;opacity:.75;}
.research-card .rs-sec-b strong{color:#eef3fb;font-weight:700;}
.research-card .rs-sec-b a{color:#7cc0ff;text-decoration:none;border-bottom:1px solid rgba(124,192,255,.3);}
.research-card .rs-sec-b a:hover{border-bottom-color:#7cc0ff;}
/* inline citation chip */
.research-card .rs-cite{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;padding:0 4px;margin:0 1px;border-radius:5px;font-size:10px;font-weight:700;line-height:1;color:#9fd0ff !important;background:rgba(96,165,250,.16);border:1px solid rgba(96,165,250,.32) !important;vertical-align:super;text-decoration:none !important;transition:background .12s,transform .12s;}
.research-card .rs-cite:hover{background:rgba(96,165,250,.34);transform:translateY(-1px);}
/* sources grid */
.research-card .rs-src-wrap{position:relative;z-index:1;padding:14px 20px 18px;border-top:1px solid rgba(255,255,255,.06);background:rgba(0,0,0,.16);}
.research-card .rs-src-label{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#6b7a93;margin-bottom:10px;}
.research-card .rs-src-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;}
.research-card .rs-src{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.06);text-decoration:none;transition:background .12s,border-color .12s,transform .12s;min-width:0;}
.research-card .rs-src:hover{background:rgba(96,165,250,.1);border-color:rgba(96,165,250,.3);transform:translateY(-1px);}
.research-card .rs-src-n{flex:none;width:18px;height:18px;display:flex;align-items:center;justify-content:center;border-radius:6px;font-size:10px;font-weight:700;color:#9fd0ff;background:rgba(96,165,250,.16);}
.research-card .rs-src-dom{flex:1;min-width:0;font-size:12px;color:#c4cee0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.research-card .rs-src-go{flex:none;color:#6b7a93;font-size:12px;}
@media(max-width:520px){.research-card .rs-title{font-size:16px;}.research-card .rs-src-grid{grid-template-columns:1fr 1fr;}}
/* ===== Edge Forge · Your launches card (2026-06-07) ===== */
.fl-card{position:relative;overflow:hidden;border:1px solid rgba(139,124,246,.18);border-radius:18px;background:linear-gradient(180deg,rgba(28,24,16,.92),rgba(14,12,10,.96));padding:0;}
.fl-card .fl-bg{position:absolute;inset:0;pointer-events:none;z-index:0;}
.fl-card .fl-orb{position:absolute;top:-70px;right:-50px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(139,124,246,.20),transparent 70%);filter:blur(8px);}
.fl-card .fl-head{position:relative;z-index:1;padding:17px 19px 13px;border-bottom:1px solid rgba(255,255,255,.06);}
.fl-card .fl-eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fbbf24;}
.fl-card .fl-live{width:7px;height:7px;border-radius:50%;background:#8B7CF6;box-shadow:0 0 0 0 rgba(139,124,246,.6);animation:fl-pulse 2.2s infinite;}
@keyframes fl-pulse{0%{box-shadow:0 0 0 0 rgba(139,124,246,.5)}70%{box-shadow:0 0 0 9px rgba(139,124,246,0)}100%{box-shadow:0 0 0 0 rgba(139,124,246,0)}}
.fl-card .fl-title{margin:8px 0 5px;font-size:18px;font-weight:750;color:#f6f1e9;letter-spacing:-.01em;}
.fl-card .fl-subtitle{font-size:12px;color:#9b8e78;line-height:1.5;}
.fl-card .fl-list{position:relative;z-index:1;padding:12px 14px 16px;display:flex;flex-direction:column;gap:10px;}
.fl-card .fl-tile{border:1px solid rgba(255,255,255,.07);border-radius:13px;background:rgba(255,255,255,.025);padding:12px 13px;transition:border-color .12s,background .12s;}
.fl-card .fl-tile:hover{border-color:rgba(139,124,246,.28);background:rgba(139,124,246,.05);}
.fl-card .fl-tile-head{display:flex;align-items:center;gap:11px;}
.fl-card .fl-badge{flex:none;width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;letter-spacing:.02em;color:#0c0a08;background:linear-gradient(135deg,#fbbf24,#8B7CF6);}
.fl-card .fl-idcol{flex:1;min-width:0;}
.fl-card .fl-sym{font-size:15px;font-weight:750;color:#f6f1e9;line-height:1.2;}
.fl-card .fl-name{font-size:12px;color:#9b8e78;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.fl-card .fl-page{flex:none;width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:8px;color:#9b8e78;text-decoration:none;border:1px solid rgba(255,255,255,.08);}
.fl-card .fl-page:hover{color:#fbbf24;border-color:rgba(139,124,246,.35);}
.fl-card .fl-meta{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin:10px 0 0;font-size:11.5px;color:#8c8270;}
.fl-card .fl-addr{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:#a89b85;}
.fl-card .fl-pill{padding:2px 8px;border-radius:6px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07);color:#c4b9a4;}
.fl-card .fl-pill-alloc{background:rgba(34,197,94,.14);border-color:rgba(34,197,94,.3);color:#86efac;}
.fl-card .fl-pill-lock{background:rgba(148,163,184,.12);border-color:rgba(148,163,184,.25);color:#cbd5e1;}
.fl-card .fl-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:11px;}
.fl-card .fl-chip{display:inline-flex;align-items:center;gap:5px;padding:7px 12px;border-radius:9px;font-size:12.5px;font-weight:650;cursor:pointer;border:1px solid transparent;transition:transform .1s,filter .12s;}
.fl-card .fl-chip:hover{transform:translateY(-1px);filter:brightness(1.08);}
.fl-card .fl-chip-fee{background:linear-gradient(135deg,#fbbf24,#8B7CF6);color:#0c0a08;}
.fl-card .fl-chip-alloc{background:rgba(34,197,94,.16);border-color:rgba(34,197,94,.34);color:#86efac;}
.fl-card .fl-none{font-size:11.5px;color:#7a715f;font-style:italic;}
.fl-card .fl-empty{padding:14px;color:#8c8270;text-align:center;}
/* ═══════════════════════════════════════════════════════════════════════
EDGE · REDESIGN LAYER · 2026-06-09 · "same brand, much cleaner" (bold pass)
Additive override appended last (wins by source order). Exact brand orange
#8B7CF6 + Base blue. Keeps fixed layout math (--top-h 56 / --composer-h 122).
Paint props only. Revert = delete from this banner to EOF.
═══════════════════════════════════════════════════════════════════════ */
/* ---- canvas · clearly calmer + a visible cool wash -------------------- */
#particles { opacity: .16 !important; }
.ambient-orbs .orb { filter: blur(120px); }
.ambient-orbs .orb-1 { background: radial-gradient(circle, rgba(139,124,246,.45), transparent 64%); opacity: .22; }
.ambient-orbs .orb-2 { background: radial-gradient(circle, rgba(0,82,255,.52), transparent 64%); opacity: .28; }
.ambient-orbs .orb-3 { background: radial-gradient(circle, rgba(0,82,255,.30), transparent 70%); opacity: .14; }
body {
background:
radial-gradient(1200px 780px at 82% -10%, rgba(0,82,255,.13), transparent 58%),
radial-gradient(940px 640px at 2% -6%, rgba(139,124,246,.09), transparent 54%),
#08080b;
}
/* ---- topbar · clearly glassy, brighter brand seam --------------------- */
.topbar {
padding: 0 20px;
background: rgba(8,8,11,.52);
backdrop-filter: blur(24px) saturate(165%);
-webkit-backdrop-filter: blur(24px) saturate(165%);
border-bottom: 1px solid rgba(255,255,255,.07);
}
.topbar::after { height: 2px; opacity: 1; }
.brand-glyph { border-radius: 12px; box-shadow: 0 8px 22px rgba(139,124,246,.40), 0 0 0 1px rgba(255,255,255,.10); }
.brand-name { font-size: 18px; letter-spacing: -.01em; }
/* ---- controls · visible glass ---------------------------------------- */
.iconbtn { width: 38px; height: 38px; border-radius: 12px; }
.iconbtn:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14); }
.wallet-pill, .status-pill {
background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.025));
border: 1px solid rgba(255,255,255,.15);
border-radius: 999px;
}
.wallet-pill { padding: 8px 16px; }
.wallet-pill:hover { color: var(--txt-1); border-color: var(--accent); box-shadow: 0 0 0 4px rgba(139,124,246,.16); }
/* ---- chat · airier, clearly glassy bubbles --------------------------- */
.chat-surface { padding: 30px 16px 8px; }
.chat-thread { max-width: 740px; gap: 22px; }
.msg-avatar { border-radius: 12px; box-shadow: 0 6px 16px rgba(139,124,246,.40), 0 0 0 1px rgba(255,255,255,.08); }
.msg-bubble { padding: 13px 17px; border-radius: 18px; font-size: 14.5px; line-height: 1.6; }
.msg-agent .msg-bubble {
background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.028));
border: 1px solid rgba(255,255,255,.12);
border-top-left-radius: 6px;
box-shadow: 0 4px 18px rgba(0,0,0,.32);
}
.msg-user .msg-bubble {
background: linear-gradient(180deg, rgba(139,124,246,.26), rgba(139,124,246,.15));
border: 1px solid rgba(139,124,246,.46);
border-top-right-radius: 6px;
box-shadow: 0 6px 20px rgba(139,124,246,.18);
}
.msg-bubble code { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.12); }
.msg-bubble pre { background: rgba(0,0,0,.34); border-color: rgba(255,255,255,.10); border-radius: 12px; }
/* ---- COMPOSER · the unmistakable hero: rounded glowing glass pill ----- */
.composer { padding: 13px 16px 14px; background: linear-gradient(180deg, transparent, rgba(8,8,11,.97) 24%); }
.composer-inner {
max-width: 740px;
background: linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.03));
border: 1px solid rgba(255,255,255,.17);
border-radius: 24px;
padding: 9px 9px 9px 16px;
box-shadow: 0 16px 42px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.07);
}
.composer-inner:focus-within {
border-color: var(--accent);
box-shadow: 0 0 0 4px rgba(139,124,246,.20), 0 18px 46px rgba(0,0,0,.52);
}
.composer-send {
flex: 0 0 42px; height: 42px; border-radius: 14px;
background: linear-gradient(135deg, #ffb066, var(--accent));
box-shadow: 0 8px 22px rgba(139,124,246,.50);
}
.composer-send:hover { filter: brightness(1.07); }
.composer-foot { max-width: 740px; }
.composer-palette { border-radius: 18px; border: 1px solid rgba(255,255,255,.14); box-shadow: 0 22px 60px rgba(0,0,0,.66); }
/* ---- buttons · bold gradient primary --------------------------------- */
.btn { border-radius: 12px; }
.btn:hover { background: rgba(255,255,255,.06); }
.btn-primary {
background: linear-gradient(135deg, #ffb066, var(--accent));
border-color: transparent; color: #1a0d00;
box-shadow: 0 8px 22px rgba(139,124,246,.40);
}
.btn-primary:hover { filter: brightness(1.07); transform: translateY(-1px); color: #1a0d00; border-color: transparent; }
.btn-ghost { background: transparent; }
.btn-ghost:hover { background: rgba(255,255,255,.06); }
/* ---- cards / modals / drawer · unified glass ------------------------- */
.card, .as-card, .agent-card { border-radius: 18px; }
.modal {
background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
border: 1px solid rgba(255,255,255,.10);
border-radius: 20px;
box-shadow: 0 26px 72px rgba(0,0,0,.62);
}
.input, .select, textarea.input {
border-radius: 12px;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.12);
}
.input:focus, .select:focus, textarea.input:focus {
border-color: var(--accent);
box-shadow: 0 0 0 4px rgba(139,124,246,.16);
}
.drawer {
background: linear-gradient(180deg, rgba(20,20,26,.98), rgba(11,11,16,.98));
border-left: 1px solid rgba(255,255,255,.10);
border-radius: 20px 0 0 20px;
box-shadow: -26px 0 64px rgba(0,0,0,.55);
}
.drawer-tab.is-active { color: var(--accent); }
/* ---- command result-cards · unified premium glass frame (lifts discover,
detail, history, research, alpha, send, fl cards at once) ----------- */
.result-card {
border-radius: 18px;
border: 1px solid rgba(255,255,255,.10);
background: linear-gradient(180deg, rgba(22,22,28,.94), rgba(13,13,18,.96));
box-shadow: 0 16px 44px rgba(0,0,0,.42);
}
.result-card .rc-head {
background: linear-gradient(90deg, rgba(0,82,255,.09) 0%, transparent 42%, transparent 58%, rgba(139,124,246,.09) 100%);
}
/* ---- /discover · kill the green, theme Base-blue + a warm counter-orb -- */
.discover-card .dx-orb-1 {
background: radial-gradient(circle, rgba(0,82,255,.58), transparent 66%);
opacity: .34;
}
.discover-card .dx-bg::after { /* second orb · brand orange, bottom-left */
content: ''; position: absolute; width: 210px; height: 210px; border-radius: 50%;
bottom: -90px; left: -50px; filter: blur(70px); opacity: .16;
background: radial-gradient(circle, rgba(139,124,246,.55), transparent 66%);
}
.discover-card .dx-eyebrow { color: #5b9bff; }
.discover-card .dx-live-dot { background: #3b82f6; box-shadow: 0 0 8px rgba(59,130,246,.85); }
.discover-card .dx-tile {
border-radius: 14px;
background: rgba(255,255,255,.045);
border: 1px solid rgba(255,255,255,.09);
}
.discover-card .dx-tile:hover {
background: rgba(255,255,255,.075);
border-color: rgba(0,82,255,.45);
box-shadow: 0 6px 20px rgba(0,82,255,.15);
transform: translateY(-1px);
}
/* ---- 0xWork task cards · "Open" status off-brand green -> Base blue ---- */
.ox-status.ox-open {
color: #7db0ff;
border-color: rgba(0,82,255,.34);
background: rgba(0,82,255,.08);
}
/* ---- notices / toasts (incl. live 0xWork task alert) · premium glass --- */
.notice {
border-radius: 16px;
border: 1px solid rgba(255,255,255,.12);
background: linear-gradient(180deg, rgba(24,24,30,.98), rgba(13,13,18,.98));
box-shadow: 0 14px 38px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05);
}
.notice::before { width: 3px; }
.notice-task-live { border-radius: 16px; }
.notice .action-chip {
border-radius: 10px;
border: 1px solid rgba(255,255,255,.14);
background: rgba(255,255,255,.04);
}
.notice .action-chip.is-primary {
background: linear-gradient(135deg, #ffb066, var(--accent));
border-color: transparent; color: #1a0d00; font-weight: 700;
}
/* ---- /task premium card · Attempting / Submitted / Applied stats strip - */
.tdc-card .tdc-stats { display: flex; gap: 8px; margin: 4px 0 14px; flex-wrap: wrap; }
.tdc-card .tdc-stat {
flex: 1 1 0; min-width: 88px;
display: flex; flex-direction: column; gap: 4px; align-items: flex-start;
padding: 11px 14px; border-radius: 14px;
background: linear-gradient(180deg, rgba(0,82,255,.11), rgba(0,82,255,.035));
border: 1px solid rgba(0,82,255,.22);
}
.tdc-card .tdc-stat-v {
font: 800 21px/1 'Space Grotesk','Inter',sans-serif; color: #fff;
letter-spacing: -.01em; font-feature-settings: "tnum";
}
.tdc-card .tdc-stat-k {
font: 700 10px/1 'Inter',sans-serif; color: #7db0ff;
text-transform: uppercase; letter-spacing: .11em;
}
/* ---- /whoami agent profile card · premium polish --------------------- */
.agent-card {
border-radius: 20px;
border: 1px solid rgba(255,255,255,.11);
box-shadow: 0 18px 48px rgba(0,0,0,.44), inset 0 1px 0 rgba(255,255,255,.06);
}
.agent-card-bg { opacity: .45; }
.agent-stat {
border-radius: 14px;
background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
border: 1px solid rgba(255,255,255,.09);
}
.agent-stat:hover { background: rgba(255,255,255,.07); border-color: rgba(0,82,255,.32); }
.agent-action {
border-radius: 14px;
background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018));
border: 1px solid rgba(255,255,255,.09);
}
.agent-action:hover { border-color: rgba(139,124,246,.42); background: rgba(255,255,255,.06); }
.agent-action.is-primary {
background: linear-gradient(135deg, rgba(139,124,246,.17), rgba(139,124,246,.06));
border-color: rgba(139,124,246,.42);
}
.agent-action-icon { border-radius: 11px; }
.agent-card-id { border-radius: 999px; }
/* ---- buy / swap (send-intent) card · premium polish ------------------ */
.send-intent-card .si-orb { opacity: .30; filter: blur(64px); }
.send-intent-card .si-amount-v { letter-spacing: -.01em; }
/* ---- unified premium radius across remaining card roots -------------- */
.portfolio-card, .edge-stats-card, .es-card, .account-card, .acct-card,
.marketplace-card, .bridge-history-card, .token-card, .my-bots-card,
.oxwork-stats-card, .pf-card { border-radius: 18px; }
/* ---- detail-card (buy SMART preview, quotes, etc.) · bespoke premium look
blue+orange ambient orbs + glowing hero + glass stats, matching the
/discover & /task treatment. CSS-only; lifts every detail_card. -------- */
.detail-card { overflow: hidden; }
.detail-card::before { /* Base-blue orb, top-right */
content: ''; position: absolute; top: -80px; right: -60px;
width: 220px; height: 220px; border-radius: 50%;
filter: blur(72px); opacity: .18; pointer-events: none;
background: radial-gradient(circle, rgba(0,82,255,.55), transparent 66%);
}
.detail-card::after { /* brand-orange counter-orb, bottom-left */
content: ''; position: absolute; bottom: -90px; left: -55px;
width: 200px; height: 200px; border-radius: 50%;
filter: blur(72px); opacity: .14; pointer-events: none;
background: radial-gradient(circle, rgba(139,124,246,.5), transparent 66%);
}
.detail-card > * { position: relative; z-index: 1; }
.detail-card .dc-icon { border-radius: 13px; }
.detail-card .dc-hero {
padding: 14px 16px; border-radius: 15px;
background: linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.02));
border: 1px solid rgba(255,255,255,.11);
box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.detail-card .dc-hero-v { font-size: 30px; letter-spacing: -.02em; }
.detail-card .dc-stat,
.detail-card .dc-field {
border-radius: 12px;
background: rgba(255,255,255,.04);
border-color: rgba(255,255,255,.09);
}
.detail-card .dc-chip-primary {
background: linear-gradient(135deg, #ffb066, var(--accent));
border-color: transparent; color: #1a0d00; font-weight: 700;
}
/* ═══════════════════════════════════════════════════════════════════════
EDGE · REDESIGN LAYER · 2026-06-10 · welcome + drawer + settings + status
Additive, paint-only (same brand, same layout math). Continues the
2026-06-09 layer above. Revert = delete this 2026-06-10 block to EOF.
═══════════════════════════════════════════════════════════════════════ */
/* ---- login modal · hide redundant static dim subtitle (JS sets .cm-hero p) */
#connect-modal .cm-hero p.dim { display: none; }
/* ---- WELCOME / first-load · premium animated hero + suggestion grid ---- */
.welcome { padding: 7vh 16px 26px; }
.welcome .hero-glyph {
border-radius: 22px;
box-shadow: 0 18px 46px rgba(0,82,255,.34), 0 8px 24px rgba(139,124,246,.26), 0 0 0 1px rgba(255,255,255,.10);
animation: edgeHeroFloat 6s ease-in-out infinite;
}
@keyframes edgeHeroFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.welcome h1 {
font-size: 30px; letter-spacing: -.02em; line-height: 1.12;
background: linear-gradient(180deg, #ffffff, #c4c4d0);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
}
.welcome .lead { max-width: 600px; font-size: 14.5px; line-height: 1.62; color: var(--txt-2); }
.welcome .lead b { color: var(--txt-1); }
.welcome-tagline {
border-radius: 999px;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.10);
padding: 6px 14px;
}
.welcome-share {
border-radius: 999px;
background: rgba(255,255,255,.05);
border: 1px solid rgba(255,255,255,.12);
}
.welcome-share:hover { border-color: var(--accent); color: var(--accent); }
.suggest-grid { max-width: 740px; gap: 10px; }
.suggest {
border-radius: 16px;
background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
border: 1px solid rgba(255,255,255,.10);
padding: 15px 16px;
transition: transform .14s, border-color .15s, background .15s, box-shadow .15s;
}
.suggest:hover {
transform: translateY(-2px);
border-color: rgba(139,124,246,.45);
background: rgba(255,255,255,.06);
box-shadow: 0 12px 30px rgba(139,124,246,.12);
}
.suggest.base:hover {
border-color: rgba(0,82,255,.5);
box-shadow: 0 12px 30px rgba(0,82,255,.16);
}
.suggest .s-cmd { color: var(--accent); font-family: var(--mono); font-size: 11.5px; font-weight: 600; }
.suggest.base .s-cmd { color: #5b9bff; }
.suggest .s-title { font-weight: 700; letter-spacing: -.01em; }
.suggest .s-sub { color: var(--txt-3); }
/* ---- INBOX DRAWER · glass head + pill tabs ---------------------------- */
.drawer-head { padding: 16px 18px; border-bottom: 1px solid rgba(255,255,255,.08); }
.drawer-head h3 { font-family: var(--space); font-size: 16px; font-weight: 700; }
.drawer-tabs { gap: 6px; padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,.06); }
.drawer-tab {
border-radius: 999px;
padding: 6px 13px;
font-size: 12px; font-weight: 600;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.08);
color: var(--txt-3);
}
.drawer-tab:hover { color: var(--txt-1); border-color: rgba(255,255,255,.16); }
.drawer-tab.is-active {
color: #1a0d00;
background: linear-gradient(135deg, #ffb066, var(--accent));
border-color: transparent;
}
.drawer-body { padding: 14px 16px; }
/* ---- SETTINGS sheet · unified glass ----------------------------------- */
.settings-modal {
border-radius: 20px;
background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
border: 1px solid rgba(255,255,255,.10);
box-shadow: 0 26px 72px rgba(0,0,0,.62);
}
.settings-head { padding: 18px 20px 14px; border-bottom: 1px solid rgba(255,255,255,.08); }
.settings-section { border-radius: 16px; background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.07); }
.settings-section-h { color: var(--txt-3); text-transform: uppercase; letter-spacing: .09em; font-size: 11px; }
.settings-row-lbl { font-weight: 600; }
.settings-row-sub { color: var(--txt-3); font-size: 12px; }
.settings-seg { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.10); border-radius: 12px; }
.settings-seg-btn.is-active { background: linear-gradient(135deg, #ffb066, var(--accent)); color: #1a0d00; border-radius: 9px; }
.settings-btn { border-radius: 12px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); }
.settings-btn:hover { border-color: var(--accent); }
.settings-btn-danger:hover { border-color: var(--neg); color: var(--neg); }
.settings-close { border-radius: 10px; }
/* ---- STATUS dropdown · glass panel + rows ----------------------------- */
.status-dropdown {
border-radius: 16px;
background: linear-gradient(180deg, rgba(24,24,30,.98), rgba(13,13,18,.98));
border: 1px solid rgba(255,255,255,.11);
box-shadow: 0 18px 48px rgba(0,0,0,.55);
}
.status-dropdown-head { padding: 13px 15px; border-bottom: 1px solid rgba(255,255,255,.07); }
.status-dropdown-title { font-family: var(--space); font-weight: 700; }
.status-row { border-radius: 10px; }
.status-row:hover { background: rgba(255,255,255,.04); }
.status-dropdown-foot { border-top: 1px solid rgba(255,255,255,.07); color: var(--txt-3); }
/* ---- responsive · keep mobile tight ----------------------------------- */
@media (max-width: 560px) {
.welcome { padding: 5vh 12px 22px; }
.welcome h1 { font-size: 25px; }
.suggest-grid { gap: 8px; }
.suggest { padding: 13px 14px; }
}
/* ---- slash command palette · premium rows (container styled above) ----- */
.composer-palette { padding: 6px; }
.pal-item {
display: flex; align-items: center; gap: 10px;
padding: 9px 12px; border-radius: 12px;
cursor: pointer; transition: background .12s;
}
.pal-item:hover { background: rgba(255,255,255,.05); }
.pal-item.is-active { background: linear-gradient(90deg, rgba(139,124,246,.16), rgba(139,124,246,.05)); }
.pal-cmd { font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--accent); flex: none; }
.pal-desc { color: var(--txt-3); font-size: 12.5px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pal-tier {
flex: none; font: 700 9.5px var(--inter); text-transform: uppercase; letter-spacing: .05em;
color: #5b9bff; background: rgba(0,82,255,.12); border: 1px solid rgba(0,82,255,.3);
border-radius: 999px; padding: 2px 8px;
}
/* ---- wizard forms · forge inputs + bridge quote/route cards (containers
already use the redesigned .modal/.result-card/.input/.btn frame) ----- */
.fa-input, .fa-num { border-radius: 12px; transition: border-color .15s, box-shadow .15s; }
.fa-input:focus, .fa-num:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(139,124,246,.16); }
.br-quote, .br-route {
border-radius: 14px;
background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.018));
border: 1px solid rgba(255,255,255,.10);
}
.br-pick { border-radius: 12px; }
/* ═══════════════════════════════════════════════════════════════════════
EDGE · WIZARD REDESIGN · 2026-06-10b · shared wz chrome + Forge deep pass
Lifts EVERY wizard (forge/bridge/service/swap/register/claim/submit) via
the shared .wz-* scaffolding, plus a full Forge .fa-* pass. Paint-only.
═══════════════════════════════════════════════════════════════════════ */
@keyframes faSpin { to { transform: rotate(360deg); } }
/* shared wizard chrome */
.wz-modal { max-width: 480px; }
.wz-modal .modal-head { padding: 20px 22px 8px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.wz-modal .modal-head .eyebrow { font: 700 10.5px/1 var(--inter); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.wz-modal .modal-head h3 { font-family: var(--space); font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.wz-progress { display: flex; align-items: center; gap: 8px; padding: 4px 22px 16px; }
.wz-progress .wz-bar { flex: 1; height: 5px; border-radius: 3px; background: var(--bg-3); overflow: hidden; }
.wz-progress .wz-bar-fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); box-shadow: 0 0 10px rgba(139,124,246,.4); transition: width .35s ease; }
.wz-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--bg-4); flex: none; transition: background .25s, box-shadow .25s; }
.wz-dot.is-active, .wz-dot.active, .wz-dot.done { background: var(--accent); }
.wz-dot.is-active, .wz-dot.active { box-shadow: 0 0 0 3px var(--accent-soft); }
.wz-footer { display: flex; align-items: center; gap: 12px; padding: 14px 22px 20px; border-top: 1px solid var(--line-1); }
.wz-footer .dim { flex: 1; text-align: center; }
.wz-modal .modal-body { padding: 6px 22px; max-height: 64vh; overflow: auto; }
/* Forge form */
.fa-form { display: flex; flex-direction: column; gap: 16px; }
.fa-row { display: flex; flex-direction: column; gap: 7px; }
.fa-lbl { font-size: 13px; font-weight: 600; color: var(--txt-2); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fa-val { font-family: var(--space); font-weight: 700; color: var(--accent); }
.fa-input, .fa-num { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12); color: var(--txt-1); border-radius: 12px; padding: 11px 13px; font: 14px var(--inter); }
.fa-slide-row { display: flex; align-items: center; gap: 10px; }
.fa-slide { flex: 1; accent-color: var(--accent); }
.fa-num { width: 92px; flex: none; text-align: center; }
.fa-hint { font-size: 11.5px; color: var(--txt-3); line-height: 1.4; }
.fa-split { background: rgba(255,255,255,.025); border: 1px solid var(--line-1); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 11px; }
.fa-split-bar { display: flex; height: 12px; border-radius: 7px; overflow: hidden; background: var(--bg-3); }
.fa-seg-c { background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.fa-seg-i { background: var(--base); }
.fa-seg-d { background: var(--bg-4); }
.fa-legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 11.5px; color: var(--txt-3); }
.fa-legend b { color: var(--txt-1); }
.fa-legend .sw { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.fa-legend .sw-c { background: var(--accent); }
.fa-legend .sw-i { background: var(--base); }
.fa-legend .sw-d { background: var(--bg-4); }
.fa-alloc { background: rgba(0,82,255,.05); border: 1px solid rgba(0,82,255,.18); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.fa-alloc-row { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; color: var(--txt-2); }
.fa-alloc-row b { color: var(--txt-1); }
.fa-note { font-size: 12px; line-height: 1.55; color: var(--txt-3); background: rgba(255,255,255,.025); border: 1px solid var(--line-1); border-radius: 12px; padding: 12px 14px; }
.fa-note.info { color: var(--txt-2); border-color: rgba(139,124,246,.22); background: rgba(139,124,246,.05); }
.fa-preview { display: flex; flex-direction: column; }
.fa-pv-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line-1); font-size: 13px; }
.fa-pv-row .k { color: var(--txt-3); flex: none; }
.fa-pv-row .v { color: var(--txt-1); text-align: right; font-weight: 600; }
.fa-bene-table { margin-top: 10px; border: 1px solid var(--line-1); border-radius: 12px; overflow: hidden; }
.fa-bene-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-bottom: 1px solid var(--line-1); }
.fa-bene-row:last-child { border-bottom: none; }
.fa-bene-row.you { background: rgba(139,124,246,.06); }
.fa-bene-label { font-size: 12px; font-weight: 600; color: var(--txt-2); }
.fa-bene-addr { font-size: 11px; color: var(--txt-3); }
.fa-bene-share { font-family: var(--space); font-weight: 700; color: var(--accent); }
.fa-loading { display: flex; align-items: center; gap: 10px; padding: 26px 4px; color: var(--txt-3); font-size: 13px; justify-content: center; }
.fa-spinner { width: 16px; height: 16px; border: 2px solid var(--line-2); border-top-color: var(--accent); border-radius: 50%; animation: faSpin .7s linear infinite; flex: none; display: inline-block; }
.fa-err { padding: 14px; border-radius: 12px; background: rgba(251,113,133,.08); border: 1px solid rgba(251,113,133,.28); color: #fda4af; font-size: 13px; }
.fa-sign-status { margin-top: 12px; font-size: 13px; color: var(--txt-2); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fa-success { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 0; }
.fa-success-icon { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-size: 26px; color: #04140a; background: linear-gradient(135deg, var(--pos), #22c55e); box-shadow: 0 8px 24px rgba(74,222,128,.4); margin-bottom: 4px; }
.fa-success-title { font-family: var(--space); font-size: 19px; font-weight: 700; }
.fa-success-sub { font-size: 13px; color: var(--txt-2); margin-bottom: 8px; }
.fa-success .fa-pv-row { width: 100%; }
.fa-success-claims { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 12px; width: 100%; }
.fa-success-claims .btn { flex: 1; min-width: 140px; justify-content: center; }
.fa-success-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 10px; }
.fa-claim-result { margin-top: 10px; font-size: 12.5px; }
/* ═══════════════════════════════════════════════════════════════════════
EDGE · ALL-CARDS POLISH · 2026-06-10c · premium uplift to the shared
.rc-* row system · lifts every generic command card at once (/active,
/mytasks, /pools, /earn, /price, /holders, /fees, /dex, /signals …).
Paint-only · bespoke .rc- rules still win where they exist.
═══════════════════════════════════════════════════════════════════════ */
.result-card .rc-head { align-items: center; }
.result-card .rc-title { font-size: 11.5px; letter-spacing: .07em; }
.result-card .rc-meta {
font-size: 10.5px; font-weight: 600; color: var(--base-2);
background: rgba(0,82,255,.08); border: 1px solid rgba(0,82,255,.22);
border-radius: 999px; padding: 3px 9px;
}
.result-card .rc-row { transition: background .14s ease; }
.result-card .rc-row:hover { background: rgba(255,255,255,.028); }
.result-card .rc-icon {
border-radius: 10px;
background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
border: 1px solid var(--line-1);
}
.result-card .rc-v { font-family: var(--space); letter-spacing: -.01em; }
.result-card .rc-sub { color: var(--txt-3); }
.result-card .rc-footer { color: var(--txt-3); border-top: 1px solid var(--line-1); }
.result-card .rc-empty { color: var(--txt-3); }
/* accent rows · subtle left-fading tint (keeps the base value-colour) */
.result-card .rc-row.is-pos { background: linear-gradient(90deg, rgba(74,222,128,.06), transparent 58%); }
.result-card .rc-row.is-warn { background: linear-gradient(90deg, rgba(251,191,36,.06), transparent 58%); }
.result-card .rc-row.is-neg { background: linear-gradient(90deg, rgba(251,113,133,.06), transparent 58%); }
.result-card .rc-row.is-pos:hover { background: linear-gradient(90deg, rgba(74,222,128,.10), rgba(255,255,255,.02) 60%); }
.result-card .rc-row.is-warn:hover { background: linear-gradient(90deg, rgba(251,191,36,.10), rgba(255,255,255,.02) 60%); }
.result-card .rc-row.is-neg:hover { background: linear-gradient(90deg, rgba(251,113,133,.10), rgba(255,255,255,.02) 60%); }
.result-card .rc-row.is-pos .rc-icon { border-color: rgba(74,222,128,.3); }
.result-card .rc-row.is-warn .rc-icon { border-color: rgba(251,191,36,.3); }
.result-card .rc-row.is-neg .rc-icon { border-color: rgba(251,113,133,.3); }
/* ═══════════════════════════════════════════════════════════════════════
EDGE · 0xWork CARDS · 2026-06-10d · premium themed task + earnings cards
/active (.rc-oxwork_active), /mytasks (.rc-mytasks), /earnings
(.rc-oxwork_earnings) + /discover attempted-tile markers. Paint-only.
═══════════════════════════════════════════════════════════════════════ */
.result-card.rc-oxwork_active,
.result-card.rc-mytasks,
.result-card.rc-oxwork_earnings { position: relative; overflow: hidden; }
.result-card.rc-oxwork_active::after,
.result-card.rc-mytasks::after,
.result-card.rc-oxwork_earnings::after {
content: ''; position: absolute; top: -78px; right: -54px; width: 200px; height: 200px;
border-radius: 50%; filter: blur(72px); opacity: .16; pointer-events: none; z-index: 0;
background: radial-gradient(circle, rgba(0,82,255,.55), transparent 66%);
}
.result-card.rc-oxwork_earnings::after { background: radial-gradient(circle, rgba(74,222,128,.55), transparent 66%); opacity: .2; }
.result-card.rc-oxwork_active > *,
.result-card.rc-mytasks > *,
.result-card.rc-oxwork_earnings > * { position: relative; z-index: 1; }
/* premium themed header band */
.result-card.rc-oxwork_active .rc-head,
.result-card.rc-mytasks .rc-head,
.result-card.rc-oxwork_earnings .rc-head {
padding: 14px 16px;
background: linear-gradient(90deg, rgba(0,82,255,.10), transparent 62%);
border-bottom: 1px solid var(--line-1);
}
.result-card.rc-oxwork_earnings .rc-head { background: linear-gradient(90deg, rgba(74,222,128,.10), transparent 62%); }
.result-card.rc-oxwork_active .rc-title,
.result-card.rc-mytasks .rc-title,
.result-card.rc-oxwork_earnings .rc-title { font-size: 13px; text-transform: none; letter-spacing: -.01em; color: var(--txt-1); }
/* meta as a prominent stat pill */
.result-card.rc-oxwork_active .rc-meta,
.result-card.rc-mytasks .rc-meta { color: var(--base-2); background: rgba(0,82,255,.10); border-color: rgba(0,82,255,.26); font-size: 11px; padding: 4px 10px; }
.result-card.rc-oxwork_earnings .rc-meta { color: var(--pos); background: rgba(74,222,128,.10); border-color: rgba(74,222,128,.3); font-weight: 700; font-size: 12px; padding: 4px 11px; }
/* rows · task-id mono, themed value */
.result-card.rc-oxwork_active .rc-k,
.result-card.rc-mytasks .rc-k,
.result-card.rc-oxwork_earnings .rc-k { font-family: var(--mono); font-weight: 700; color: var(--txt-2); }
.result-card.rc-oxwork_earnings .rc-v { color: var(--pos); font-family: var(--space); }
.result-card.rc-oxwork_active .rc-body,
.result-card.rc-mytasks .rc-body,
.result-card.rc-oxwork_earnings .rc-body { padding: 6px 10px 8px; }
.result-card.rc-oxwork_active .rc-footer,
.result-card.rc-mytasks .rc-footer,
.result-card.rc-oxwork_earnings .rc-footer { background: rgba(255,255,255,.02); }
/* /discover · mark tiles I've already attempted (orange) / submitted (green) */
.discover-card .dx-tile.dx-mine { border-color: rgba(139,124,246,.5); box-shadow: inset 0 0 0 1px rgba(139,124,246,.16); }
.discover-card .dx-tile.dx-mine-submitted { border-color: rgba(74,222,128,.5); box-shadow: inset 0 0 0 1px rgba(74,222,128,.16); }
.discover-card .dx-tile.dx-mine .dx-tile-meta { color: var(--accent); font-weight: 600; }
.discover-card .dx-tile.dx-mine-submitted .dx-tile-meta { color: var(--pos); }
/* ---- /task tdc-card · "submitted" done-state chip (2026-06-10e) -------- */
.tdc-card .tdc-cta-done {
display: inline-flex; align-items: center; gap: 6px;
padding: 10px 15px; border-radius: 12px;
font: 700 13px var(--inter); letter-spacing: -.01em;
color: var(--pos); background: rgba(74,222,128,.10);
border: 1px solid rgba(74,222,128,.3); cursor: default;
}
/* ═══════════════════════════════════════════════════════════════════════
EDGE · PREMIUM CARD ORBS · 2026-06-10f · ambient orb + lift for the
bespoke content cards (portfolio / token / my-bots / bridge-history /
marketplace / research / stats / history / account / forge-launches)
plus the /pools theme. Paint-only · revert = delete this block.
═══════════════════════════════════════════════════════════════════════ */
.result-card.portfolio-card, .result-card.pf-card, .result-card.token-card,
.result-card.my-bots-card, .result-card.bridge-history-card, .result-card.marketplace-card,
.result-card.research-card, .result-card.edge-stats-card, .result-card.es-card,
.result-card.oxwork-stats-card, .result-card.history-card, .result-card.account-card,
.result-card.acct-card, .result-card.fl-card, .result-card.rc-pools {
position: relative; overflow: hidden;
}
.result-card.portfolio-card::after, .result-card.pf-card::after, .result-card.token-card::after,
.result-card.my-bots-card::after, .result-card.bridge-history-card::after, .result-card.marketplace-card::after,
.result-card.research-card::after, .result-card.edge-stats-card::after, .result-card.es-card::after,
.result-card.oxwork-stats-card::after, .result-card.history-card::after, .result-card.account-card::after,
.result-card.acct-card::after, .result-card.fl-card::after, .result-card.rc-pools::after {
content: ''; position: absolute; top: -80px; right: -56px; width: 200px; height: 200px;
border-radius: 50%; filter: blur(74px); opacity: .14; pointer-events: none; z-index: 0;
background: radial-gradient(circle, rgba(0,82,255,.5), transparent 66%);
}
/* green/yield orb for money + stats cards */
.result-card.portfolio-card::after, .result-card.pf-card::after, .result-card.es-card::after,
.result-card.edge-stats-card::after, .result-card.oxwork-stats-card::after, .result-card.rc-pools::after {
background: radial-gradient(circle, rgba(74,222,128,.5), transparent 66%); opacity: .16;
}
/* lift card content above the orb */
.result-card.portfolio-card > *, .result-card.pf-card > *, .result-card.token-card > *,
.result-card.my-bots-card > *, .result-card.bridge-history-card > *, .result-card.marketplace-card > *,
.result-card.research-card > *, .result-card.edge-stats-card > *, .result-card.es-card > *,
.result-card.oxwork-stats-card > *, .result-card.history-card > *, .result-card.account-card > *,
.result-card.acct-card > *, .result-card.fl-card > *, .result-card.rc-pools > * {
position: relative; z-index: 1;
}
/* /pools · themed header band + green meta pill */
.result-card.rc-pools .rc-head { padding: 14px 16px; background: linear-gradient(90deg, rgba(74,222,128,.10), transparent 62%); border-bottom: 1px solid var(--line-1); }
.result-card.rc-pools .rc-title { text-transform: none; font-size: 13px; color: var(--txt-1); letter-spacing: -.01em; }
.result-card.rc-pools .rc-meta { color: var(--pos); background: rgba(74,222,128,.10); border-color: rgba(74,222,128,.28); }
/* subtle premium hover on every card */
.result-card { transition: border-color .2s ease, box-shadow .2s ease; }
.result-card:hover { border-color: rgba(255,255,255,.14); }
/* ---- transactional cards · orb (send-help / migrate-soon) (2026-06-10g) -- */
.result-card.send-help-card, .migrate-soon-card { position: relative; overflow: hidden; }
.result-card.send-help-card::after, .migrate-soon-card::after {
content: ''; position: absolute; top: -80px; right: -56px; width: 200px; height: 200px;
border-radius: 50%; filter: blur(74px); opacity: .14; pointer-events: none; z-index: 0;
background: radial-gradient(circle, rgba(139,124,246,.5), transparent 66%);
}
.result-card.send-help-card > *, .migrate-soon-card > * { position: relative; z-index: 1; }
/* ===== Token risk scan card · scam_scan (v1-244, 2026-06-11) ===== */
.scam-scan-card{position:relative;overflow:hidden}
.scam-scan-card .sc-head{display:flex;align-items:center;gap:16px;padding:2px 0 14px;border-bottom:1px solid var(--border,#262d36);margin-bottom:10px}
.sc-ring-wrap{position:relative;width:76px;height:76px;flex:0 0 76px}
.sc-ring{width:76px;height:76px;display:block}
.sc-ring-c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
.sc-score{font-size:24px;font-weight:800;letter-spacing:-1px}
.sc-score-lbl{font-size:10px;color:var(--text-mute,#6b7682);margin-top:1px}
.sc-head-txt{flex:1;min-width:0}
.sc-eyebrow{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--text-mute,#6b7682)}
.sc-dot{width:8px;height:8px;border-radius:50%;flex:0 0 8px}
.sc-verdict{font-size:21px;font-weight:800;letter-spacing:-.3px;margin-top:3px}
.sc-addr{font-size:12.5px;color:var(--text-dim,#9aa6b2);margin-top:2px}
.sc-mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.sc-facts{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 8px}
.sc-fact{font-size:11.5px;font-weight:600;color:var(--text-dim,#9aa6b2);background:rgba(255,255,255,.04);border:1px solid var(--border,#262d36);border-radius:999px;padding:4px 10px}
.scam-scan-card .sc-sec-red .rs-sec-h{color:#f87171}
.scam-scan-card .sc-sec-green .rs-sec-h{color:#34d399}
.sc-disclaim{font-size:11px;color:var(--text-mute,#6b7682);margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.05)}
/* Quick-size pills on sell/swap detail cards (orange-primary, no off-brand green) */
.dc-sizes{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:10px 0 2px;}
.dc-sizes-lbl{font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:rgba(255,255,255,.42);margin-right:2px;}
.dc-size-pill{appearance:none;cursor:pointer;border:1px solid rgba(139,124,246,.38);background:rgba(139,124,246,.08);color:#A78BFA;font-weight:700;font-size:12px;line-height:1;padding:7px 12px;border-radius:999px;transition:background .15s ease,border-color .15s ease,transform .05s ease;}
.dc-size-pill:hover{background:rgba(139,124,246,.18);border-color:rgba(139,124,246,.62);}
.dc-size-pill:active{transform:scale(.95);}
/* ===================================================================== */
/* MINIMAL CARD PASS · 2026-06-16 · unify all chat cards to a lean, */
/* consistent aesthetic · dark glass, tight, orange-accent pills. */
/* Appended last = wins. Structure untouched · remove this block to revert.*/
/* ===================================================================== */
.card{
background:linear-gradient(165deg,rgba(255,255,255,.036),rgba(255,255,255,.009));
border:1px solid rgba(255,255,255,.07);
border-radius:14px;
box-shadow:0 6px 22px rgba(0,0,0,.2);
backdrop-filter:blur(8px);
}
.card .card-title,.card-title{font-weight:700;letter-spacing:.004em}
.card .card-meta,.card-meta{color:#8a8a96;font-size:11.5px}
.card .k{color:#8a8a96}
.card .v{color:#ececf0;font-weight:600}
/* one minimal pill language for every chip + button */
.action-chip,.followup-chip,.tk-chip{
border-radius:10px!important;
font-weight:600!important;
box-shadow:none!important;
transition:.16s ease!important;
}
.action-chip:not(.is-primary),.followup-chip,.tk-chip:not(.tk-chip-buy){
background:rgba(255,255,255,.045)!important;
border:1px solid rgba(255,255,255,.1)!important;
color:#c8c8d0!important;
}
.action-chip:not(.is-primary):hover,.followup-chip:hover,.tk-chip:not(.tk-chip-buy):hover{
background:rgba(139,124,246,.1)!important;
border-color:rgba(139,124,246,.34)!important;
color:#fff!important;
transform:translateY(-1px);
}
.action-chip.is-primary,.tk-chip-buy{
background:linear-gradient(135deg,#A78BFA,#8B7CF6)!important;
border:0!important;
color:#0a0a0c!important;
font-weight:700!important;
}
.action-chip.is-primary:hover,.tk-chip-buy:hover{filter:brightness(1.06);transform:translateY(-1px)}
/* ===== MINIMAL CARD PASS · part 2 · 2026-06-16 · result-card + portfolio ===== */
.result-card{
background:linear-gradient(165deg,rgba(255,255,255,.036),rgba(255,255,255,.009))!important;
border:1px solid rgba(255,255,255,.07)!important;
border-radius:14px!important;
box-shadow:0 6px 22px rgba(0,0,0,.2)!important;
}
.result-card .rc-head{border-bottom:1px solid rgba(255,255,255,.06)}
.result-card .rc-title{letter-spacing:.05em;color:#9a9aa4}
.result-card .rc-row{border-top:1px solid rgba(255,255,255,.05)}
.result-card .rc-k{color:#8a8a96}
.result-card .rc-v{color:#ececf0;font-weight:600}
/* portfolio card */
.pf-card{
background:linear-gradient(165deg,rgba(255,255,255,.036),rgba(255,255,255,.009))!important;
border:1px solid rgba(255,255,255,.07)!important;
border-radius:16px!important;
box-shadow:0 8px 26px rgba(0,0,0,.22)!important;
}
.pf-hero-v{font-weight:800;letter-spacing:-.01em}
.pf-hero-k{color:#8a8a96}
.pf-tab{color:#8a8a96}
.pf-tab.pf-tab-on{color:#8B7CF6}
.pf-tok{border-top:1px solid rgba(255,255,255,.05)}
.pf-tok-sym{font-weight:700;color:#ececf0}
.pf-tok-sub{color:#8a8a96}
.pf-chip,.pf-foot-chip{
background:rgba(255,255,255,.045)!important;border:1px solid rgba(255,255,255,.1)!important;
border-radius:10px!important;color:#c8c8d0!important;font-weight:600!important;box-shadow:none!important;
}
.pf-chip:hover,.pf-foot-chip:hover{background:rgba(139,124,246,.1)!important;border-color:rgba(139,124,246,.34)!important;color:#fff!important}
.pf-pos{color:#2ee6a8}.pf-neg{color:#ff5c7a}
/* ─── PERP · MINIMAL PREMIUM REDESIGN · 2026-06-17 (reversible · delete this block to revert) ─── */
.pe-wz { max-width: 480px; }
.pe-wz .modal-body { gap: 15px; }
.pe-market {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 13px 15px; border-radius: 14px;
background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
border: 1px solid rgba(255,255,255,.08);
}
.pe-q { font: 700 16px/1.15 'Space Grotesk', sans-serif; letter-spacing: .2px; }
.pe-side { font: 700 10.5px/1 'Inter', sans-serif; letter-spacing: .6px; text-transform: uppercase; padding: 7px 12px; border-radius: 999px; }
.pe-amt-wrap input {
font: 700 22px/1.1 'Space Grotesk', sans-serif; padding: 15px 66px 15px 16px;
border-radius: 13px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.10); width: 100%;
}
.pe-amt-wrap input:focus { border-color: rgba(139,124,246,.55); background: rgba(139,124,246,.05); box-shadow: 0 0 0 3px rgba(139,124,246,.10); }
.pe-amt-unit { right: 15px; font: 600 13px/1 'Inter', sans-serif; color: var(--txt-3, #9aa3b2); }
.pe-quick { gap: 7px; }
.pe-chip {
padding: 8px 14px; border-radius: 999px; font: 600 12.5px/1 'Inter', sans-serif;
background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09); color: var(--txt-2, #c4c5cc);
cursor: pointer; transition: all .14s ease;
}
.pe-chip:hover { background: rgba(139,124,246,.12); border-color: rgba(139,124,246,.5); color: #fff; transform: translateY(-1px); }
.pe-slide { height: 6px; border-radius: 999px; background: rgba(255,255,255,.10); -webkit-appearance: none; appearance: none; outline: none; }
.pe-slide::-webkit-slider-thumb {
-webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%;
background: #8B7CF6; border: 3px solid #15100a; box-shadow: 0 2px 9px rgba(139,124,246,.55), 0 0 0 1px rgba(139,124,246,.35); cursor: pointer; transition: transform .12s;
}
.pe-slide::-webkit-slider-thumb:hover { transform: scale(1.12); }
.pe-slide::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #8B7CF6; border: 3px solid #15100a; box-shadow: 0 2px 9px rgba(139,124,246,.55); cursor: pointer; }
.pe-num { border-radius: 10px; font: 600 14px/1 'Inter', sans-serif; padding: 11px 10px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.10); text-align: center; color: var(--txt, #f4f4f6); }
.pe-num:focus { border-color: rgba(139,124,246,.55); outline: none; }
.pe-wz .form-row label { font: 600 12px/1.2 'Inter', sans-serif; color: var(--txt-2, #c4c5cc); letter-spacing: .2px; }
.pe-wz .hint { font: 500 11px/1.45 'Inter', sans-serif; color: var(--txt-3, #9aa3b2); }
.pe-summary, .pe-approval, .pe-confirm {
border-radius: 13px; padding: 14px 15px;
background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.012));
border: 1px solid rgba(255,255,255,.07);
}
.pe-row { padding: 3px 0; }
.pe-row > span:first-child { font-size: 12px; }
.pe-row > span:last-child { font: 600 13px/1.35 var(--mono); }
.pe-success-icon { box-shadow: 0 4px 20px rgba(74,222,128,.25); }
.pe-wz .modal-foot .btn-primary, .pe-wz .modal-foot .btn { border-radius: 11px; font-weight: 650; letter-spacing: .2px; }
/* ─── end PERP MINIMAL PREMIUM ─── */
/* WIZARD PREMIUM POLISH · earn + swap-cross · 2026-06-17 (reversible) */
.ee-amt-input:focus, .sx-amt:focus, .sx-recipient-in:focus { box-shadow: 0 0 0 3px rgba(139,124,246,.13) !important; }
.ee-amt-wrap:focus-within, .sx-pair:focus-within { box-shadow: 0 0 0 1px rgba(139,124,246,.30); border-color: rgba(139,124,246,.40) !important; }
/* RICH-TEXT · markdown code blocks (copy button) + headers · 2026-06-17 (reversible) */
.md-code { margin:8px 0; border:1px solid var(--line-1); border-radius:10px; overflow:hidden; background:var(--bg-3); }
.md-code-head { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:6px 8px 6px 11px; background:rgba(255,255,255,.03); border-bottom:1px solid var(--line-1); }
.md-code-lang { font:600 10.5px/1 var(--mono); text-transform:uppercase; letter-spacing:.08em; color:var(--txt-3); }
.md-code-copy { font:600 11px/1 var(--inter,'Inter'); color:var(--txt-2); background:rgba(255,255,255,.05); border:1px solid var(--line-1); border-radius:7px; padding:5px 11px; cursor:pointer; transition:all .14s; }
.md-code-copy:hover { color:#fff; border-color:rgba(139,124,246,.45); background:rgba(139,124,246,.10); }
.md-code-copy.is-copied { color:var(--pos,#22c55e); border-color:rgba(34,197,94,.4); }
.md-code pre, .msg-bubble .md-code pre { margin:0 !important; border:0 !important; border-radius:0 !important; background:transparent !important; }
.md-h { font-family:var(--display,'Space Grotesk'),sans-serif; font-weight:700; line-height:1.25; margin:11px 0 5px; color:var(--txt-1,#f4f4f6); }
h3.md-h { font-size:16px; } h4.md-h { font-size:14.5px; } h5.md-h { font-size:13px; color:var(--txt-2); }
.msg-bubble .md-h:first-child { margin-top:0; }
/* Solana Jupiter-verified badge (sits above the RugCheck risk box) · 2026-06-17 */
.tk-jup-badge { font:600 11.5px/1.3 var(--inter,'Inter'),sans-serif; padding:6px 11px; border-radius:9px; margin:0 0 6px; border:1px solid; }
.tk-jup-badge.tk-jup-ok { color:#86efac; background:rgba(34,197,94,.08); border-color:rgba(34,197,94,.28); }
.tk-jup-badge.tk-jup-warn { color:#fcd34d; background:rgba(251,191,36,.07); border-color:rgba(251,191,36,.26); }
/* /scan on-chain RugCheck block · 2026-06-17 */
.sc-onchain { margin:2px 0 10px; padding:9px 11px; border-radius:11px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07); }
.sc-oc-head { font:700 11px/1.2 var(--inter,'Inter'),sans-serif; letter-spacing:.02em; margin-bottom:7px; }
.sc-oc-facts { display:flex; flex-wrap:wrap; gap:5px; }
.sc-oc-fact { font:600 10.5px/1.3 var(--inter,'Inter'),sans-serif; padding:3px 8px; border-radius:7px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); color:#c3cad6; }
.sc-oc-fact.ok { color:#86efac; border-color:rgba(34,197,94,.26); background:rgba(34,197,94,.07); }
.sc-oc-fact.warn { color:#fcd34d; border-color:rgba(251,191,36,.24); background:rgba(251,191,36,.06); }
.sc-oc-fact.bad { color:#fca5a5; border-color:rgba(239,68,68,.28); background:rgba(239,68,68,.08); }