/* ======================================================
激光 DEX (Jiguang DEX) — 全局样式
品牌口径: 激光科技风
主色: 电光蓝 #3B82F6 · 激光紫 #7C3AED · 荧光青 #06B6D4
====================================================== */
:root {
/* 背景层级 */
--color-bg-base: #0a0e1a;
--color-bg-elevated: #0f172a;
--color-bg-panel: #1e1b4b;
--color-bg-card: #1e293b;
/* 边框 */
--color-border: rgba(124, 58, 237, 0.15);
--color-border-hover: rgba(124, 58, 237, 0.4);
/* 文字 */
--color-text-primary: #ffffff;
--color-text-secondary: #9ba3c7;
--color-text-muted: #5e6690;
/* 状态色 */
--color-green: #10b981;
--color-red: #ef4444;
--color-yellow: #f59e0b;
/* 品牌三主色 (激光科技风) */
--color-blue: #3b82f6; /* 电光蓝 */
--color-purple: #7c3aed; /* 激光紫 */
--color-cyan: #06b6d4; /* 荧光青 */
/* 激光主渐变 (蓝→紫→青) */
--gradient-laser: linear-gradient(90deg, #3b82f6 0%, #7c3aed 50%, #06b6d4 100%);
--gradient-laser-diag: linear-gradient(135deg, #3b82f6 0%, #7c3aed 50%, #06b6d4 100%);
--gradient-laser-vertical: linear-gradient(180deg, #3b82f6 0%, #7c3aed 50%, #06b6d4 100%);
/* 发光阴影 */
--shadow-glow-blue: 0 0 24px rgba(59, 130, 246, 0.4);
--shadow-glow-purple: 0 0 24px rgba(124, 58, 237, 0.45);
--shadow-glow-cyan: 0 0 24px rgba(6, 182, 212, 0.4);
--shadow-glow-green: 0 0 16px rgba(16, 185, 129, 0.35);
--shadow-glow-laser: 0 4px 24px rgba(124, 58, 237, 0.35), 0 0 12px rgba(59, 130, 246, 0.25);
--shadow-card: 0 8px 32px rgba(0, 0, 0, 0.5);
}
* {
box-sizing: border-box;
}
html,
body {
background: var(--color-bg-base);
color: var(--color-text-primary);
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin: 0;
padding: 0;
}
/* 全局背景光晕 */
body::before {
content: '';
position: fixed;
top: -20%;
left: -10%;
width: 60%;
height: 60%;
background: radial-gradient(circle, rgba(59, 130, 246, 0.12) 0%, transparent 60%);
pointer-events: none;
z-index: 0;
}
body::after {
content: '';
position: fixed;
bottom: -20%;
right: -10%;
width: 60%;
height: 60%;
background: radial-gradient(circle, rgba(168, 85, 247, 0.12) 0%, transparent 60%);
pointer-events: none;
z-index: 0;
}
main,
.page-root {
position: relative;
z-index: 1;
}
/* ========== 滚动条 ========== */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: #0b0d1a;
}
::-webkit-scrollbar-thumb {
background: #2f3660;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #4a5280;
}
/* ========== 数字等宽字体 ========== */
.font-mono,
.num,
.hash {
font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
font-variant-numeric: tabular-nums;
}
/* ========== 通用卡片 ========== */
.card {
background: linear-gradient(135deg, rgba(26, 30, 58, 0.6) 0%, rgba(18, 21, 42, 0.8) 100%);
border: 1px solid var(--color-border);
border-radius: 12px;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}
.card-hover {
transition: all 0.2s ease;
}
.card-hover:hover {
border-color: var(--color-border-hover);
transform: translateY(-1px);
box-shadow: var(--shadow-card);
}
/* ========== 按钮 ========== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.625rem 1rem;
border-radius: 8px;
font-weight: 600;
font-size: 0.875rem;
line-height: 1.25rem;
cursor: pointer;
transition: all 0.15s ease;
border: 1px solid transparent;
white-space: nowrap;
user-select: none;
}
.btn-primary {
/* 纯色绿, 官网 jiguang.xyz 风格 */
background: #39FF14;
color: #052e1a;
border: none;
font-weight: 700;
box-shadow: 0 4px 14px rgba(57, 255, 20, 0.28);
}
.btn-primary:hover {
background: #4dff2e;
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(57, 255, 20, 0.45);
}
.btn-secondary {
background: rgba(57, 255, 20, 0.08);
color: #39FF14;
border: 1px solid rgba(57, 255, 20, 0.35);
}
.btn-secondary:hover {
background: rgba(57, 255, 20, 0.14);
border-color: rgba(57, 255, 20, 0.55);
color: #4dff2e;
}
.btn-ghost {
background: rgba(57, 255, 20, 0.04);
color: #86efac;
border: 1px solid rgba(57, 255, 20, 0.18);
}
.btn-ghost:hover {
background: rgba(57, 255, 20, 0.12);
color: #4dff2e;
border-color: rgba(57, 255, 20, 0.4);
}
.btn-success {
/* 纯色绿 */
background: #00ff88;
color: #001f10;
font-weight: 700;
box-shadow: 0 4px 14px rgba(0, 255, 136, 0.35);
}
.btn-success:hover {
background: #33ffa0;
box-shadow: 0 6px 20px rgba(0, 255, 136, 0.55);
}
.btn-danger {
/* 纯色红 */
background: #ff3b5c;
color: #fff;
box-shadow: 0 4px 14px rgba(255, 59, 92, 0.35);
}
.btn-danger:hover {
background: #ff5070;
box-shadow: 0 6px 20px rgba(255, 59, 92, 0.55);
}
/* ========== 输入框 ========== */
.input {
background: rgba(11, 13, 26, 0.6);
border: 1px solid var(--color-border);
border-radius: 8px;
color: #fff;
padding: 0.625rem 0.875rem;
font-size: 0.875rem;
transition: all 0.15s ease;
width: 100%;
outline: none;
}
.input:focus {
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.input::placeholder {
color: var(--color-text-muted);
}
/* ========== 标签/徽章 ========== */
.badge {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 2px 8px;
border-radius: 6px;
font-size: 0.75rem;
font-weight: 600;
line-height: 1.25rem;
}
.badge-green {
background: rgba(0, 255, 136, 0.12);
color: #00ff88;
border: 1px solid rgba(0, 255, 136, 0.3);
}
.badge-red {
background: rgba(255, 59, 92, 0.12);
color: #ff3b5c;
border: 1px solid rgba(255, 59, 92, 0.3);
}
.badge-blue {
background: rgba(59, 130, 246, 0.12);
color: #8ec9ff;
border: 1px solid rgba(59, 130, 246, 0.3);
}
.badge-purple {
/* 改为绿色品牌系, 保留类名兼容性 */
background: rgba(0, 255, 136, 0.12);
color: #00ff88;
border: 1px solid rgba(0, 255, 136, 0.3);
}
.badge-yellow {
background: rgba(255, 204, 0, 0.12);
color: #ffcc00;
border: 1px solid rgba(255, 204, 0, 0.3);
}
.badge-gray {
background: rgba(99, 126, 255, 0.08);
color: #9ba3c7;
border: 1px solid rgba(99, 126, 255, 0.2);
}
/* ========== 涨跌颜色 ========== */
.text-up,
.price-up {
color: #00ff88 !important;
}
.text-down,
.price-down {
color: #ff3b5c !important;
}
/* ========== 代币 Logo(真实图标 + 占位)========== */
.token-logo {
border-radius: 50%;
background: linear-gradient(135deg, rgba(37, 42, 74, 0.6), rgba(18, 21, 42, 0.6));
object-fit: cover;
flex-shrink: 0;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
transition: transform 0.2s ease;
}
.token-logo:hover {
transform: scale(1.08);
}
.token-logo-fb {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: linear-gradient(135deg, #1a2540 0%, #0f1629 100%);
color: #39FF14;
font-weight: 800;
font-family: 'JetBrains Mono', monospace;
flex-shrink: 0;
box-shadow: inset 0 0 0 1.5px rgba(57, 255, 20, 0.28), 0 1px 4px rgba(0,0,0,0.35);
letter-spacing: -0.02em;
text-shadow: 0 0 8px rgba(57,255,20,0.25);
}
/* 代币 Logo 与链徽章叠加(小链标在右下角)*/
.token-logo-stack {
position: relative;
display: inline-block;
flex-shrink: 0;
}
.token-logo-stack .chain-icon {
position: absolute;
right: -2px;
bottom: -2px;
border: 2px solid #0b0d1a;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
/* ========== 链图标 ========== */
.chain-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.25rem;
height: 1.25rem;
border-radius: 50%;
font-size: 0.625rem;
font-weight: 700;
color: #fff;
flex-shrink: 0;
}
.chain-bsc {
background: linear-gradient(135deg, #f3ba2f 0%, #f0b90b 100%);
color: #000;
}
.chain-sol {
background: linear-gradient(135deg, #9945ff 0%, #14f195 100%);
}
.chain-base {
background: linear-gradient(135deg, #0052ff 0%, #0066ff 100%);
}
.chain-eni {
background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
}
.chain-eth {
background: linear-gradient(135deg, #627eea 0%, #3c3c3d 100%);
}
.chain-trx {
background: linear-gradient(135deg, #ff0013 0%, #ef0027 100%);
}
.chain-polygon {
background: linear-gradient(135deg, #8247e5 0%, #7c3aed 100%);
}
.chain-arb,
.chain-arbitrum {
background: linear-gradient(135deg, #28a0f0 0%, #213147 100%);
}
.chain-opbnb {
background: linear-gradient(135deg, #f0b90b 0%, #f3ba2f 100%);
color: #000;
}
/* r146 (2026-05-16): .chain-juchain 样式移除 — JuChain 整链下架 */
.chain-avax {
background: linear-gradient(135deg, #e84142 0%, #ff5252 100%);
}
/* ========== 链 logo 尺寸规范 (fix-market-list-ui)
克制的科技感:轻微 ring + inset 高光,无外发光,不抢主标题视线
- chain-icon-md: 28px (用于市场页筛选 / Swap 链选择条)
- chain-icon-lg: 36px (用于首页 ChainMarquee 跑马灯)
尺寸由内联 style 控制,本规则只负责视觉修饰 */
.chain-icon-md,
.chain-icon-lg {
box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.08) inset,
0 1px 2px rgba(0, 0, 0, 0.45);
transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.chain-tab:hover .chain-icon-md,
.chain-select:hover .chain-icon-md,
.chain-marquee-item:hover .chain-icon-lg {
box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.16) inset,
0 0 0 2px rgba(99, 126, 255, 0.28),
0 1px 3px rgba(0, 0, 0, 0.5);
transform: translateY(-0.5px);
}
.chain-tab.active .chain-icon-md,
.chain-select.active .chain-icon-md {
box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.18) inset,
0 0 0 2px rgba(99, 126, 255, 0.4),
0 1px 3px rgba(0, 0, 0, 0.5);
}
/* ========== r142 (2026-05-15): 链原版 LOGO 适配
当 .chain-icon 内嵌 ![]()
时:
- 移除原渐变背景, 替换为纯黑底防止 PNG 边缘锯齿
- img 填满父级圆形容器, object-fit:contain 保留 logo 完整 */
.chain-icon:has(.chain-logo-img) {
background: #0b1320 !important;
padding: 2px;
}
.chain-logo-img {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: contain;
display: block;
/* 防止 logo 加载失败时的 alt 文本撑破布局 */
font-size: 0;
color: transparent;
}
/* ========== r142 (2026-05-15): 行情列表分页按钮
- .page-btn : 基础按钮
- .page-btn--active: 当前页高亮 (蓝色, 与品牌色一致)
- .page-btn--nav : 上一页/下一页 (带边距/最小宽度)
- .page-btn--disabled: 禁用态 (首/尾页) */
.page-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 36px;
height: 36px;
padding: 0 10px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
color: rgba(229, 231, 235, 0.85);
font-size: 13px;
font-weight: 500;
line-height: 1;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
user-select: none;
}
.page-btn:hover:not(.page-btn--disabled):not(.page-btn--active) {
background: rgba(59, 130, 246, 0.15);
border-color: rgba(99, 126, 255, 0.35);
color: #fff;
}
.page-btn--active {
background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
border-color: rgba(96, 165, 250, 0.6);
color: #fff;
box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.16) inset,
0 2px 6px rgba(37, 99, 235, 0.45);
cursor: default;
}
.page-btn--nav {
padding: 0 14px;
min-width: auto;
}
.page-btn--disabled,
.page-btn[disabled] {
opacity: 0.4;
cursor: not-allowed;
pointer-events: none;
}
.page-indicator {
padding: 0 8px;
min-width: 90px;
text-align: center;
white-space: nowrap;
}
@media (max-width: 640px) {
.page-btn { min-width: 32px; height: 32px; font-size: 12px; padding: 0 8px; }
.page-btn--nav { padding: 0 10px; }
}
/* ========== 荧光光晕 ========== */
.glow-blue {
box-shadow: 0 0 20px rgba(59, 130, 246, 0.4);
}
.glow-purple {
box-shadow: 0 0 20px rgba(168, 85, 247, 0.4);
}
.glow-green {
box-shadow: 0 0 20px rgba(0, 255, 136, 0.4);
}
/* ========== 动画 ========== */
@keyframes glow {
0%, 100% { opacity: 1; }
50% { opacity: 0.6; }
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
@keyframes spin-slow {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes shimmer {
0% { background-position: -1000px 0; }
100% { background-position: 1000px 0; }
}
.shimmer {
background: linear-gradient(90deg,
rgba(99, 126, 255, 0.05) 0%,
rgba(99, 126, 255, 0.15) 50%,
rgba(99, 126, 255, 0.05) 100%);
background-size: 1000px 100%;
animation: shimmer 2s infinite;
}
/* ========== 表格 ========== */
.data-table {
width: 100%;
border-collapse: collapse;
}
.data-table thead th {
background: rgba(18, 21, 42, 0.6);
padding: 0.75rem 1rem;
text-align: left;
font-size: 0.75rem;
font-weight: 600;
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
border-bottom: 1px solid var(--color-border);
position: sticky;
/* r159 (2026-05-20): top 默认 0 (容器内 sticky); 当父容器为 .market-table-sticky-fix
时, top 改用 --market-thead-top 跟随首页顶部 sticky-header 高度 (由 home.js 动态测量) */
top: 0;
z-index: 10;
}
.data-table tbody tr {
border-bottom: 1px solid rgba(99, 126, 255, 0.08);
transition: background 0.15s ease;
}
.data-table tbody tr:hover {
background: rgba(59, 130, 246, 0.06);
}
.data-table tbody td {
padding: 0.875rem 1rem;
font-size: 0.875rem;
vertical-align: middle;
}
/* r85 (2026-04-28 Rocket 反馈): 操作列固定在右侧
- 表格 min-w-[1200px] 在窄屏会触发横向滚动, 最右列(操作)会被滚到视口外
- 用 position: sticky; right: 0 把操作列钉在右边, 任何滚动位置都可见
- 加左侧 box-shadow 营造分层感, 让用户清楚知道这是浮动列 */
.data-table thead th.action-col,
.data-table tbody td.action-col {
position: sticky;
right: 0;
z-index: 5;
background: linear-gradient(90deg, transparent 0, rgba(11, 13, 26, 0.95) 12px, rgba(11, 13, 26, 0.98) 100%);
box-shadow: -8px 0 12px -8px rgba(0, 0, 0, 0.4);
}
.data-table thead th.action-col {
z-index: 11; /* 高于普通表头 sticky (z-10) */
background: linear-gradient(90deg, transparent 0, rgba(18, 21, 42, 0.95) 12px, rgba(18, 21, 42, 1) 100%);
}
.data-table tbody tr:hover td.action-col {
background: linear-gradient(90deg, transparent 0, rgba(20, 30, 60, 0.96) 12px, rgba(20, 30, 60, 1) 100%);
}
/* ========== 渐变文字 ========== */
.gradient-text {
/* 官网 jiguang.xyz 风格: 纯色无渐变, 霓虹绿 #39FF14 */
color: #39FF14;
background: none;
-webkit-background-clip: initial;
-webkit-text-fill-color: #39FF14;
background-clip: initial;
}
.gradient-text-green {
background: linear-gradient(135deg, #00ff88 0%, #00e5ff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* ========== 顶部导航 ==========
* hotfix-r156-nav-sticky (2026-05-18):
* 1) 同时声明 `position: -webkit-sticky` 兜底旧版 Safari
* 2) `isolation: isolate` 建立独立 stacking context, 防止页面内
* 使用 transform/filter/perspective 的元素意外吃掉 sticky 行为
* 3) z-index 100 保持不变 — 高于普通页面内容 (max z-30),
* 低于 modal (1000) / lang-dropdown (1000) / toast (2000) /
* mobile sidebar mask (9998), 不会遮挡弹窗
* 4) backdrop-filter 维持半透明深色 + 模糊, 滚动时不会白闪
* 5) 配合上方 html/body overflow 修复, 移动 + PC 端均会持续吸附顶部 */
.navbar {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 100;
isolation: isolate;
background: rgba(11, 13, 26, 0.85);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-bottom: 1px solid var(--color-border);
/* hotfix-r156-nav-sticky: 明确告知合成器, 提升移动端持续吸附稳定性 */
will-change: transform;
}
.nav-link {
color: var(--color-text-secondary);
padding: 0.5rem 1rem;
border-radius: 8px;
font-weight: 500;
font-size: 0.875rem;
transition: all 0.15s ease;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.5rem;
/* Fix 2026-04-24 (Rocket 反馈): 4 字中文菜单项 (合约检测 / 用户中心) 被挤压断行导致
显示不完整。强制单行 + 不收缩,让 flex 容器优先挤其他元素。 */
white-space: nowrap;
flex-shrink: 0;
}
/* 更紧凑的中等视窗 (lg ~ xl 之间): 缩小 padding 给 4 字菜单留空间 */
@media (min-width: 1024px) and (max-width: 1279px) {
.nav-link { padding: 0.5rem 0.625rem; gap: 0.375rem; font-size: 0.8125rem; }
}
.nav-link:hover {
color: #fff;
background: rgba(59, 130, 246, 0.08);
}
.nav-link.active {
color: #fff;
background: rgba(59, 130, 246, 0.15);
box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.3);
}
/* r77 (2026-04-28): 用户中心已登录态 — 绿色高亮 + 在线圆点指示
只有 .nav-account-active (即用户已登录) 才生效, 未登录时保持原样 */
.nav-link.nav-account.nav-account-active {
color: #4ade80;
background: rgba(34, 197, 94, 0.12);
box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.35);
position: relative;
}
.nav-link.nav-account.nav-account-active:hover {
color: #86efac;
background: rgba(34, 197, 94, 0.2);
}
.nav-link.nav-account.nav-account-active.active {
color: #4ade80;
background: rgba(34, 197, 94, 0.18);
box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.5);
}
.nav-link.nav-account.nav-account-active i {
color: #4ade80;
text-shadow: 0 0 6px rgba(74, 222, 128, 0.45);
}
/* 右上角小绿点 — 在线指示, 加柔和呼吸动画 */
.nav-link.nav-account.nav-account-active::after {
content: '';
position: absolute;
top: 6px;
right: 6px;
width: 6px;
height: 6px;
border-radius: 50%;
background: #22c55e;
box-shadow: 0 0 6px rgba(34, 197, 94, 0.75), 0 0 0 1px rgba(0, 0, 0, 0.4);
animation: nav-account-pulse 2s ease-in-out infinite;
}
@keyframes nav-account-pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.55; transform: scale(0.85); }
}
/* Light 主题: 深绿底色更可读 */
html[data-theme="light"] .nav-link.nav-account.nav-account-active {
color: #15803d !important;
background: rgba(34, 197, 94, 0.14) !important;
box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.4) !important;
}
html[data-theme="light"] .nav-link.nav-account.nav-account-active i {
color: #16a34a !important;
}
/* ========== Logo ========== */
.logo {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-weight: 800;
font-size: 1.25rem;
text-decoration: none;
color: #fff;
}
.logo-mark {
width: 32px;
height: 32px;
border-radius: 8px;
background: #39FF14;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 16px rgba(57, 255, 20, 0.45);
position: relative;
}
.logo-mark::before {
content: '';
position: absolute;
inset: 2px;
border-radius: 6px;
background: #0a1a12;
}
.logo-mark span {
position: relative;
font-weight: 900;
font-size: 1rem;
color: #39FF14;
}
/* ========== 骨架屏 ========== */
.skeleton {
background: linear-gradient(90deg,
rgba(99, 126, 255, 0.04) 0%,
rgba(99, 126, 255, 0.1) 50%,
rgba(99, 126, 255, 0.04) 100%);
background-size: 1000px 100%;
animation: shimmer 2s infinite;
border-radius: 4px;
}
/* ========== 工具类 ========== */
.divider-v {
width: 1px;
background: var(--color-border);
}
.text-ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ========== Swap 面板特殊样式 ========== */
.swap-panel {
background: linear-gradient(135deg, rgba(26, 30, 58, 0.95) 0%, rgba(18, 21, 42, 0.95) 100%);
border: 1px solid rgba(99, 126, 255, 0.2);
border-radius: 16px;
backdrop-filter: blur(20px);
box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.swap-token-input {
background: rgba(11, 13, 26, 0.6);
border: 1px solid var(--color-border);
border-radius: 12px;
/* r88 (2026-04-28): 右 padding 加大, 让 token select 按钮远离右边框
r89 (2026-04-28 Rocket 反馈): 仍贴右边, 大幅左移按钮
r90 (2026-04-28 Rocket 反馈): 继续大幅左移
- 右 padding 2rem → 4rem (64px), 强制按钮再左移 32px */
padding: 1rem 4rem 1rem 1rem;
transition: all 0.15s ease;
}
.swap-token-input:focus-within {
border-color: rgba(59, 130, 246, 0.5);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
/* r78 (2026-04-28): 长符号 token (ASTEROID) 让按钮撑出右侧边框
- max-width 约束 + flex-shrink:0 防止挤压输入框
- 内部 symbol 强制 truncate, 超长加省略号
r87 (2026-04-28 Rocket 反馈): 按钮仍超出 swap-panel 右边框
- max-width 140 → 120, padding 0.75rem → 0.625rem, 整体内缩
- 内部 symbol max-width 80 → 64
r88 (2026-04-28 Rocket 反馈): 上一版仍贴着右边框, 要求完全收回框架内
- max-width 120 → 104px, padding 0.625rem → 0.55rem, 图标 24×24 → 20×20
- .swap-token-input 右 padding 加大 1rem → 1.125rem (再 +2px 与右边框间距)
- .swap-panel 默认 padding (p-4 = 16px) 已够, 不再动它防止打乱其它布局
- 加 box-sizing: border-box 双保险, 确保 max-width 把 border 也算进去 */
.swap-token-select {
display: inline-flex;
align-items: center;
gap: 0.35rem;
background: rgba(99, 126, 255, 0.1);
border: 1px solid rgba(99, 126, 255, 0.2);
border-radius: 10px;
padding: 0.5rem 0.55rem;
font-weight: 600;
cursor: pointer;
transition: all 0.15s ease;
max-width: 104px;
flex-shrink: 0;
overflow: hidden;
box-sizing: border-box;
}
.swap-token-select > span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
max-width: 56px;
font-size: 0.875rem;
}
/* r88: 收紧内部 token 图标与下拉箭头, 给文字让出更多空间 */
.swap-token-select > div {
width: 1.25rem !important;
height: 1.25rem !important;
font-size: 0.625rem !important;
}
.swap-token-select > div {
flex-shrink: 0;
}
.swap-token-select > i {
flex-shrink: 0;
}
.swap-token-select:hover {
background: rgba(99, 126, 255, 0.15);
border-color: rgba(99, 126, 255, 0.35);
}
/* ========== 风险标签 ========== */
.risk-safe {
background: rgba(0, 255, 136, 0.1);
color: #00ff88;
border-left: 3px solid #00ff88;
}
.risk-warn {
background: rgba(255, 204, 0, 0.1);
color: #ffcc00;
border-left: 3px solid #ffcc00;
}
.risk-danger {
background: rgba(255, 59, 92, 0.1);
color: #ff3b5c;
border-left: 3px solid #ff3b5c;
}
/* ========== 响应式 ========== */
@media (max-width: 768px) {
.hide-mobile { display: none !important; }
.data-table thead th,
.data-table tbody td {
padding: 0.625rem 0.5rem;
font-size: 0.75rem;
}
}
@media (min-width: 769px) {
.show-mobile { display: none !important; }
}
/* ========== 模态框 ========== */
.modal-backdrop {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(8px);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 1rem;
}
.modal-content {
background: linear-gradient(135deg, #1a1e3a 0%, #12152a 100%);
border: 1px solid rgba(99, 126, 255, 0.2);
border-radius: 16px;
max-width: 480px;
width: 100%;
max-height: 90vh;
overflow-y: auto;
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
}
/* ========== Toast ========== */
.toast-container {
position: fixed;
top: 1rem;
right: 1rem;
z-index: 2000;
display: flex;
flex-direction: column;
gap: 0.5rem;
pointer-events: none;
}
.toast {
background: rgba(26, 30, 58, 0.95);
backdrop-filter: blur(12px);
border: 1px solid var(--color-border);
border-radius: 10px;
padding: 0.875rem 1rem;
display: flex;
align-items: center;
gap: 0.75rem;
min-width: 280px;
max-width: 360px;
pointer-events: auto;
animation: toast-in 0.3s ease;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.toast-success { border-left: 3px solid #00ff88; }
.toast-error { border-left: 3px solid #ff3b5c; }
.toast-warn { border-left: 3px solid #ffcc00; }
.toast-info { border-left: 3px solid #3b82f6; }
@keyframes toast-in {
from { transform: translateX(100%); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
/* ========== 小组件 ========== */
.dot {
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
vertical-align: middle;
}
.dot-live {
background: #00ff88;
box-shadow: 0 0 8px #00ff88;
animation: glow 1.5s ease-in-out infinite;
}
.dot-offline {
background: #5e6690;
}
/* ============================================================
白天模式 (Light Theme) — 通过 [data-theme="light"] 切换
============================================================ */
html[data-theme="light"] {
--color-bg-base: #f7f9fc;
--color-bg-elevated: #ffffff;
--color-bg-panel: #ffffff;
--color-bg-card: #ffffff;
--color-border: rgba(15, 23, 42, 0.08);
--color-border-hover: rgba(59, 130, 246, 0.35);
--color-text-primary: #0f172a;
--color-text-secondary: #475569;
--color-text-muted: #94a3b8;
--color-green: #059669;
--color-red: #dc2626;
--shadow-card: 0 8px 32px rgba(15, 23, 42, 0.08);
color-scheme: light;
}
/* 光晕柔化 */
html[data-theme="light"] body::before {
background: radial-gradient(circle, rgba(59, 130, 246, 0.05) 0%, transparent 60%);
}
html[data-theme="light"] body::after {
background: radial-gradient(circle, rgba(168, 85, 247, 0.04) 0%, transparent 60%);
}
/* 覆盖所有 Tailwind 硬编码色 */
html[data-theme="light"] .bg-deep-950 { background-color: #f7f9fc !important; }
html[data-theme="light"] .bg-deep-900,
html[data-theme="light"] .bg-deep-900\/80,
html[data-theme="light"] .bg-deep-900\/60,
html[data-theme="light"] .bg-deep-900\/95 { background-color: rgba(255, 255, 255, 0.95) !important; backdrop-filter: blur(20px); }
html[data-theme="light"] .bg-deep-800,
html[data-theme="light"] .bg-deep-800\/60,
html[data-theme="light"] .bg-deep-800\/50 { background-color: #eef2f8 !important; }
html[data-theme="light"] .bg-deep-700,
html[data-theme="light"] .bg-deep-700\/60 { background-color: #e5eaf2 !important; }
html[data-theme="light"] .bg-deep-600,
html[data-theme="light"] .bg-deep-600\/60 { background-color: #d8dfea !important; }
/* 白天模式文字 — 提升对比度 (WCAG AA ≥ 4.5:1) */
html[data-theme="light"] .text-gray-100 { color: #0b1220 !important; }
html[data-theme="light"] .text-gray-200 { color: #111827 !important; }
html[data-theme="light"] .text-gray-300 { color: #1f2937 !important; }
html[data-theme="light"] .text-gray-400 { color: #374151 !important; } /* 从 #64748b 加深 */
html[data-theme="light"] .text-gray-500 { color: #4b5563 !important; } /* 从 #94a3b8 加深 */
html[data-theme="light"] .text-gray-600 { color: #6b7280 !important; } /* 从 #cbd5e1 大幅加深 (原来几乎看不见) */
html[data-theme="light"] .text-white { color: #0b1220 !important; }
/* 白天模式下彩色文字 — 把深色背景上的浅色调换成浅色背景上的深色 */
html[data-theme="light"] .text-blue-300 { color: #1d4ed8 !important; }
html[data-theme="light"] .text-blue-400 { color: #1e40af !important; }
html[data-theme="light"] .text-green-300 { color: #047857 !important; }
html[data-theme="light"] .text-green-400 { color: #059669 !important; }
html[data-theme="light"] .text-purple-300,
html[data-theme="light"] .text-purple-400 { color: #047857 !important; } /* 紫色也改绿色 (品牌大绿) */
html[data-theme="light"] .text-cyan-300 { color: #0891b2 !important; }
html[data-theme="light"] .text-cyan-400 { color: #0e7490 !important; }
html[data-theme="light"] .text-yellow-200,
html[data-theme="light"] .text-yellow-300 { color: #a16207 !important; }
html[data-theme="light"] .text-yellow-400 { color: #854d0e !important; }
html[data-theme="light"] .text-red-300,
html[data-theme="light"] .text-red-400 { color: #b91c1c !important; }
/* 白天模式：半透明彩色背景在白底上基本看不见，改成浅色实底 */
html[data-theme="light"] .bg-blue-500\/10 { background-color: rgba(29, 78, 216, 0.08) !important; }
html[data-theme="light"] .bg-blue-500\/20 { background-color: rgba(29, 78, 216, 0.12) !important; }
html[data-theme="light"] .bg-purple-500\/10,
html[data-theme="light"] .bg-green-500\/10 { background-color: rgba(5, 150, 105, 0.08) !important; }
html[data-theme="light"] .bg-purple-500\/20,
html[data-theme="light"] .bg-green-500\/20 { background-color: rgba(5, 150, 105, 0.14) !important; }
html[data-theme="light"] .bg-cyan-500\/10 { background-color: rgba(8, 145, 178, 0.08) !important; }
html[data-theme="light"] .bg-cyan-500\/20 { background-color: rgba(8, 145, 178, 0.14) !important; }
/* 半透明彩色边框同样处理 */
html[data-theme="light"] .border-blue-500\/20,
html[data-theme="light"] .border-blue-500\/30 { border-color: rgba(29, 78, 216, 0.25) !important; }
html[data-theme="light"] .border-purple-500\/20,
html[data-theme="light"] .border-purple-500\/30,
html[data-theme="light"] .border-green-500\/20,
html[data-theme="light"] .border-green-500\/30 { border-color: rgba(5, 150, 105, 0.28) !important; }
html[data-theme="light"] .border-cyan-500\/20,
html[data-theme="light"] .border-cyan-500\/30 { border-color: rgba(8, 145, 178, 0.28) !important; }
/* 白天模式：from-/to- 渐变 stop 在白底下几乎透明，加深 */
html[data-theme="light"] .from-green-500\/10 { --tw-gradient-from: rgba(5, 150, 105, 0.10) !important; }
html[data-theme="light"] .from-green-500\/20 { --tw-gradient-from: rgba(5, 150, 105, 0.14) !important; }
html[data-theme="light"] .to-green-500\/5 { --tw-gradient-to: rgba(5, 150, 105, 0.04) !important; }
html[data-theme="light"] .to-green-500\/10 { --tw-gradient-to: rgba(5, 150, 105, 0.10) !important; }
html[data-theme="light"] .from-cyan-500\/10 { --tw-gradient-from: rgba(8, 145, 178, 0.10) !important; }
html[data-theme="light"] .to-cyan-500\/10 { --tw-gradient-to: rgba(8, 145, 178, 0.10) !important; }
/* 白天模式下 gradient-text 需深绿, 依然纯色无渐变 */
html[data-theme="light"] .gradient-text {
color: #00a02e;
-webkit-text-fill-color: #00a02e;
background: none;
-webkit-background-clip: initial;
background-clip: initial;
}
/* Footer 在白天模式下特别加深 (截图里 Version V1.0 · Live 几乎看不见) */
html[data-theme="light"] footer,
html[data-theme="light"] .site-footer {
color: #374151;
}
html[data-theme="light"] footer a,
html[data-theme="light"] .site-footer a {
color: #4b5563;
}
html[data-theme="light"] footer a:hover,
html[data-theme="light"] .site-footer a:hover {
color: #059669;
}
html[data-theme="light"] .border-deep-600,
html[data-theme="light"] .border-deep-600\/30,
html[data-theme="light"] .border-deep-600\/40,
html[data-theme="light"] .border-deep-600\/50 { border-color: rgba(15, 23, 42, 0.08) !important; }
html[data-theme="light"] .border-deep-700,
html[data-theme="light"] .border-deep-700\/50 { border-color: rgba(15, 23, 42, 0.1) !important; }
/* 卡片背景 */
html[data-theme="light"] .card {
background: #ffffff;
border: 1px solid var(--color-border);
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}
html[data-theme="light"] .card-hover:hover {
box-shadow: 0 8px 32px rgba(59, 130, 246, 0.12);
border-color: rgba(59, 130, 246, 0.25);
}
/* 导航栏 */
html[data-theme="light"] .navbar {
background: rgba(255, 255, 255, 0.85) !important;
border-bottom: 1px solid rgba(15, 23, 42, 0.06) !important;
}
html[data-theme="light"] .nav-link { color: #475569 !important; }
html[data-theme="light"] .nav-link:hover { background: #eef2f8 !important; color: #0f172a !important; }
html[data-theme="light"] .nav-link.active {
background: rgba(59, 130, 246, 0.1) !important;
color: #2563eb !important;
}
/* 输入框 */
html[data-theme="light"] .input {
background: #ffffff !important;
border-color: rgba(15, 23, 42, 0.12) !important;
color: #0f172a !important;
}
html[data-theme="light"] .input:focus {
border-color: #3b82f6 !important;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
}
html[data-theme="light"] .input::placeholder { color: #94a3b8 !important; }
/* 表格 */
html[data-theme="light"] .data-table th {
background: #f1f5f9 !important;
color: #475569 !important;
}
html[data-theme="light"] .data-table tr:hover td {
background: #f8fafc !important;
}
html[data-theme="light"] .data-table td {
border-color: rgba(15, 23, 42, 0.06) !important;
}
/* 按钮ghost在白天 */
html[data-theme="light"] .btn-ghost { color: #475569; }
html[data-theme="light"] .btn-ghost:hover { background: #eef2f8; color: #0f172a; }
/* 徽章 */
html[data-theme="light"] .badge-gray {
background: #e2e8f0 !important;
color: #475569 !important;
}
/* 代币 Logo 占位符 */
html[data-theme="light"] .token-logo-fb {
background: linear-gradient(135deg, #e0e7ef 0%, #f1f5f9 100%);
color: #3b82f6;
box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.1);
}
html[data-theme="light"] .token-logo {
background: #ffffff;
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08), inset 0 0 0 1px rgba(15, 23, 42, 0.04);
}
/* 链徽章在白天叠加的描边 */
html[data-theme="light"] .token-logo-stack .chain-icon {
border-color: #ffffff;
}
/* 滚动条 */
html[data-theme="light"] ::-webkit-scrollbar-track { background: #f1f5f9; }
html[data-theme="light"] ::-webkit-scrollbar-thumb { background: #cbd5e1; }
html[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
/* 涨跌色在白天强化一点 */
html[data-theme="light"] .text-up { color: #059669 !important; }
html[data-theme="light"] .text-down { color: #dc2626 !important; }
/* Logo mark 背景 */
html[data-theme="light"] .logo-mark {
background: #00d43a; /* 白天模式稍暗, 保证对比 */
color: #fff;
box-shadow: 0 4px 14px rgba(0, 212, 58, 0.25);
}
html[data-theme="light"] .logo-mark::before {
background: #052e1a;
}
html[data-theme="light"] .logo-mark span {
color: #39FF14;
}
/* ============================================================
实时数据闪烁动画
============================================================ */
@keyframes flash-up {
0% { background-color: transparent; }
30% { background-color: rgba(0, 255, 136, 0.15); }
100% { background-color: transparent; }
}
@keyframes flash-down {
0% { background-color: transparent; }
30% { background-color: rgba(255, 59, 92, 0.15); }
100% { background-color: transparent; }
}
.flash-up { animation: flash-up 1.2s ease-out; }
.flash-down { animation: flash-down 1.2s ease-out; }
@keyframes pulse-dot {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.4; transform: scale(0.85); }
}
.pulse-dot { animation: pulse-dot 1.8s ease-in-out infinite; }
/* Realtime 状态标记 */
.realtime-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
border-radius: 6px;
font-size: 10px;
font-weight: 600;
background: rgba(0, 255, 136, 0.1);
color: #00ff88;
border: 1px solid rgba(0, 255, 136, 0.25);
}
.realtime-badge::before {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
background: #00ff88;
box-shadow: 0 0 8px #00ff88;
animation: pulse-dot 1.8s ease-in-out infinite;
}
html[data-theme="light"] .realtime-badge {
background: rgba(5, 150, 105, 0.08);
color: #059669;
border-color: rgba(5, 150, 105, 0.2);
}
html[data-theme="light"] .realtime-badge::before {
background: #059669;
box-shadow: 0 0 8px rgba(5, 150, 105, 0.5);
}
/* ============================================================
主题切换按钮
============================================================ */
.theme-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 10px;
background: rgba(99, 126, 255, 0.08);
border: 1px solid var(--color-border);
color: var(--color-text-secondary);
cursor: pointer;
transition: all 0.2s ease;
}
.theme-toggle:hover {
background: rgba(99, 126, 255, 0.15);
color: var(--color-text-primary);
transform: translateY(-1px);
}
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: inline; }
html[data-theme="light"] .theme-toggle .icon-sun { display: inline; }
html[data-theme="light"] .theme-toggle .icon-moon { display: none; }
/* ============================================================
移动端优化 (≤ 767px)
============================================================ */
/* 底部 Tab 导航栏(移动端) */
.mobile-tabbar {
display: none;
position: fixed;
left: 0;
right: 0;
bottom: 0;
height: calc(58px + env(safe-area-inset-bottom));
padding-bottom: env(safe-area-inset-bottom);
background: rgba(11, 13, 26, 0.92);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
border-top: 1px solid rgba(99, 126, 255, 0.15);
z-index: 100;
}
.mobile-tabbar-inner {
display: flex;
height: 58px;
align-items: stretch;
justify-content: space-around;
}
.mobile-tab {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
color: #5e6690;
text-decoration: none;
transition: color 0.15s ease;
font-size: 10px;
font-weight: 500;
padding: 8px 4px 6px;
}
.mobile-tab i {
font-size: 18px;
}
.mobile-tab.active {
color: #55aeff;
}
.mobile-tab.active i {
filter: drop-shadow(0 0 6px rgba(85, 174, 255, 0.5));
}
.mobile-tab-swap {
position: relative;
}
.mobile-tab-swap .mobile-tab-swap-btn {
width: 48px;
height: 48px;
border-radius: 50%;
background: #39FF14;
color: #052e1a !important;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
font-weight: 700;
margin-top: -20px;
box-shadow: 0 4px 16px rgba(57, 255, 20, 0.45);
}
html[data-theme="light"] .mobile-tabbar {
background: rgba(255, 255, 255, 0.95);
border-top-color: rgba(15, 23, 42, 0.08);
}
html[data-theme="light"] .mobile-tab { color: #64748b; }
html[data-theme="light"] .mobile-tab.active { color: #2563eb; }
@media (max-width: 767px) {
.mobile-tabbar { display: block; }
body { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
/* 隐藏顶部 PC 导航在移动端已经是 lg:flex 所以 OK */
/* 容器边距紧凑 */
.max-w-\[1600px\] { padding-left: 10px !important; padding-right: 10px !important; }
/* 卡片圆角更大 */
.card { border-radius: 16px; }
/* 按钮手感 */
.btn { padding: 0.625rem 1rem; font-size: 0.875rem; min-height: 40px; }
/* 隐藏 pc-only 元素 */
.pc-only { display: none !important; }
/* 隐藏导航栏中搜索框和链状态(太挤)*/
.navbar .nav-search,
.navbar .nav-chain-status { display: none !important; }
/* ========== r105 (2026-04-29): Swap 页面移动端适配增强 ==========
用户反馈: "翻译没问题, 手机不适配" - 集中修复 swap 页面在 360-414px 屏幕上的布局溢出与挤压 */
/* Token 摘要头: 头像缩小 + 数字栏改成 2 列网格紧凑展示 */
#token-header { padding: 12px !important; gap: 10px !important; }
#token-header > div:first-child { gap: 10px !important; min-width: 100% !important; }
#th-logo { width: 44px !important; height: 44px !important; font-size: 14px !important; }
#th-symbol { font-size: 1.125rem !important; }
#th-name { font-size: 0.6875rem !important; }
/* 数字栏 7 项 → 2 列网格,字号统一缩到 base */
#token-header > div:last-child {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 8px 12px !important;
width: 100% !important;
margin: 0 !important;
}
#token-header > div:last-child > div { text-align: left !important; }
#th-price, #th-chg24 { font-size: 1rem !important; line-height: 1.2 !important; }
#th-liq, #th-fdv, #th-vol, #th-txns { font-size: 0.8125rem !important; line-height: 1.2 !important; }
#th-secscore { font-size: 0.875rem !important; line-height: 1.2 !important; }
/* 徽标群: 字号缩小, 减少 padding, 防换行错位 */
#th-holders, #th-tax-buy, #th-tax-sell, #th-smartmoney, #th-trending {
font-size: 0.6875rem !important;
padding: 0.125rem 0.375rem !important;
}
#th-holders-val, #th-tax-buy-val, #th-tax-sell-val, #th-smartmoney-val {
font-size: 0.8125rem !important;
}
/* K 线图: 高度降低 + 工具栏支持横滚 */
#kline-chart, .kline-container, [id="kline-chart"] { }
.card > div[style*="height:420px"], .card > div[style*="height: 420px"] {
height: 280px !important;
}
/* OHLC 信息条: 字号缩小, 自动折行 */
#kline-ohlc-bar { font-size: 10px !important; gap: 6px !important; padding: 4px 6px !important; }
/* K 线工具栏: 整行横滚, 不再换行让按钮挤压 */
.card > div.flex.items-center.justify-between.p-3.border-b.gap-2.flex-wrap,
.card > div.flex.items-center.justify-between.p-3 {
flex-wrap: nowrap !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
}
.card > div.flex.items-center.justify-between.p-3 > div:last-child {
flex-wrap: nowrap !important;
}
.kline-tf, .kline-type, .kline-unit, .kline-draw,
#kline-zoom-out, #kline-zoom-in, #kline-zoom-reset,
#kline-ma-toggle, #kline-boll-toggle,
#kline-macd-toggle, #kline-rsi-toggle,
#kline-draw-clear {
min-height: 32px !important;
padding: 0.25rem 0.5rem !important;
font-size: 0.6875rem !important;
flex-shrink: 0 !important;
}
/* Swap 面板 - 右栏: 字号 + 间距压缩 */
.swap-panel { padding: 12px !important; }
.swap-panel h3 { font-size: 1rem !important; }
.swap-token-input { padding: 10px !important; }
.swap-token-input input { font-size: 1.25rem !important; }
.swap-token-select {
padding: 0.375rem 0.625rem !important;
font-size: 0.8125rem !important;
}
.pct-btn { padding: 0.125rem 0.375rem !important; min-height: 26px !important; }
/* 链选择器栏: 缩小项, 仅显示首字母图标, 横滚不换行 */
.chain-select-bar { gap: 2px !important; padding: 3px !important; }
.chain-select { padding: 0.25rem 0.375rem !important; min-height: 32px !important; }
.chain-select .chain-select-name { display: none !important; }
.chain-select.active .chain-select-name { display: inline !important; font-size: 0.6875rem !important; }
/* MEV 防护盒: 缩小内边距 */
.mev-shield-box { padding: 10px !important; }
.mev-shield-title { font-size: 0.8125rem !important; }
.mev-shield-sub { font-size: 0.6875rem !important; }
/* 报价详情 / 钱包指示器: 字号缩 */
#quote-details { padding: 8px !important; font-size: 0.6875rem !important; }
#swap-wallet-indicator, #swap-login-status { padding: 8px !important; font-size: 0.6875rem !important; }
/* AVE 数据表面板: tab + 表格紧凑 */
.ave-main-tab { padding: 0.5rem 0.625rem !important; font-size: 0.75rem !important; white-space: nowrap; }
.ave-sub-tab { padding: 0.25rem 0.5rem !important; font-size: 0.6875rem !important; white-space: nowrap; }
.ave-tab-pane.active { max-height: 480px !important; }
.data-table { font-size: 0.6875rem !important; }
.data-table thead th, .data-table tbody td {
padding: 0.5rem 0.375rem !important;
font-size: 0.6875rem !important;
}
/* Token Profile 卡: 字段表强制单列 */
#tp-rows { grid-template-columns: 1fr !important; }
#tp-image { width: 40px !important; height: 40px !important; }
/* 安全检测卡: 缩小 padding */
.security-card .security-header,
.security-card .security-footer { padding: 10px 12px !important; }
/* 模态框: 占满屏宽并贴边 */
.modal-content { max-width: calc(100vw - 16px) !important; max-height: 92vh !important; }
.modal-backdrop { padding: 8px !important; }
/* 表单输入手感 (避免 iOS 自动放大) */
input, select, textarea { font-size: 16px !important; }
}
/* ========== r110 (2026-04-29): 极小屏 (360-480px) Swap 页面收尾修复 ==========
覆盖 360-414px (iPhone SE/12 mini/Galaxy S8) 等窄屏的细节挤压问题:
- Token 头像区: 数字栏改为 1 列展示, 避免两列再挤压
- K 线主图: 高度再降 + OHLC 改成横滚单行
- 链选择器: 强制横滚 + 隐藏文字 + 紧凑 padding
- 输入框: 数字字号自适应缩小, 防右侧 token 按钮压到边
- K 线工具栏: 整行横滚, MA/BOLL/MACD 等按钮不再换行
*/
@media (max-width: 480px) {
/* Swap 面板再次内缩 */
.swap-panel { padding: 10px !important; }
/* 输入框字号: 极窄屏 1.25rem → 1.0625rem, 避免与 104px 的 token 选择器挤压 */
.swap-token-input input,
#from-amount, #to-amount {
font-size: 1.0625rem !important;
line-height: 1.25 !important;
}
/* token 选择器再缩小 (104→92px, symbol 56→44px), 给数字让位 */
.swap-token-select {
max-width: 92px !important;
padding: 0.3125rem 0.5rem !important;
gap: 0.25rem !important;
}
.swap-token-select > span {
max-width: 44px !important;
font-size: 0.75rem !important;
}
.swap-token-select > div {
width: 1.125rem !important;
height: 1.125rem !important;
font-size: 0.5625rem !important;
}
/* Token 头部数字栏: 2 列 → 1 列单纵, 避免两列在 360px 仍然挤压 */
#token-header > div:last-child {
grid-template-columns: 1fr 1fr !important;
gap: 6px 10px !important;
}
#th-price, #th-chg24 { font-size: 0.9375rem !important; }
#th-liq, #th-fdv, #th-vol, #th-txns { font-size: 0.75rem !important; }
/* K 线主图高度再降, 避免移动端首屏被挤掉 */
.card > div[style*="height:420px"], .card > div[style*="height: 420px"] {
height: 240px !important;
}
/* OHLC 信息条: 单行横滚, 不换行 */
#kline-ohlc-bar {
flex-wrap: nowrap !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
font-size: 9px !important;
gap: 5px !important;
padding: 3px 4px !important;
}
#kline-ohlc-bar > span { flex-shrink: 0 !important; }
#kline-ohlc-bar > span.ml-auto { margin-left: 4px !important; }
/* K 线工具栏内 Price/MCap + 时间窗按钮 - 再压缩 */
.kline-tf, .kline-unit { font-size: 0.625rem !important; padding: 0.1875rem 0.375rem !important; min-height: 28px !important; }
/* 链选择器: 完全隐藏文字 (含 active), 仅显图标, 横滚 */
.chain-select-bar {
flex-wrap: nowrap !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
}
.chain-select { padding: 0.1875rem 0.3125rem !important; min-height: 28px !important; flex-shrink: 0 !important; }
.chain-select .chain-select-name,
.chain-select.active .chain-select-name { display: none !important; }
.chain-select.active .chain-icon { box-shadow: 0 0 0 2px rgba(99,126,255,0.45); }
/* 比例按钮 25/50/75/Max 缩小, 不换行 */
.pct-btn { padding: 0.125rem 0.3125rem !important; min-height: 24px !important; font-size: 0.625rem !important; }
/* MEV 行: title + sub 自动换行减小字号 */
.mev-shield-box { padding: 8px !important; }
.mev-shield-title { font-size: 0.75rem !important; gap: 0.25rem !important; }
.mev-shield-sub { font-size: 0.625rem !important; }
.mev-status-badge { font-size: 0.5625rem !important; padding: 0.0625rem 0.25rem !important; }
/* 报价详情: 紧凑 */
#quote-details { padding: 6px 8px !important; font-size: 0.625rem !important; }
#quote-details > div { padding: 0.0625rem 0 !important; }
/* AVE 主 Tab 标签 - 再缩小, 防 5 个 Tab 在 360px 仍换行 */
.ave-main-tab { padding: 0.4375rem 0.5rem !important; font-size: 0.6875rem !important; }
.ave-main-tab i { font-size: 9px !important; margin-right: 0.125rem !important; }
.ave-sub-tab { padding: 0.1875rem 0.4375rem !important; font-size: 0.625rem !important; }
/* 数据表 - 字号再压缩 */
.data-table thead th, .data-table tbody td {
padding: 0.4375rem 0.3125rem !important;
font-size: 0.625rem !important;
}
}
@media (min-width: 768px) {
.mobile-only { display: none !important; }
}
/* 移动端首页:卡片布局 */
.mkt-card {
display: flex;
align-items: center;
gap: 12px;
padding: 14px;
background: rgba(18, 21, 42, 0.5);
border: 1px solid var(--color-border);
border-radius: 14px;
transition: all 0.15s ease;
}
.mkt-card:active {
background: rgba(26, 30, 58, 0.7);
transform: scale(0.99);
}
.mkt-card-info { flex: 1; min-width: 0; }
.mkt-card-price { text-align: right; flex-shrink: 0; }
html[data-theme="light"] .mkt-card {
background: #ffffff;
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}
html[data-theme="light"] .mkt-card:active { background: #f1f5f9; }
/* 移动端下拉刷新 */
.ptr-container {
position: relative;
overflow-x: hidden;
}
.ptr-indicator {
position: absolute;
top: -60px;
left: 0;
right: 0;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-text-muted);
font-size: 12px;
transition: transform 0.3s ease;
pointer-events: none;
}
.ptr-indicator i {
margin-right: 6px;
transition: transform 0.3s ease;
}
.ptr-container.ptr-pulling .ptr-indicator { transform: translateY(60px); }
.ptr-container.ptr-loading .ptr-indicator { transform: translateY(60px); }
.ptr-container.ptr-loading .ptr-indicator i { animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
/* ================================================================
AVE 风格 · 合约安全检测面板
================================================================ */
.security-card {
padding: 0;
overflow: hidden;
}
.security-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 14px;
cursor: pointer;
user-select: none;
border-bottom: 1px solid var(--color-border);
transition: background 0.15s;
}
.security-header:hover { background: rgba(255,255,255,0.02); }
.security-card.collapsed .security-header { border-bottom: none; }
.security-card.collapsed .security-body,
.security-card.collapsed .security-footer { display: none; }
.security-toggle-icon { transition: transform 0.25s; }
.security-card.collapsed .security-toggle-icon { transform: rotate(180deg); }
.security-body {
padding: 10px 14px;
}
.security-checklist {
display: flex;
flex-direction: column;
gap: 2px;
}
.security-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 9px 4px;
font-size: 13px;
border-bottom: 1px solid rgba(255,255,255,0.03);
}
.security-row:last-child { border-bottom: none; }
.security-row-label {
color: var(--color-text-soft, #c1c5d6);
font-weight: 500;
}
[data-theme="light"] .security-row-label { color: #475569; }
.security-row-icon {
display: inline-flex;
align-items: center;
font-size: 16px;
}
.security-row.ok .security-row-icon i { color: #22c55e; }
.security-row.warn .security-row-icon i { color: #eab308; }
.security-row.fail .security-row-icon i { color: #ef4444; }
.security-tags {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin-top: 10px;
padding-top: 10px;
border-top: 1px dashed rgba(255,255,255,0.05);
}
.security-footer {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 10px 14px;
background: rgba(0,0,0,0.15);
border-top: 1px solid var(--color-border);
}
[data-theme="light"] .security-footer { background: rgba(0,0,0,0.02); }
/* 徽标补充 */
.badge-green { background: rgba(34,197,94,0.12); color: #4ade80; border: 1px solid rgba(34,197,94,0.3); }
.badge-yellow { background: rgba(234,179,8,0.12); color: #facc15; border: 1px solid rgba(234,179,8,0.3); }
.badge-red { background: rgba(239,68,68,0.12); color: #f87171; border: 1px solid rgba(239,68,68,0.3); }
.badge-blue { background: rgba(59,130,246,0.12); color: #60a5fa; border: 1px solid rgba(59,130,246,0.3); }
/* ================================================================
🌊 海洋背景总容器
================================================================ */
.ocean-bg {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
overflow: hidden;
}
.ocean-bg.ocean-off > *:not(.ocean-gradient) { display: none !important; }
/* 深海渐变蒙版 */
.ocean-gradient {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at 20% 30%, rgba(0, 119, 255, 0.08) 0%, transparent 50%),
radial-gradient(ellipse at 80% 70%, rgba(0, 229, 255, 0.06) 0%, transparent 50%),
linear-gradient(to bottom, rgba(10, 22, 40, 0) 0%, rgba(5, 10, 20, 0.3) 100%);
}
[data-theme="light"] .ocean-gradient {
background:
radial-gradient(ellipse at 20% 30%, rgba(0, 119, 255, 0.06) 0%, transparent 50%),
radial-gradient(ellipse at 80% 70%, rgba(0, 150, 200, 0.04) 0%, transparent 50%),
linear-gradient(to bottom, rgba(220, 240, 255, 0) 0%, rgba(200, 230, 250, 0.2) 100%);
}
/* 水波纹光影 (caustics) */
.caustics {
position: absolute;
inset: 0;
background-image:
radial-gradient(circle at 25% 25%, rgba(0, 229, 255, 0.08) 0%, transparent 4%),
radial-gradient(circle at 75% 35%, rgba(0, 229, 255, 0.06) 0%, transparent 5%),
radial-gradient(circle at 45% 65%, rgba(0, 229, 255, 0.07) 0%, transparent 4%),
radial-gradient(circle at 85% 85%, rgba(0, 229, 255, 0.05) 0%, transparent 5%),
radial-gradient(circle at 15% 75%, rgba(0, 229, 255, 0.06) 0%, transparent 4%);
background-size: 600px 600px;
mix-blend-mode: screen;
opacity: 0.6;
}
.caustics-1 { animation: caustics-shift-1 30s linear infinite; }
.caustics-2 {
animation: caustics-shift-2 45s linear infinite;
background-size: 400px 400px;
opacity: 0.4;
}
[data-theme="light"] .caustics { opacity: 0.3; mix-blend-mode: multiply; }
@keyframes caustics-shift-1 {
0% { transform: translate(0, 0) scale(1); }
50% { transform: translate(-30px, 20px) scale(1.05); }
100% { transform: translate(0, 0) scale(1); }
}
@keyframes caustics-shift-2 {
0% { transform: translate(0, 0) rotate(0deg); }
50% { transform: translate(20px, -15px) rotate(1deg); }
100% { transform: translate(0, 0) rotate(0deg); }
}
/* ================================================================
💦 鼠标涟漪
================================================================ */
.ripple-container {
position: absolute;
inset: 0;
pointer-events: none;
}
.ripple {
position: absolute;
width: 40px;
height: 40px;
margin: -20px 0 0 -20px;
border-radius: 50%;
border: 2px solid rgba(0, 229, 255, 0.6);
animation: ripple-expand 1s ease-out forwards;
pointer-events: none;
}
[data-theme="light"] .ripple { border-color: rgba(0, 119, 255, 0.4); }
@keyframes ripple-expand {
0% { transform: scale(0.3); opacity: 1; }
100% { transform: scale(2.5); opacity: 0; }
}
/* ================================================================
🌊 海洋模式开关
================================================================ */
.ocean-toggle {
position: fixed;
bottom: 82px;
right: 16px;
width: 42px;
height: 42px;
border-radius: 50%;
background: linear-gradient(135deg, rgba(0, 119, 255, 0.25), rgba(0, 229, 255, 0.15));
border: 1px solid rgba(0, 229, 255, 0.35);
color: #5ec7ff;
font-size: 16px;
cursor: pointer;
z-index: 45;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
transition: all 0.25s;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 20px rgba(0, 119, 255, 0.2);
}
.ocean-toggle:hover {
transform: scale(1.1);
box-shadow: 0 6px 30px rgba(0, 229, 255, 0.4);
}
.ocean-toggle.off {
background: rgba(50, 50, 60, 0.4);
border-color: rgba(150, 150, 150, 0.3);
color: #9ca3af;
box-shadow: none;
}
.ocean-toggle.off i::before { content: "\f6fb"; /* fa-fish */ opacity: 0.5; }
@media (max-width: 640px) {
.ocean-toggle { bottom: 78px; right: 12px; width: 38px; height: 38px; }
}
/* ================================================================
📱 移动端优化：减少动画负担
================================================================ */
@media (max-width: 768px) { .caustics-2 { display: none; } .ocean-light-3 { display: none; }
.bubbles span:nth-child(n+7) { display: none; }
}
@media (max-width: 480px) {}
/* ================================================================
♿ 减少动画偏好
================================================================ */
@media (prefers-reduced-motion: reduce) {
.caustics,
.ocean-light, .bubbles span {
animation: none !important;
}
/* whale+shark 已移除 */
}
/* ================================================================
📊 StatCard 统一纯色绿主题(无渐变) + 多彩图标
================================================================ */
.stat-card-green {
background: rgba(0, 255, 136, 0.06) !important;
border: 1px solid rgba(0, 255, 136, 0.25) !important;
}
.stat-card-green:hover {
border-color: rgba(0, 255, 136, 0.45) !important;
background: rgba(0, 255, 136, 0.09) !important;
}
/* 数字颜色 - 暗色模式品牌绿 */
.stat-value-green { color: #00FF88; }
/* 4 种图标主题色 - 使用原生 CSS 类(不依赖 Tailwind JIT) */
/* 蓝 - 支持链 */
.stat-icon-blue { color: #3b82f6; background: rgba(59, 130, 246, 0.15); border-color: rgba(59, 130, 246, 0.35); }
.stat-glow-blue { background: rgba(59, 130, 246, 0.35); }
/* 琥珀黄 - 检测代币 */
.stat-icon-amber { color: #f59e0b; background: rgba(245, 158, 11, 0.15); border-color: rgba(245, 158, 11, 0.35); }
.stat-glow-amber { background: rgba(245, 158, 11, 0.35); }
/* 紫 - 数据源 */
.stat-icon-violet { color: #a855f7; background: rgba(168, 85, 247, 0.15); border-color: rgba(168, 85, 247, 0.35); }
.stat-glow-violet { background: rgba(168, 85, 247, 0.35); }
/* 青 - API 接入 */
.stat-icon-cyan { color: #06b6d4; background: rgba(6, 182, 212, 0.15); border-color: rgba(6, 182, 212, 0.35); }
.stat-glow-cyan { background: rgba(6, 182, 212, 0.35); }
/* FeatureCard 图标色 */
.feat-icon-blue { color: #3b82f6; background: rgba(59, 130, 246, 0.12); border-color: rgba(59, 130, 246, 0.35); }
.feat-icon-green { color: #00FF88; background: rgba(0, 255, 136, 0.12); border-color: rgba(0, 255, 136, 0.35); }
.feat-icon-violet { color: #a855f7; background: rgba(168, 85, 247, 0.12); border-color: rgba(168, 85, 247, 0.35); }
/* 白天模式: 背景更浅,数字深翠绿,图标颜色加深 */
html[data-theme="light"] .stat-card-green {
background: rgba(5, 150, 105, 0.06) !important;
border-color: rgba(5, 150, 105, 0.35) !important;
}
html[data-theme="light"] .stat-card-green:hover {
background: rgba(5, 150, 105, 0.10) !important;
border-color: rgba(5, 150, 105, 0.55) !important;
}
html[data-theme="light"] .stat-value-green { color: #047857 !important; }
html[data-theme="light"] .stat-icon-blue { color: #1d4ed8 !important; background: rgba(29, 78, 216, 0.12) !important; border-color: rgba(29, 78, 216, 0.4) !important; }
html[data-theme="light"] .stat-icon-amber { color: #b45309 !important; background: rgba(180, 83, 9, 0.12) !important; border-color: rgba(180, 83, 9, 0.4) !important; }
html[data-theme="light"] .stat-icon-violet { color: #7e22ce !important; background: rgba(126, 34, 206, 0.12) !important; border-color: rgba(126, 34, 206, 0.4) !important; }
html[data-theme="light"] .stat-icon-cyan { color: #0e7490 !important; background: rgba(14, 116, 144, 0.12) !important; border-color: rgba(14, 116, 144, 0.4) !important; }
html[data-theme="light"] .feat-icon-blue { color: #1d4ed8 !important; background: rgba(29, 78, 216, 0.10) !important; border-color: rgba(29, 78, 216, 0.4) !important; }
html[data-theme="light"] .feat-icon-green { color: #047857 !important; background: rgba(5, 150, 105, 0.10) !important; border-color: rgba(5, 150, 105, 0.4) !important; }
html[data-theme="light"] .feat-icon-violet { color: #7e22ce !important; background: rgba(126, 34, 206, 0.10) !important; border-color: rgba(126, 34, 206, 0.4) !important; }
/* ================================================================
🌐 顶部 10 条链横向滚动展示栏 (ChainMarquee)
取代了原先的风险提示条
================================================================ */
.chain-marquee {
position: relative;
background: linear-gradient(90deg,
rgba(0, 255, 136, 0.04) 0%,
rgba(6, 182, 212, 0.04) 50%,
rgba(0, 255, 136, 0.04) 100%);
border-top: 1px solid rgba(0, 255, 136, 0.12);
border-bottom: 1px solid rgba(0, 255, 136, 0.12);
overflow: hidden;
}
.chain-marquee-inner {
max-width: 1600px;
margin: 0 auto;
display: flex;
align-items: center;
gap: 16px;
padding: 10px 16px;
}
.chain-marquee-label {
flex-shrink: 0;
font-size: 12px;
color: #cbd5e1;
white-space: nowrap;
padding-right: 16px;
border-right: 1px solid rgba(255, 255, 255, 0.08);
}
/* 移动端: 隐藏过长的标签文字, 让滚动条占满整行 */
@media (max-width: 767px) {
.chain-marquee-inner {
gap: 8px;
padding: 8px 10px;
}
.chain-marquee-label {
font-size: 11px;
padding-right: 8px;
border-right: none;
max-width: 32px; /* 只保留 "● 10 链" 的图标, 文字通过 CSS 隐藏 */
overflow: hidden;
}
.chain-marquee-label > span {
display: none; /* 隐藏长文字, 只保留前面的图标 */
}
.chain-marquee-label::after {
content: '10';
font-weight: 700;
color: #86efac;
font-size: 12px;
}
.chain-marquee-item {
font-size: 11px;
padding: 4px 10px;
}
.chain-marquee-track {
gap: 16px;
}
}
.chain-marquee-track-wrap {
flex: 1;
overflow: hidden;
position: relative;
mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
}
.chain-marquee-track {
display: flex;
gap: 28px;
width: max-content;
animation: marquee-slide 40s linear infinite;
}
.chain-marquee-track:hover {
animation-play-state: paused;
}
.chain-marquee-item {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 5px 12px;
border-radius: 999px;
background: rgba(15, 23, 42, 0.5);
border: 1px solid rgba(255, 255, 255, 0.08);
color: #e5e7eb;
font-size: 12px;
font-weight: 500;
text-decoration: none;
transition: all 0.2s ease;
white-space: nowrap;
flex-shrink: 0;
}
.chain-marquee-item:hover {
background: rgba(0, 255, 136, 0.08);
border-color: rgba(0, 255, 136, 0.35);
color: #fff;
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(0, 255, 136, 0.15);
}
.chain-marquee-item .chain-name {
font-weight: 600;
}
.chain-marquee-item .chain-dot {
width: 6px;
height: 6px;
border-radius: 50%;
box-shadow: 0 0 8px currentColor;
animation: marquee-pulse 2s ease-in-out infinite;
}
@keyframes marquee-slide {
from { transform: translateX(0); }
/* 只位移一半(原始 11 个 + 复制 11 个 = 22 个),因此 -50% 实现无缝循环 */
to { transform: translateX(-50%); }
}
@keyframes marquee-pulse {
0%, 100% { opacity: 0.6; transform: scale(1); }
50% { opacity: 1; transform: scale(1.2); }
}
/* 移动端:标签文字缩短,滚动稍快 */
@media (max-width: 768px) {
.chain-marquee-inner { gap: 10px; padding: 8px 12px; }
.chain-marquee-label {
font-size: 11px;
padding-right: 10px;
}
.chain-marquee-label .text-gray-400 { display: none; } /* 移动端隐藏副文案 */
.chain-marquee-label .mx-2 { display: none; }
.chain-marquee-track { gap: 18px; animation-duration: 30s; }
.chain-marquee-item { padding: 4px 10px; font-size: 11px; }
}
/* 减少动画偏好:停止滚动 */
@media (prefers-reduced-motion: reduce) {
.chain-marquee-track { animation: none; }
.chain-marquee-item .chain-dot { animation: none; }
}
/* 白天模式 */
html[data-theme="light"] .chain-marquee {
background: linear-gradient(90deg, rgba(0, 200, 100, 0.06), rgba(6, 182, 212, 0.06), rgba(0, 200, 100, 0.06));
border-color: rgba(4, 120, 87, 0.2);
}
html[data-theme="light"] .chain-marquee-label {
color: #1f2937;
border-right-color: rgba(0, 0, 0, 0.1);
}
html[data-theme="light"] .chain-marquee-item {
background: rgba(255, 255, 255, 0.8);
border-color: rgba(0, 0, 0, 0.1);
color: #1f2937;
}
html[data-theme="light"] .chain-marquee-item:hover {
background: rgba(5, 150, 105, 0.08);
border-color: rgba(5, 150, 105, 0.4);
color: #047857;
}
/* ========= Nav 搜索框占位符可读性强化 ========= */
#global-search::placeholder {
color: #cbd5e1; /* 暗色模式：浅灰,清晰可见 */
opacity: 1;
font-weight: 500;
}
html[data-theme="light"] #global-search {
color: #0b1220 !important;
}
html[data-theme="light"] #global-search::placeholder {
color: #4b5563 !important; /* 亮色模式：中灰,WCAG AA 合规 */
opacity: 1;
font-weight: 500;
}
html[data-theme="light"] .nav-search {
background: rgba(255,255,255,0.95) !important;
border-color: rgba(0,0,0,0.15) !important;
}
html[data-theme="light"] .nav-search i.fa-search {
color: #374151 !important;
}
html[data-theme="light"] .nav-search kbd {
color: #374151 !important;
background: #f3f4f6 !important;
border-color: rgba(0,0,0,0.1) !important;
}
/* r132 (2026-05-09): Nav 搜索框点击体验 — 让整框可点 + 搜索按钮明显 */
.nav-search { cursor: text; }
.nav-search .search-go-btn {
background: transparent;
border: 0;
padding: 0;
cursor: pointer;
color: #cbd5e1;
}
.nav-search .search-go-btn:hover { color: #34d399; }
html[data-theme="light"] .nav-search .search-go-btn { color: #374151; }
html[data-theme="light"] .nav-search .search-go-btn:hover { color: #047857; }
/* ================ r132+r133: Hero 搜索框 (首页大号搜索) ================ */
/* r133 (2026-05-09): 越南展会反馈 — 之前占满屏宽不专业, 限到 max-w-3xl 并居中 */
.hero-search-wrap { width: 100%; max-width: 768px; margin-left: auto; margin-right: auto; }
.hero-search {
background: rgba(15, 23, 42, 0.85);
backdrop-filter: blur(8px);
}
.hero-search:focus-within {
box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.12),
0 12px 32px -8px rgba(34, 197, 94, 0.18);
}
#hero-search { caret-color: #34d399; }
.hero-search-go { letter-spacing: 0.02em; }
.hero-search-go:active { transform: translateY(1px); }
/* 浅色主题适配 */
html[data-theme="light"] .hero-search {
background: rgba(255,255,255,0.95);
border-color: rgba(0,0,0,0.15);
}
html[data-theme="light"] .hero-search:hover { border-color: rgba(5,150,105,0.5); }
html[data-theme="light"] .hero-search:focus-within { border-color: #059669; }
html[data-theme="light"] #hero-search { color: #0b1220 !important; }
html[data-theme="light"] #hero-search::placeholder {
color: #6b7280 !important;
opacity: 1;
font-weight: 500;
}
html[data-theme="light"] .hero-search-icon { color: #047857 !important; }
html[data-theme="light"] .hero-search-go {
color: #fff !important;
background-image: linear-gradient(to right, #059669, #10b981) !important;
}
/* 移动端微调 */
@media (max-width: 640px) {
.hero-search { border-radius: 14px; }
.hero-search-go { padding-left: 14px; padding-right: 14px; }
.hero-search-go span { display: none; } /* 移动端只留图标, 节省横向空间 */
}
/* ================ Brand Logo ================ */
.brand-logo {
display: inline-flex;
align-items: center;
gap: 10px;
text-decoration: none;
color: inherit;
transition: opacity .2s;
}
.brand-logo:hover { opacity: .85; }
.brand-logo-mark {
border-radius: 10px;
background: #c8ff4e;
padding: 3px;
box-shadow: 0 0 18px rgba(200, 255, 78, 0.25);
transition: transform .25s;
}
.brand-logo:hover .brand-logo-mark { transform: rotate(-4deg) scale(1.04); }
html[data-theme="light"] .brand-logo-mark {
background: #a7e82b;
box-shadow: 0 1px 8px rgba(0,0,0,.12);
}
.brand-logo-wide img { display: block; }
/* ================ Language Switcher ================ */
.lang-switcher-mount { display: inline-flex; align-items: center; }
.lang-switcher {
position: relative;
display: inline-flex;
}
.lang-current {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 10px;
border-radius: 8px;
border: 1px solid rgba(100, 116, 139, 0.25);
background: rgba(18, 21, 42, 0.6);
color: #e5e7eb;
cursor: pointer;
font-size: 12px;
font-weight: 600;
transition: all .15s ease;
}
.lang-current:hover {
border-color: rgba(34, 197, 94, 0.45);
background: rgba(34, 197, 94, 0.08);
color: #fff;
}
.lang-switcher.open .lang-current {
border-color: rgba(34, 197, 94, 0.6);
background: rgba(34, 197, 94, 0.1);
}
.lang-current .lang-flag { font-size: 14px; line-height: 1; }
.lang-current .lang-code { letter-spacing: 0.5px; }
/* SVG 国旗图标 - 圆角矩形,跨平台稳定显示 */
.lang-flag-img {
display: inline-block;
border-radius: 3px;
box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 1px 2px rgba(0,0,0,0.3);
object-fit: cover;
flex-shrink: 0;
}
.lang-current .lang-flag-img { width: 20px; height: 15px; }
.lang-item .lang-flag-img { width: 22px; height: 16px; }
.lang-current .fa-chevron-down { transition: transform .2s; }
.lang-switcher.open .lang-current .fa-chevron-down { transform: rotate(180deg); }
.lang-dropdown {
position: absolute;
right: 0;
top: calc(100% + 6px);
min-width: 180px;
background: rgba(11, 13, 26, 0.98);
border: 1px solid rgba(100, 116, 139, 0.3);
border-radius: 10px;
box-shadow: 0 12px 32px rgba(0,0,0,.5), 0 0 0 1px rgba(34, 197, 94, 0.08);
padding: 6px;
z-index: 1000;
backdrop-filter: blur(12px);
animation: langDropdownIn .15s ease-out;
}
@keyframes langDropdownIn {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
.lang-item {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 8px 10px;
background: transparent;
border: none;
border-radius: 7px;
color: #cbd5e1;
font-size: 13px;
cursor: pointer;
transition: background .12s, color .12s;
text-align: left;
}
.lang-item:hover {
background: rgba(34, 197, 94, 0.1);
color: #fff;
}
.lang-item.active {
background: rgba(34, 197, 94, 0.14);
color: #86efac;
font-weight: 600;
}
.lang-item .lang-flag { font-size: 16px; line-height: 1; }
.lang-item .lang-name { flex: 1; }
/* Light theme overrides */
html[data-theme="light"] .lang-current {
background: rgba(255,255,255,0.9);
border-color: rgba(0,0,0,0.12);
color: #111827;
}
html[data-theme="light"] .lang-current:hover {
border-color: rgba(5, 150, 105, 0.4);
background: rgba(5, 150, 105, 0.06);
}
html[data-theme="light"] .lang-dropdown {
background: #fff;
border-color: rgba(0,0,0,0.1);
box-shadow: 0 10px 30px rgba(0,0,0,.12);
}
html[data-theme="light"] .lang-item { color: #374151; }
html[data-theme="light"] .lang-item:hover {
background: rgba(5, 150, 105, 0.08);
color: #111827;
}
html[data-theme="light"] .lang-item.active {
background: rgba(5, 150, 105, 0.12);
color: #047857;
}
/* mobile: hide lang-code text but keep flag */
@media (max-width: 639px) {
.lang-current { padding: 7px 8px; }
.lang-current .lang-code { display: none; }
}
/* ========== MEV Shield Toggle ========== */
.mev-shield-box {
border: 1px solid rgba(34, 197, 94, 0.35);
background: linear-gradient(90deg, rgba(34, 197, 94, 0.08), rgba(59, 130, 246, 0.06));
border-radius: 12px;
padding: 10px 12px;
transition: background .2s, border-color .2s;
}
.mev-shield-box[data-enabled="false"] {
border-color: rgba(148, 163, 184, 0.35);
background: rgba(30, 41, 59, 0.4);
}
.mev-shield-box[data-supported="false"] {
border-color: rgba(148, 163, 184, 0.25);
background: rgba(30, 41, 59, 0.3);
}
.mev-shield-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.mev-shield-left {
display: flex;
align-items: flex-start;
gap: 10px;
flex: 1;
min-width: 0;
}
.mev-shield-icon {
width: 28px; height: 28px;
border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
background: rgba(34, 197, 94, 0.18);
color: #34d399;
flex-shrink: 0;
font-size: 13px;
}
.mev-shield-box[data-enabled="false"] .mev-shield-icon {
background: rgba(148, 163, 184, 0.15);
color: #94a3b8;
}
.mev-shield-title {
font-size: 13px; font-weight: 700; color: #e2e8f0;
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.mev-status-badge {
font-size: 10px; font-weight: 700;
padding: 2px 7px; border-radius: 9999px;
background: rgba(34, 197, 94, 0.2);
color: #4ade80;
border: 1px solid rgba(34, 197, 94, 0.4);
letter-spacing: 0.3px;
}
.mev-status-badge.off {
background: rgba(148, 163, 184, 0.15);
color: #cbd5e1;
border-color: rgba(148, 163, 184, 0.35);
}
.mev-status-badge.na {
background: rgba(59, 130, 246, 0.14);
color: #93c5fd;
border-color: rgba(59, 130, 246, 0.3);
}
.mev-shield-sub {
font-size: 11px; color: #94a3b8;
margin-top: 2px;
}
.mev-help {
margin-top: 8px;
padding: 8px 10px;
background: rgba(15, 23, 42, 0.5);
border: 1px solid rgba(148, 163, 184, 0.18);
border-radius: 8px;
font-size: 11px;
line-height: 1.55;
color: #cbd5e1;
}
/* iOS-style switch */
.mev-switch {
position: relative;
display: inline-block;
width: 40px; height: 22px;
flex-shrink: 0;
cursor: pointer;
}
.mev-switch input { opacity: 0; width: 0; height: 0; }
.mev-slider {
position: absolute; inset: 0;
background: #475569;
border-radius: 9999px;
transition: background .25s;
}
.mev-slider::before {
content: ""; position: absolute;
height: 16px; width: 16px;
left: 3px; top: 3px;
background: #fff; border-radius: 50%;
transition: transform .25s;
box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.mev-switch input:checked + .mev-slider { background: #22c55e; }
.mev-switch input:checked + .mev-slider::before { transform: translateX(18px); }
.mev-switch input:disabled + .mev-slider { opacity: 0.4; cursor: not-allowed; }
/* light theme adjustments */
html[data-theme="light"] .mev-shield-box {
background: linear-gradient(90deg, rgba(34,197,94,0.08), rgba(59,130,246,0.06));
border-color: rgba(34,197,94,0.35);
}
html[data-theme="light"] .mev-shield-title { color: #0f172a; }
html[data-theme="light"] .mev-shield-sub { color: #475569; }
html[data-theme="light"] .mev-help {
background: #f8fafc; color: #334155; border-color: #e2e8f0;
}
/* ==================== 2026-04-23 移动端防护 ==================== */
/* 防止任何元素横向溢出导致页面"没自动适配"
* hotfix-r156-nav-sticky (2026-05-18):
* 原写法 `html, body { overflow-x: hidden }` 会让 隐式获得
* `overflow-y: auto`, 浏览器随后将根滚动容器转移到 内部 (而非
* viewport), 这会让 `.navbar { position: sticky; top:0 }` 失去对视窗的吸附,
* 表现为下滑后导航消失. 移动 Safari / 部分 Chrome 上尤为明显.
* 解决: 只在 上做横向裁剪, 完全不做 overflow 限制, 保留它作为
* 真正的根滚动容器, sticky 即可正确粘附. body 改用 overflow-x: clip (更现代,
* 不会触发滚动上下文); 不支持 clip 的旧浏览器降级到 hidden 行为也可接受
* (因为 不再是裁剪容器, sticky 仍然有效). */
html, body { max-width: 100vw; }
body { overflow-x: clip; }
/* 兼容旧浏览器: clip 不支持时降级到 hidden — 不会破坏 sticky,
因为已不在 上, 根滚动容器仍是 viewport. */
@supports not (overflow-x: clip) {
body { overflow-x: hidden; }
}
/* 移动端 Modal 留安全距离, 保证绑定弹窗在小屏可完整显示 */
@media (max-width: 480px) {
.modal-backdrop { padding: 0.5rem; align-items: flex-start; padding-top: 2rem; }
.modal-content {
max-width: 100%;
max-height: calc(100vh - 4rem);
border-radius: 14px;
}
/* 链列表滚动条更紧凑 */
#chain-list-root { padding-right: 2px; }
/* Toast 在移动端全宽显示, 避免被截断 */
.toast-container { left: 0.5rem; right: 0.5rem; top: 0.5rem; }
.toast { min-width: auto; max-width: 100%; }
}
/* 防止 Navbar 溢出: 长徽章自动换行 */
@media (max-width: 640px) {
.nav-search, .nav-chain-status { display: none !important; }
.realtime-badge { display: none !important; }
}
/* r28 (2026-04-26 Rocket 反馈: nav 强制不换行后右侧图标被挤出界面)
在 lg ~ xl (1024px ~ 1279px) 之间, 5 个 4-字中文菜单 + Logo 占据左侧 ~750px,
右侧的钱包按钮 + 语言切换 + 主题切换 + 移动端菜单加起来又要 ~280px,
1024px 总宽不够导致溢出. 解决:
1) lg 档位隐藏"钱包连接"文字, 只保留图标 (移动端菜单按钮已 hidden)
2) 进一步压缩 nav-link padding */
@media (min-width: 1024px) and (max-width: 1279px) {
/* 钱包按钮文字隐藏, 只剩钱包图标 */
#wallet-btn-text { display: none !important; }
/* 主题切换按钮再小一点 */
.theme-toggle { padding: 0.375rem !important; }
/* nav 链接更紧凑 */
.nav-link { padding: 0.5rem 0.5rem !important; gap: 0.25rem !important; font-size: 0.8125rem !important; }
.nav-link i { display: none !important; }
}
/* md ~ lg (1024px 以下到 768px): 移动端菜单按钮接管, nav 链接全部隐藏 — 已由原 hidden lg:flex 处理 */
/* 账户中心在移动端避免底部 tabbar 挡住内容 */
@media (max-width: 1023px) {
.page-root { padding-bottom: 80px; }
}
/* r27 (2026-04-26): 首页统计卡片可点击 + 锚点平滑滚动 */
html { scroll-behavior: smooth; }
#chain-filter-section, #market-table { scroll-margin-top: 96px; }
.stat-card-clickable { text-decoration: none; }
.stat-card-clickable:hover { transform: translateY(-2px); }
.stat-card-clickable:active { transform: scale(0.98); }
/* r31 (2026-04-27 Rocket 反馈: swap 右栏 380px 容不下 10 条链按钮)
横向可滚, 隐藏滚动条, 紧凑配色 */
.chain-select-bar {
scrollbar-width: none;
-ms-overflow-style: none;
}
.chain-select-bar::-webkit-scrollbar { display: none; }
.chain-select-bar .chain-select {
white-space: nowrap;
min-width: 0;
}
.chain-select-bar .chain-select .chain-select-name {
font-size: 11px;
}
@media (max-width: 480px) {
/* 极窄屏只保留图标, 再省地方 */
.chain-select-bar .chain-select .chain-select-name { display: none; }
}
/* r52 (2026-04-28 Rocket 反馈): 首页右上角广告海报滚动区
替换原来的 4 张统计卡 (10链/∞/Real-time/API已开放) */
.banner-carousel {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
border-radius: 14px;
overflow: hidden;
border: 1px solid rgba(34, 197, 94, 0.25);
box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(34, 197, 94, 0.05) inset;
background: #0b1424;
}
.banner-track {
position: relative;
width: 100%;
height: 100%;
}
.banner-slide {
position: absolute;
inset: 0;
display: block;
opacity: 0;
transform: scale(1.04);
transition: opacity 0.6s ease, transform 0.6s ease;
pointer-events: none;
text-decoration: none;
color: #fff;
}
.banner-slide.active {
opacity: 1;
transform: scale(1);
pointer-events: auto;
z-index: 1;
}
.banner-img {
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
position: relative;
}
/* 4 张默认海报背景 (CSS 渐变 + 主题色 + 海洋纹理) */
.banner-img-1 {
background:
radial-gradient(circle at 80% 20%, rgba(34, 197, 94, 0.45) 0%, transparent 50%),
radial-gradient(circle at 20% 80%, rgba(56, 189, 248, 0.35) 0%, transparent 55%),
linear-gradient(135deg, #052e1a 0%, #0a4d3a 50%, #082c4a 100%);
}
.banner-img-2 {
background:
radial-gradient(circle at 30% 30%, rgba(99, 102, 241, 0.4) 0%, transparent 55%),
radial-gradient(circle at 70% 75%, rgba(244, 114, 182, 0.3) 0%, transparent 55%),
linear-gradient(135deg, #1a1140 0%, #311b6e 50%, #15102e 100%);
}
.banner-img-3 {
background:
radial-gradient(circle at 70% 30%, rgba(6, 182, 212, 0.45) 0%, transparent 55%),
radial-gradient(circle at 25% 75%, rgba(14, 165, 233, 0.35) 0%, transparent 55%),
linear-gradient(135deg, #062436 0%, #084f6b 50%, #0c2647 100%);
}
.banner-img-4 {
background:
radial-gradient(circle at 40% 25%, rgba(250, 204, 21, 0.35) 0%, transparent 55%),
radial-gradient(circle at 75% 80%, rgba(249, 115, 22, 0.3) 0%, transparent 55%),
linear-gradient(135deg, #2a1c05 0%, #4a3613 50%, #1f1404 100%);
}
.banner-overlay {
position: absolute;
inset: 0;
padding: 22px 24px 40px;
display: flex;
flex-direction: column;
justify-content: center;
background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.35) 100%);
}
.banner-tag {
display: inline-flex;
align-items: center;
gap: 6px;
align-self: flex-start;
padding: 4px 10px;
border-radius: 999px;
font-size: 11px;
font-weight: 600;
background: rgba(255, 255, 255, 0.12);
border: 1px solid rgba(255, 255, 255, 0.2);
color: #d1fae5;
margin-bottom: 10px;
backdrop-filter: blur(6px);
}
.banner-title {
font-size: 22px;
font-weight: 800;
line-height: 1.2;
margin: 0 0 6px;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}
.banner-desc {
font-size: 12px;
color: #cbd5e1;
margin: 0 0 12px;
line-height: 1.5;
max-width: 90%;
}
.banner-cta {
display: inline-flex;
align-items: center;
align-self: flex-start;
padding: 6px 14px;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
background: linear-gradient(135deg, #22c55e, #16a34a);
color: #052e1a;
box-shadow: 0 4px 14px -4px rgba(34, 197, 94, 0.6);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.banner-slide:hover .banner-cta {
transform: translateY(-1px);
box-shadow: 0 6px 20px -4px rgba(34, 197, 94, 0.8);
}
.banner-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 32px;
height: 32px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.45);
border: 1px solid rgba(255, 255, 255, 0.15);
color: #fff;
font-size: 12px;
cursor: pointer;
z-index: 3;
opacity: 0;
transition: opacity 0.25s ease, background 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
}
.banner-carousel:hover .banner-arrow { opacity: 1; }
.banner-arrow:hover { background: rgba(0, 0, 0, 0.7); }
.banner-arrow-left { left: 10px; }
.banner-arrow-right { right: 10px; }
.banner-dots {
position: absolute;
bottom: 12px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 6px;
z-index: 3;
}
.banner-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.35);
cursor: pointer;
transition: background 0.2s ease, width 0.25s ease;
}
.banner-dot.active {
background: #22c55e;
width: 18px;
border-radius: 4px;
}
@media (max-width: 1024px) {
.banner-carousel { aspect-ratio: 16 / 7; max-width: none; }
.banner-title { font-size: 18px; }
.banner-desc { font-size: 11px; }
}
/* r54 (2026-04-28): 图片型海报 - 图片本身已含设计文案, 去掉文字 overlay */
/* r59 (2026-04-28 Rocket 反馈): 海报文字被裁切 (cover 裁剪) → 改用 contain
显示完整 16:9 设计稿. 图片本身就是 16:9, 容器也是 16:9, 因此不会出现黑边 */
.banner-slide-img .banner-img {
background-size: contain;
background-position: center;
background-repeat: no-repeat;
/* 与海报底色一致的深底, 避免容器宽高比与图片不完全匹配时露出空白 */
background-color: #050d1d;
}
.banner-slide-img .banner-overlay { display: none; }
/* 让图片型海报在 hover 时有微缩放, 突出可点击感 */
.banner-slide-img .banner-img {
transition: transform 0.6s ease;
}
.banner-slide-img:hover .banner-img {
transform: scale(1.03);
}
/* r55 (2026-04-28): hero 区三栏布局 - 海报 + 右侧 2×2 紧凑统计卡
让 banner 和右侧统计卡组高度统一, 视觉对齐
r64 (2026-04-28 Rocket 反馈): 海报放大 - 解除 16:9 限制, 海报跟随 grid 拉伸,
占满文案栏右侧的剩余空间, 用 background-size: cover 保证视觉饱满,
高度提升到 min 360px 让 MEV SHIELD 等海报中的视觉元素更突出 */
/* r82 (2026-04-28 Rocket 反馈): 海报缩小, 让左侧文字成为视觉主角
- min-height 360 → 280px, 整体高度收缩
- 新增 max-height 360px, 防止文案变高时海报被等比拉大
- aspect-ratio 21/9, 海报用更宽更扁的比例, 视觉更轻盈 */
#banner-carousel.self-stretch {
height: auto;
aspect-ratio: 21 / 9;
min-height: 240px;
max-height: 340px;
align-self: center;
}
/* r64: 当海报独占大宽度区域时, 用 cover 填满 (而不是 contain 留黑边),
image 本身已经是 1600×900, 比例 16:9, 横向放大几乎不会被裁切 */
#banner-carousel.self-stretch .banner-slide-img .banner-img {
background-size: cover;
}
/* 右侧 2×2 紧凑统计卡 - 比标准 stat-card 更小的内边距和字号 */
.grid.grid-cols-2.self-stretch > .stat-card-green {
padding: 12px 14px;
}
.grid.grid-cols-2.self-stretch > .stat-card-green .stat-value-green {
font-size: 20px;
line-height: 1;
}
.grid.grid-cols-2.self-stretch > .stat-card-green span[data-i18n^="home.stat"] {
font-size: 10px;
}
@media (max-width: 1024px) {
/* 窄屏改为单栏堆叠 */
#banner-carousel.self-stretch { aspect-ratio: 16 / 9; min-height: 0; }
}
/* r56 (2026-04-28 Rocket 反馈): 行情表头点击排序
- 默认显示淡色 ⇅ 指示可点击
- 当前排序列高亮 + ▲/▼ 实心箭头 */
.data-table th.sortable {
cursor: pointer;
user-select: none;
position: relative;
transition: color 0.15s ease, background 0.15s ease;
}
.data-table th.sortable::after {
content: '\f0dc'; /* fa-sort */
font-family: 'Font Awesome 6 Free';
font-weight: 900;
margin-left: 6px;
font-size: 9px;
color: rgba(148, 163, 184, 0.4);
transition: color 0.15s ease;
}
.data-table th.sortable:hover {
color: #4ade80;
background: rgba(34, 197, 94, 0.06);
}
.data-table th.sortable:hover::after {
color: rgba(74, 222, 128, 0.7);
}
.data-table th.sortable.sort-active {
color: #4ade80;
background: rgba(34, 197, 94, 0.08);
}
.data-table th.sortable.sort-active.sort-desc::after {
content: '\f0d7'; /* fa-caret-down */
color: #4ade80;
font-size: 12px;
}
.data-table th.sortable.sort-active.sort-asc::after {
content: '\f0d8'; /* fa-caret-up */
color: #4ade80;
font-size: 12px;
}
/* r62 (2026-04-28 Rocket 反馈): AVE 风格多 Tab 数据面板
主 Tab + 子筛选 + 切换面板, 仿 ave.ai 行情详情页布局 */
.ave-main-tabs { padding: 6px 0; }
.ave-main-tab {
background: transparent;
border: none;
color: #9ca3af;
font-size: 13px;
font-weight: 600;
padding: 6px 12px;
border-radius: 6px;
cursor: pointer;
white-space: nowrap;
transition: all 0.15s ease;
display: inline-flex;
align-items: center;
}
.ave-main-tab:hover { color: #e5e7eb; background: rgba(255,255,255,0.04); }
.ave-main-tab.active {
color: #22c55e;
background: rgba(34,197,94,0.10);
border-bottom: 2px solid #22c55e;
border-radius: 6px 6px 0 0;
}
.ave-sub-tab {
background: transparent;
border: 1px solid transparent;
color: #9ca3af;
font-size: 12px;
padding: 3px 10px;
border-radius: 999px;
cursor: pointer;
transition: all 0.15s ease;
}
.ave-sub-tab:hover { color: #e5e7eb; background: rgba(255,255,255,0.04); }
.ave-sub-tab.active {
color: #22c55e;
background: rgba(34,197,94,0.12);
border-color: rgba(34,197,94,0.35);
}
.ave-tab-pane { display: none; }
.ave-tab-pane.active { display: block; }
/* ======================================================
合约检测页 r94 视觉升级
====================================================== */
/* Hero 区域 */
.detect-hero { padding: 1rem 0; }
.detect-hero-glow {
position: absolute;
top: -40px;
left: 50%;
transform: translateX(-50%);
width: 480px;
height: 240px;
background: radial-gradient(ellipse at center, rgba(0, 255, 136, 0.18), transparent 70%);
pointer-events: none;
z-index: 0;
}
.detect-hero > *:not(.detect-hero-glow) { position: relative; z-index: 1; }
.detect-badge-pulse {
animation: detect-badge-pulse 2.5s ease-in-out infinite;
}
@keyframes detect-badge-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(0, 255, 136, 0.4); }
50% { box-shadow: 0 0 0 8px rgba(0, 255, 136, 0); }
}
.detect-stat-pill {
background: linear-gradient(135deg, rgba(99, 126, 255, 0.06), rgba(168, 85, 247, 0.04));
border: 1px solid rgba(99, 126, 255, 0.18);
border-radius: 10px;
padding: 0.5rem 0.75rem;
text-align: center;
}
/* 搜索卡 */
.detect-search-card {
background: linear-gradient(135deg, rgba(15, 18, 36, 0.85), rgba(10, 12, 26, 0.85)) !important;
border: 1px solid rgba(99, 126, 255, 0.2) !important;
box-shadow: 0 4px 24px rgba(99, 126, 255, 0.08);
}
.detect-btn-glow { box-shadow: 0 0 18px rgba(0, 255, 136, 0.35); }
/* 评分卡 */
.detect-score-card {
background: linear-gradient(160deg, rgba(15, 18, 36, 0.95), rgba(8, 10, 22, 0.98)) !important;
border: 1px solid rgba(0, 255, 136, 0.18) !important;
}
.detect-score-bg {
position: absolute;
inset: 0;
background: radial-gradient(circle at 50% 0%, rgba(0, 255, 136, 0.15), transparent 60%);
pointer-events: none;
}
/* 风险维度迷你条 */
.detect-dim-bar { padding: 0.25rem 0.1rem; }
.detect-dim-bar .dim-track {
width: 100%;
height: 4px;
background: rgba(255, 255, 255, 0.06);
border-radius: 2px;
overflow: hidden;
}
.detect-dim-bar .dim-fill {
height: 100%;
width: 0%;
border-radius: 2px;
transition: width 1s cubic-bezier(0.4, 0, 0.2, 1), background 0.4s ease;
}
.detect-dim-bar .dim-score { font-size: 11px; color: #cbd5e1; }
/* Top Risks 概览卡片 */
.top-risk-item {
padding: 0.65rem 0.75rem;
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.06);
background: rgba(255, 255, 255, 0.02);
transition: transform 0.2s ease, border-color 0.2s ease;
}
.top-risk-item:hover { transform: translateY(-1px); }
.top-risk-item.top-risk-safe {
border-color: rgba(0, 255, 136, 0.25);
background: linear-gradient(135deg, rgba(0, 255, 136, 0.06), rgba(0, 229, 255, 0.03));
color: #4ade80;
}
.top-risk-item.top-risk-warn {
border-color: rgba(255, 204, 0, 0.35);
background: linear-gradient(135deg, rgba(255, 204, 0, 0.10), rgba(255, 149, 0, 0.05));
color: #fbbf24;
}
.top-risk-item.top-risk-danger {
border-color: rgba(255, 59, 92, 0.4);
background: linear-gradient(135deg, rgba(255, 59, 92, 0.12), rgba(255, 59, 92, 0.04));
color: #f87171;
animation: risk-shake 4s ease-in-out infinite;
}
@keyframes risk-shake {
0%, 92%, 100% { transform: translateX(0); }
93% { transform: translateX(-1px); }
94%, 96% { transform: translateX(1px); }
95% { transform: translateX(-1px); }
}
/* 蜜罐流程 */
.honeypot-flow {
display: flex;
align-items: stretch;
gap: 0.5rem;
justify-content: space-between;
}
.hp-step {
flex: 1;
text-align: center;
padding: 0.85rem 0.5rem;
border-radius: 10px;
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.06);
transition: all 0.4s ease;
}
.hp-step.hp-pass {
border-color: rgba(0, 255, 136, 0.35);
background: rgba(0, 255, 136, 0.06);
}
.hp-step.hp-warn {
border-color: rgba(255, 204, 0, 0.4);
background: rgba(255, 204, 0, 0.06);
}
.hp-step.hp-fail {
border-color: rgba(255, 59, 92, 0.45);
background: rgba(255, 59, 92, 0.08);
animation: hp-fail-glow 2s ease-in-out infinite;
}
@keyframes hp-fail-glow {
0%, 100% { box-shadow: 0 0 0 0 rgba(255, 59, 92, 0.4); }
50% { box-shadow: 0 0 16px 2px rgba(255, 59, 92, 0); }
}
.hp-step .hp-icon {
font-size: 1.5rem;
margin-bottom: 0.35rem;
}
.hp-step .hp-label {
font-size: 0.75rem;
color: #cbd5e1;
font-weight: 600;
margin-bottom: 0.25rem;
}
.hp-step .hp-status {
font-size: 0.7rem;
}
.hp-arrow {
display: flex;
align-items: center;
color: #475569;
font-size: 0.85rem;
}
/* 税率仪表 */
.tax-meter {
background: rgba(255, 255, 255, 0.02);
border-radius: 8px;
padding: 0.55rem 0.7rem;
border: 1px solid rgba(255, 255, 255, 0.05);
}
.tax-track {
height: 6px;
background: rgba(255, 255, 255, 0.06);
border-radius: 3px;
overflow: hidden;
}
.tax-fill {
height: 100%;
width: 0%;
border-radius: 3px;
transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 0 8px currentColor;
}
/* 加载动画 */
.detect-loading-spinner {
width: 64px;
height: 64px;
border-radius: 50%;
background: linear-gradient(135deg, rgba(0, 255, 136, 0.15), rgba(0, 229, 255, 0.1));
border: 2px solid rgba(0, 255, 136, 0.4);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.75rem;
color: #00ff88;
animation: detect-spinner-spin 2s linear infinite, detect-spinner-glow 1.5s ease-in-out infinite;
}
@keyframes detect-spinner-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes detect-spinner-glow {
0%, 100% { box-shadow: 0 0 12px rgba(0, 255, 136, 0.4); }
50% { box-shadow: 0 0 28px rgba(0, 255, 136, 0.7); }
}
.detect-loading-steps .loading-step {
text-align: left;
padding: 0.4rem 0.75rem;
font-size: 0.75rem;
color: #64748b;
border-radius: 6px;
margin-bottom: 0.25rem;
transition: all 0.3s ease;
}
.detect-loading-steps .loading-step i { margin-right: 0.5rem; }
.detect-loading-steps .loading-step.active {
color: #00ff88;
background: rgba(0, 255, 136, 0.08);
}
.detect-loading-steps .loading-step.done {
color: #94a3b8;
}
.detect-loading-steps .loading-step.done i {
color: #00ff88;
}
/* 空态 pulse */
.detect-empty-pulse {
animation: empty-pulse 2.5s ease-in-out infinite;
}
@keyframes empty-pulse {
0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4); }
50% { transform: scale(1.05); box-shadow: 0 0 0 14px rgba(59, 130, 246, 0); }
}
/* ======================================================
合约检测页 r96 - AI 摘要 / 快捷操作 / 历史
====================================================== */
.ai-summary-card {
background: linear-gradient(135deg, rgba(168, 85, 247, 0.10), rgba(99, 126, 255, 0.06)) !important;
border: 1px solid rgba(168, 85, 247, 0.25) !important;
}
.ai-summary-bg {
position: absolute;
inset: 0;
background: radial-gradient(circle at 20% 0%, rgba(168, 85, 247, 0.18), transparent 60%);
pointer-events: none;
}
.ai-summary-icon {
width: 32px;
height: 32px;
border-radius: 8px;
background: linear-gradient(135deg, #a855f7, #6366f1);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 0.9rem;
box-shadow: 0 0 14px rgba(168, 85, 247, 0.5);
animation: ai-icon-pulse 2.4s ease-in-out infinite;
}
@keyframes ai-icon-pulse {
0%, 100% { box-shadow: 0 0 14px rgba(168, 85, 247, 0.5); }
50% { box-shadow: 0 0 22px rgba(168, 85, 247, 0.85); }
}
.ai-summary-action {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.35rem 0.75rem;
border-radius: 999px;
font-size: 0.7rem;
font-weight: 600;
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(255, 255, 255, 0.04);
color: #cbd5e1;
transition: all 0.2s ease;
}
.ai-summary-action:hover {
background: rgba(168, 85, 247, 0.15);
border-color: rgba(168, 85, 247, 0.4);
color: #fff;
transform: translateY(-1px);
}
.quick-action-card {
background: linear-gradient(135deg, rgba(15, 18, 36, 0.85), rgba(10, 12, 26, 0.85)) !important;
border: 1px solid rgba(99, 126, 255, 0.18) !important;
}
.quick-action-btn {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.4rem;
padding: 0.75rem 0.5rem;
border-radius: 10px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.06);
color: #cbd5e1;
font-size: 0.7rem;
font-weight: 600;
transition: all 0.2s ease;
}
.quick-action-btn:hover {
background: rgba(99, 126, 255, 0.12);
border-color: rgba(99, 126, 255, 0.4);
color: #fff;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(99, 126, 255, 0.2);
}
.quick-action-btn i {
font-size: 1.1rem;
}
/* 历史检测记录 */
#detect-history {
background: linear-gradient(135deg, rgba(15, 18, 36, 0.6), rgba(10, 12, 26, 0.6)) !important;
border: 1px solid rgba(0, 229, 255, 0.15) !important;
}
.history-chip {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.35rem 0.7rem;
border-radius: 999px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
font-size: 0.7rem;
font-family: ui-monospace, monospace;
color: #cbd5e1;
cursor: pointer;
transition: all 0.2s ease;
}
.history-chip:hover {
background: rgba(0, 229, 255, 0.12);
border-color: rgba(0, 229, 255, 0.35);
color: #fff;
transform: translateY(-1px);
}
.history-chip .hc-score {
font-weight: 700;
padding: 0 0.3rem;
border-radius: 4px;
font-size: 0.65rem;
}
.history-chip .hc-score.s-good { background: rgba(0, 255, 136, 0.18); color: #4ade80; }
.history-chip .hc-score.s-warn { background: rgba(255, 204, 0, 0.18); color: #fbbf24; }
.history-chip .hc-score.s-bad { background: rgba(255, 59, 92, 0.18); color: #f87171; }
/* ============ r113f (2026-04-29): 驾驶舱侧栏指令按钮 + 底部指令面板加大 ============ */
.side-tool-btn {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
padding: 10px 6px;
background: rgba(15, 23, 42, 0.45);
border: 1px solid rgba(99, 102, 241, 0.18);
border-radius: 8px;
color: #e5e7eb;
font-size: 11px;
font-weight: 600;
line-height: 1;
cursor: pointer;
transition: all 0.15s ease;
min-height: 56px;
position: relative;
overflow: hidden;
}
.side-tool-btn::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(34, 211, 238, 0.4), transparent);
opacity: 0;
transition: opacity 0.2s;
}
.side-tool-btn:hover {
background: rgba(34, 211, 238, 0.12);
border-color: rgba(34, 211, 238, 0.5);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(34, 211, 238, 0.15);
}
.side-tool-btn:hover::before { opacity: 1; }
.side-tool-btn:active { transform: translateY(0); }
.side-tool-btn i { font-size: 16px; }
.side-tool-btn span {
font-size: 11px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
.side-tool-btn.side-tool-warn {
background: rgba(245, 158, 11, 0.08);
border-color: rgba(245, 158, 11, 0.35);
}
.side-tool-btn.side-tool-warn:hover {
background: rgba(245, 158, 11, 0.18);
border-color: rgba(245, 158, 11, 0.6);
box-shadow: 0 4px 12px rgba(245, 158, 11, 0.2);
}
.side-tool-btn.side-tool-danger {
background: rgba(239, 68, 68, 0.08);
border-color: rgba(239, 68, 68, 0.4);
animation: side-pulse 2.5s ease-in-out infinite;
}
.side-tool-btn.side-tool-danger:hover {
background: rgba(239, 68, 68, 0.2);
border-color: rgba(239, 68, 68, 0.7);
box-shadow: 0 4px 14px rgba(239, 68, 68, 0.3);
}
@keyframes side-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.0); }
50% { box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.15); }
}
/* 底部驾驶舱指令面板 - 大按钮版 */
.cockpit-tool-btn {
display: flex !important;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
padding: 12px 4px !important;
background: rgba(15, 23, 42, 0.5);
border: 1px solid rgba(99, 102, 241, 0.2);
border-radius: 10px;
color: #e5e7eb;
font-size: 12px !important;
font-weight: 600;
line-height: 1;
cursor: pointer;
transition: all 0.18s ease;
min-height: 76px;
position: relative;
overflow: hidden;
}
.cockpit-tool-btn::after {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle at center top, rgba(34, 211, 238, 0.0), transparent 70%);
transition: background 0.2s;
pointer-events: none;
}
.cockpit-tool-btn:hover {
transform: translateY(-2px);
border-color: rgba(34, 211, 238, 0.55);
background: rgba(34, 211, 238, 0.1);
box-shadow: 0 6px 16px rgba(34, 211, 238, 0.18);
}
.cockpit-tool-btn:hover::after {
background: radial-gradient(circle at center top, rgba(34, 211, 238, 0.18), transparent 70%);
}
.cockpit-tool-btn:active { transform: translateY(0); }
.cockpit-tool-btn i {
font-size: 22px !important;
margin-bottom: 2px;
}
.cockpit-tool-btn span {
font-size: 12px;
font-weight: 600;
letter-spacing: 0.02em;
white-space: nowrap;
}
/* 顶部条按钮加大 */
.cockpit-top-btn {
padding: 6px 9px !important;
font-size: 13px !important;
border-radius: 6px;
background: rgba(15, 23, 42, 0.4) !important;
border: 1px solid rgba(99, 102, 241, 0.18);
transition: all 0.15s;
display: inline-flex;
align-items: center;
gap: 4px;
}
.cockpit-top-btn:hover {
background: rgba(34, 211, 238, 0.14) !important;
border-color: rgba(34, 211, 238, 0.5);
}
.cockpit-top-btn i { font-size: 14px; }
.cockpit-top-btn .label {
font-size: 11px;
font-weight: 600;
margin-left: 2px;
}
/* V1.1.14: 实时按钮 — 绿色呼吸灯 (常亮 + 字色绿 + dot 脉冲发光) */
.cockpit-top-btn.realtime-on {
background: rgba(16, 185, 129, 0.12) !important;
border-color: rgba(16, 185, 129, 0.5) !important;
color: #6ee7b7 !important;
box-shadow: 0 0 6px rgba(16, 185, 129, 0.25);
animation: realtime-breath 1.8s ease-in-out infinite;
}
.cockpit-top-btn.realtime-on:hover {
background: rgba(16, 185, 129, 0.2) !important;
border-color: rgba(16, 185, 129, 0.7) !important;
}
.cockpit-top-btn.realtime-on i,
.cockpit-top-btn.realtime-on .label { color: #6ee7b7 !important; }
.cockpit-top-btn .realtime-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: #10b981;
box-shadow: 0 0 6px rgba(16, 185, 129, 0.9), 0 0 12px rgba(16, 185, 129, 0.5);
display: inline-block;
margin-right: 2px;
animation: realtime-dot-pulse 1.2s ease-in-out infinite;
}
@keyframes realtime-breath {
0%, 100% { box-shadow: 0 0 6px rgba(16, 185, 129, 0.25); border-color: rgba(16, 185, 129, 0.5); }
50% { box-shadow: 0 0 14px rgba(16, 185, 129, 0.55); border-color: rgba(16, 185, 129, 0.85); }
}
@keyframes realtime-dot-pulse {
0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 6px rgba(16, 185, 129, 0.9), 0 0 12px rgba(16, 185, 129, 0.5); }
50% { opacity: 0.55; transform: scale(0.85); box-shadow: 0 0 4px rgba(16, 185, 129, 0.5); }
}
/* r113j: 8 大分组 / 20 页折叠式左侧栏 */
.admin-side-nav { scrollbar-width: thin; scrollbar-color: rgba(99,102,241,0.25) transparent; }
.admin-side-nav::-webkit-scrollbar { width: 4px; }
.admin-side-nav::-webkit-scrollbar-thumb { background: rgba(99,102,241,0.25); border-radius: 2px; }
/* ============================================================
r114v: 后台移动端汉堡菜单 + 侧栏滑出 (彻底重写, 不依赖 Tailwind)
桌面 (>=768px) — 侧栏 static 显示, 汉堡按钮隐藏, 遮罩隐藏
手机 (<768px) — 侧栏 fixed 隐藏在屏幕外, 点汉堡滑入, 点遮罩关闭
============================================================ */
/* 汉堡按钮基础样式 (默认桌面隐藏) */
.adm-menu-btn {
display: none;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
padding: 0;
margin-right: 4px;
background: rgba(99, 102, 241, 0.15);
border: 1px solid rgba(99, 102, 241, 0.35);
border-radius: 8px;
color: #c7d2fe;
font-size: 18px;
cursor: pointer;
-webkit-tap-highlight-color: rgba(99, 102, 241, 0.25);
touch-action: manipulation;
user-select: none;
-webkit-user-select: none;
position: relative;
z-index: 30;
}
.adm-menu-btn:hover { background: rgba(99, 102, 241, 0.25); }
.adm-menu-btn:active { transform: scale(0.95); }
.adm-menu-btn i { pointer-events: none; }
/* 遮罩基础样式 (默认隐藏, 不占空间) */
.adm-side-mask {
display: none;
}
@media (max-width: 767.98px) {
/* 移动端: 汉堡按钮显示 */
.adm-menu-btn {
display: inline-flex !important;
}
/* 移动端: 侧栏 fixed 滑出 */
.adm-side {
position: fixed !important;
top: 0;
left: 0;
width: 280px;
max-width: 85vw;
height: 100vh;
height: 100dvh;
z-index: 9999;
transform: translateX(-105%);
transition: transform 0.25s ease-out;
box-shadow: 0 0 24px rgba(0, 0, 0, 0.6);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.adm-side.adm-side-open {
transform: translateX(0) !important;
}
/* 移动端: 遮罩 fixed, 默认 display:none, 加 .adm-side-mask-open 后显示 */
.adm-side-mask {
display: block;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.55);
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
z-index: 9998;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease-out;
}
.adm-side-mask.adm-side-mask-open {
opacity: 1;
pointer-events: auto;
}
/* iOS 安全区域 padding (顶部 sticky 栏) */
main > .h-16 {
padding-left: max(env(safe-area-inset-left), 0.75rem);
padding-right: max(env(safe-area-inset-right), 0.75rem);
}
/* 防止移动端 sidebar 滑出时 main 内容横向溢出
* hotfix-r156-nav-sticky: 用 clip 代替 hidden, 不破坏根滚动上下文,
* 保证顶部 .navbar { position:sticky } 在移动端继续吸附 viewport */
body { overflow-x: clip; }
}
@media (min-width: 768px) {
/* 桌面端: 汉堡按钮强制隐藏, 遮罩强制不显示 */
.adm-menu-btn { display: none !important; }
.adm-side-mask { display: none !important; }
}
.nav-group { margin-bottom: 1px; }
/* V1.1.3: 框架尺寸保持不变 (padding/gap 同 V1.1.2), 仅字号整体放大 — group 13.5→15.5, sub 13→14.5, icon 同步放大 */
.nav-group-head {
width: 100%;
display: flex;
align-items: center;
gap: 9px;
padding: 7px 12px;
background: transparent;
border: 0;
border-radius: 6px;
color: #e2e8f0;
font-size: 15.5px;
font-weight: 700;
letter-spacing: 0.03em;
cursor: pointer;
transition: all 0.15s;
text-align: left;
}
.nav-group-head:hover { background: rgba(99,102,241,0.08); color: #f1f5f9; }
.nav-group-head .nav-group-title { flex: 1; font-size: 15.5px; }
.nav-group-head .nav-group-chev {
font-size: 11px;
color: #6b7280;
transition: transform 0.2s;
}
.nav-group-head > i:first-child {
font-size: 16px;
}
.nav-group.collapsed .nav-group-chev { transform: rotate(-90deg); }
.nav-group-body {
overflow: hidden;
max-height: 600px;
transition: max-height 0.25s ease, opacity 0.2s;
opacity: 1;
padding-left: 4px;
}
.nav-group.collapsed .nav-group-body { max-height: 0; opacity: 0; }
.nav-link.nav-sub {
display: flex;
align-items: center;
gap: 9px;
padding: 5px 10px 5px 16px;
margin: 0;
border-radius: 5px;
font-size: 14.5px;
font-weight: 500;
color: #94a3b8;
position: relative;
transition: all 0.12s;
}
.nav-link.nav-sub i {
font-size: 14.5px;
}
.nav-link.nav-sub:hover { background: rgba(34,211,238,0.06); color: #e2e8f0; }
.nav-link.nav-sub.active {
background: linear-gradient(90deg, rgba(34,211,238,0.18), rgba(34,211,238,0.04));
color: #67e8f9;
font-weight: 600;
border-left: 2px solid #06b6d4;
padding-left: 14px;
}
.nav-link.nav-sub.active i { color: #22d3ee !important; }
.nav-link.nav-sub > span:first-of-type { flex: 1; }
.nav-badge {
font-size: 9px;
font-weight: 700;
padding: 1px 6px;
border-radius: 8px;
line-height: 1.4;
}
.nav-badge-cyan { background: rgba(34,211,238,0.18); color: #67e8f9; border: 1px solid rgba(34,211,238,0.35); }
.nav-badge-rose { background: rgba(244,63,94,0.18); color: #fda4af; border: 1px solid rgba(244,63,94,0.4); animation: pill-pulse-fail 1s infinite; }
.nav-badge-amber { background: rgba(245,158,11,0.18); color: #fcd34d; border: 1px solid rgba(245,158,11,0.4); }
/* V1.1.8: 仪表盘内容字号整体放大 (框架/容器尺寸保持不变, 仅增大文字与图标) */
#pane-dashboard .text-xs { font-size: 13px !important; }
#pane-dashboard .text-sm { font-size: 15px !important; }
#pane-dashboard .text-base { font-size: 16.5px !important; }
#pane-dashboard .text-lg { font-size: 18px !important; }
#pane-dashboard .text-xl { font-size: 21px !important; }
#pane-dashboard .text-2xl { font-size: 26px !important; }
#pane-dashboard .text-3xl { font-size: 32px !important; }
/* 内联 px 字号统一上调 +1~+2 px */
#pane-dashboard [class*="text-[10px]"] { font-size: 12px !important; }
#pane-dashboard [class*="text-[11px]"] { font-size: 13px !important; }
#pane-dashboard [class*="text-[12px]"] { font-size: 13.5px !important; }
#pane-dashboard [class*="text-[13px]"] { font-size: 14.5px !important; }
/* KPI 卡数值 (font-mono) — 强化主指标可读性 */
#pane-dashboard .font-mono.text-2xl { font-size: 28px !important; letter-spacing: -0.01em; }
/* 表格/列表行高微调 (字号变大后避免顶到上下) */
#pane-dashboard table td, #pane-dashboard table th { font-size: 14px !important; line-height: 1.5; }
/* 系统健康徽章带文字 */
#pane-dashboard .health-pill .lbl,
#pane-dashboard .health-pill .val { font-size: 12px; }
/* V1.1.8: 健康徽章 — 字号 10→12, padding 加大 (框架不变) */
.health-pill {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 8px;
border-radius: 10px;
background: rgba(15, 23, 42, 0.5);
border: 1px solid rgba(99, 102, 241, 0.15);
font-size: 12px;
transition: all 0.15s;
cursor: pointer;
}
.health-pill:hover { border-color: rgba(34, 211, 238, 0.45); background: rgba(34, 211, 238, 0.08); }
.health-pill .dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: #6b7280;
box-shadow: 0 0 4px rgba(107, 114, 128, 0.6);
display: inline-block;
}
.health-pill .lbl { color: #9ca3af; font-weight: 500; }
.health-pill .val { font-weight: 700; font-family: ui-monospace, monospace; }
/* OK 绿 */
.health-pill.pill-ok .dot { background: #10b981; box-shadow: 0 0 6px rgba(16, 185, 129, 0.7); animation: pill-pulse-ok 2s infinite; }
.health-pill.pill-ok { border-color: rgba(16, 185, 129, 0.25); }
/* WARN 琥珀 */
.health-pill.pill-warn .dot { background: #f59e0b; box-shadow: 0 0 6px rgba(245, 158, 11, 0.8); animation: pill-pulse-warn 1.2s infinite; }
.health-pill.pill-warn { border-color: rgba(245, 158, 11, 0.45); background: rgba(245, 158, 11, 0.08); }
/* FAIL 红 */
.health-pill.pill-fail .dot { background: #ef4444; box-shadow: 0 0 8px rgba(239, 68, 68, 0.9); animation: pill-pulse-fail 0.8s infinite; }
.health-pill.pill-fail { border-color: rgba(239, 68, 68, 0.55); background: rgba(239, 68, 68, 0.1); }
@keyframes pill-pulse-ok { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }
@keyframes pill-pulse-warn { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.7; transform: scale(0.85); } }
@keyframes pill-pulse-fail { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.75); } }
/* ============================================================
r117 (2026-05-04): 全页面移动端统一优化
----------------------------------------------------------------
覆盖 swap / home / detect / account / ai-agent 五个页面在移动端的核心问题:
1. swap 页: 把 Swap 面板用 flex order 提到 K 线上方, 用户无需滚动到屏幕底部
2. swap 页: 链选择器触控区从 28px 提升到 40px (符合 iOS HIG / Material 最小触控规范)
3. home 页: 链 Tab + 时间窗组改成单行横滚, 不再换行占用多行高度
4. home 页: 行情表右侧加渐变阴影, 提示用户可横向滑动
5. detect 页: Hero 三栏统计在 360px 屏改成单列
6. account 页: Tab 栏触控高度 ≥ 40px
============================================================ */
/* === Swap 页核心: 移动端 Swap 面板置顶 === */
@media (max-width: 1023px) {
.swap-page-grid {
display: flex !important;
flex-direction: column !important;
gap: 1rem !important;
}
.swap-page-grid .swap-page-right {
order: 0 !important; /* Swap 面板 + 安全检测置顶 */
}
.swap-page-grid .swap-page-left {
order: 1 !important; /* K 线 + 交易历史下移 */
}
}
/* === 移动端 ≤767px: 五页通用强化 === */
@media (max-width: 767px) {
/* --- swap 页: 链选择器触控区放大 --- */
.chain-select-bar .chain-select {
min-height: 40px !important;
min-width: 40px !important;
padding: 0.375rem 0.5rem !important;
}
.chain-select-bar .chain-select .chain-icon {
width: 22px !important;
height: 22px !important;
font-size: 11px !important;
}
.chain-select-bar {
gap: 4px !important;
padding: 4px !important;
scroll-snap-type: x mandatory;
}
.chain-select-bar .chain-select { scroll-snap-align: start; }
/* --- swap 页: AVE 数据面板 max-h 降低, 让 Swap 面板有更多视窗 --- */
.ave-tab-pane.active {
max-height: 360px !important;
}
/* 横滚条始终可见, 提示可滑动 */
.ave-tab-pane.active::-webkit-scrollbar {
height: 4px;
}
.ave-tab-pane.active::-webkit-scrollbar-thumb {
background: rgba(99, 126, 255, 0.45);
border-radius: 2px;
}
.ave-tab-pane.active::-webkit-scrollbar-track {
background: rgba(99, 126, 255, 0.08);
}
/* --- home 页: 顶部筛选条 (链 + 时间窗) 强制单行横滚 ---
r117-fix1 (2026-05-04): 之前用 nowrap 但内层两个 flex 容器各自仍 nowrap,
滑动事件被内层容器吞掉. 改用 display: contents 把内层容器 "扁平化",
让所有按钮直接成为外层横滚容器的子元素, 滑动顺畅 */
.home-filter-bar {
flex-wrap: nowrap !important;
overflow-x: auto !important;
overflow-y: hidden !important;
-webkit-overflow-scrolling: touch !important;
scroll-snap-type: x proximity;
/* 防止内层 padding 折断滑动 */
padding-bottom: 4px;
/* iOS Safari touch fix */
touch-action: pan-x !important;
}
/* 关键: 内层 flex 容器 display:contents, 让按钮直接成为外层 flex 子项 */
.home-filter-bar .home-filter-inner {
display: contents !important;
}
/* 所有按钮 (.list-tab, .chain-tab, .tf-tab, #refresh-btn) 都不允许压缩 */
.home-filter-bar .list-tab,
.home-filter-bar .chain-tab,
.home-filter-bar .tf-tab,
.home-filter-bar #refresh-btn,
.home-filter-bar > div,
.home-filter-bar > button {
flex-shrink: 0 !important;
scroll-snap-align: start;
}
/* 移动端取消 ml-auto, 让所有按钮顺序排列, 不再被推到行尾 */
.home-filter-bar .ml-auto,
.home-filter-bar .md\:ml-6 {
margin-left: 4px !important;
}
.home-filter-bar::-webkit-scrollbar { height: 0; display: none; }
/* --- home 页: 行情表右侧渐变阴影提示横滚 --- */
.mobile-scroll-hint {
position: relative;
}
.mobile-scroll-hint > .overflow-x-auto::after {
content: '';
position: sticky;
right: 0;
top: 0;
bottom: 0;
width: 24px;
pointer-events: none;
z-index: 1;
}
.mobile-scroll-hint::after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 48px;
width: 28px;
background: linear-gradient(to right, transparent, rgba(11, 13, 26, 0.92));
pointer-events: none;
z-index: 2;
border-top-right-radius: 16px;
}
html[data-theme="light"] .mobile-scroll-hint::after {
background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.92));
}
/* --- detect 页: 搜索条内链选择器横滚 --- */
.detect-chain-bar {
-webkit-overflow-scrolling: touch;
}
.detect-chain-bar::-webkit-scrollbar { height: 0; display: none; }
.detect-search-card {
padding: 8px !important;
}
.detect-search-card #detect-input {
min-width: 0 !important;
width: 100% !important;
flex: 1 1 100% !important;
order: 1;
}
.detect-search-card .detect-chain-bar {
order: 0;
width: 100% !important;
}
.detect-search-card #detect-btn {
order: 2;
width: 100% !important;
}
/* --- account 页: Tab 栏触控区加大 --- */
.account-tab-bar {
-webkit-overflow-scrolling: touch;
scroll-snap-type: x proximity;
}
.account-tab-bar::-webkit-scrollbar { height: 0; display: none; }
.account-tab-bar .tab-btn {
min-height: 40px !important;
padding: 0.5rem 0.75rem !important;
scroll-snap-align: start;
}
/* --- ai-agent 页: 代码块横滚条可见 --- */
pre.overflow-x-auto::-webkit-scrollbar { height: 4px; }
pre.overflow-x-auto::-webkit-scrollbar-thumb {
background: rgba(99, 126, 255, 0.45);
border-radius: 2px;
}
}
/* === 极小屏 ≤480px: 进一步收紧 === */
@media (max-width: 480px) {
/* swap 页链选择器: 触控保持 40px, 但 padding 再收 */
.chain-select-bar .chain-select {
min-height: 40px !important;
min-width: 40px !important;
padding: 0.3125rem 0.375rem !important;
}
/* detect 页 Hero 统计 padding 收紧 */
.detect-stat-pill {
padding: 0.5rem 0.75rem !important;
}
/* account 页头像区在窄屏居中, 避免摄像头按钮触碰 */
.account-tab-bar .tab-btn span {
font-size: 0.75rem !important;
}
}
/* ═══════════════════════════════════════════════════════════════════
* r143c-test-fix (2026-05-16): 首页顶部筛选区 sticky 固定
* 测试反馈: "首页红色框部分需要固定住, 就算用户往下拉看代币, 只有代币在拉动"
*
* 覆盖区域:
* - hero-search (大搜索框)
* - home-tabs (行情 / 关注 / 热搜榜 / 新开盘 / 涨幅榜)
* - chain-filter-section (链筛选 + 时间窗 + 刷新)
* - search-filter-banner (URL ?q= 时显示)
*
* 行为:
* - desktop ≥768px : 整块 sticky, top:64px (导航栏高度)
* - mobile <768px : 只 sticky 后两条, 搜索框可滚走避免压底部 tabbar
* - 滚动时背景毛玻璃, 与下方代币列表保留视觉分离
*
* 注意: 不影响 500 条行情分页性能 (sticky 是 CSS 原生, 不挂 scroll handler)
* ═══════════════════════════════════════════════════════════════════ */
.home-sticky-header {
position: sticky;
top: 64px; /* 与全局 navbar 高度对齐 */
z-index: 30;
background: rgba(10, 14, 26, 0.92);
backdrop-filter: blur(12px) saturate(150%);
-webkit-backdrop-filter: blur(12px) saturate(150%);
margin-left: -1rem;
margin-right: -1rem;
padding: 0.75rem 1rem 0.5rem;
border-bottom: 1px solid rgba(99, 126, 255, 0.08);
/* 让 sticky 区底部有微妙过渡 */
box-shadow: 0 8px 24px -16px rgba(0, 0, 0, 0.6);
}
@media (min-width: 1024px) {
.home-sticky-header {
margin-left: -1.5rem;
margin-right: -1.5rem;
padding-left: 1.5rem;
padding-right: 1.5rem;
}
}
/* 移动端: 搜索框太占高度, sticky 时把搜索框隐藏(常驻顶部反而压低显示区);
只保留 home-tabs + chain-filter-section sticky */
@media (max-width: 767px) {
.home-sticky-header {
top: 56px;
padding-top: 0.5rem;
padding-bottom: 0.375rem;
}
/* 移动端 sticky 状态下, hero-search 进入 normal flow (随页面滚走) */
.home-sticky-header .hero-search-wrap {
position: static !important;
margin-bottom: 0.75rem !important;
}
/* 进一步压缩 sticky 区高度避免遮代币列表表头 */
.home-sticky-header #home-tabs,
.home-sticky-header #chain-filter-section {
margin-bottom: 0.5rem !important;
}
}
/* 兜底: 旧浏览器不支持 backdrop-filter 时, 用更深的不透明背景 */
@supports not ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))) {
.home-sticky-header {
background: rgba(10, 14, 26, 0.98);
}
}
/* ═══════════════════════════════════════════════════════════════════
* r159 (2026-05-20 用户反馈): 行情表头跟随首页顶部 sticky-header 吸顶
*
* 问题: 首页顶部的 hero-search / tabs / chain-filter 已经 sticky 在 top:64px,
* 但下面的 "# / 交易对 / 价格 / 5m% / 1h% / 24h% / 流动性 / 市值 /
* FDV / 24H 交易量 / 24H 交易 / 创建 / 操作" 会随页面滚动消失.
*
* 修法: 让 thead th 也对 window sticky, top = home-sticky-header 实际底部 y 值
* (由 home.js 实时写到 CSS 变量 --market-thead-top)
*
* 阻碍 sticky 生效的两个祖先 overflow 都要清理:
* 1) #market-table .card 原本 overflow:hidden → 仅给 .market-table-sticky-fix 改 visible
* (为了不破坏 card 圆角视觉, 保留 border-radius + 给内层 .market-table-scroll-x 圆角)
* 2) .overflow-x-auto 会让 overflow-y 也变 auto → 用 .market-table-scroll-x 替代,
* 显式 overflow-x:auto + overflow-y:visible
*
* 注意:
* - 表头自己的横向 sticky (action-col) 仍然由 .data-table thead th.action-col 控制, 不冲突
* - z-index 关系: home-sticky-header z:30 > thead th z:10 > action-col z:11 (thead) / z:5 (tbody)
* 要让 home-sticky-header 在最上面盖住 thead, 30 > 10/11 ✓
* - 移动端 sticky-header 高度变化时, JS 也会实时刷新 --market-thead-top
* - 不在窗口宽 < 768px 时强制 thead sticky (移动端横向有滚动条, sticky 体验差),
* 用 @media (min-width: 768px) gate
* ═══════════════════════════════════════════════════════════════════ */
.market-table-sticky-fix {
overflow: visible !important;
/* card 原本 overflow:hidden 是为了圆角 — 这里靠 border-radius + isolation 保持视觉 */
isolation: isolate;
}
.market-table-scroll-x {
/* 视口 < 1200px 时表格 min-w:1200px 会溢出 → 需要横向滚动 wrapper.
视口 >= 1200px 时表格不溢出 → 切回 overflow:visible 让 thead sticky 真正生效.
注意 CSS 规范陷阱: 当 overflow-x:auto 且 overflow-y:visible 时, 浏览器会把
overflow-y 隐式提升为 auto, 即两轴只能同时为 visible 或同时为非 visible.
所以 sticky 想生效, 必须保证容器两轴都是 visible. */
overflow-x: auto;
overflow-y: auto; /* fallback for old browsers - 会被下面 @media 覆盖 */
border-radius: inherit;
}
/* 桌面端 >= 1200px: 表格不会溢出容器, 安全切到 overflow:visible 让 thead sticky 生效 */
@media (min-width: 1200px) {
.market-table-scroll-x {
overflow: visible;
}
}
/* 桌面端: thead 对 window sticky, 紧贴 home-sticky-header 底部
*
* ⚠️ 关键修复 (r159 第二轮): .data-table th.sortable 在 line 2664 把 position
* 重置成了 relative (为了 ::after 排序箭头), 这会让中间 9 列 (价格 / 5m% / 1h%
* / 24h% / 流动性 / 市值 / FDV / 24H交易量 / 24H交易 / 创建) 不再 sticky.
* 第 0/1 列 (# / 交易对) 和最后一列 (操作) 没有 .sortable 类, 所以仍是 sticky.
*
* 修法: 在 .market-table-sticky-fix 作用域内, 强制把所有 thead th
* (包括 th.sortable) 都设回 position: sticky. ::after 用 margin-left 偏移,
* 不依赖父级 position:relative, 切回 sticky 不影响排序箭头视觉.
*/
@media (min-width: 768px) {
.market-table-sticky-fix .data-table thead th,
.market-table-sticky-fix .data-table thead th.sortable {
position: sticky; /* 关键: 覆盖 th.sortable 的 position:relative */
top: var(--market-thead-top, 64px);
/* 提高 z-index 让 thead 始终盖在 tbody 上, 但低于 home-sticky-header (z:30) */
z-index: 20;
/* 增强表头背景不透明度, 避免滚动时下方文字穿透 */
background: rgba(18, 21, 42, 0.98);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.market-table-sticky-fix .data-table thead th.action-col {
z-index: 21; /* 比普通 sticky 表头高 1 层, 横向 sticky 仍有效 */
background: linear-gradient(90deg, transparent 0, rgba(18, 21, 42, 0.98) 12px, rgba(18, 21, 42, 1) 100%);
}
}
/* 移动端: 容器内有横向滚动条, thead 不强制对 window sticky 避免视觉错位 */
@media (max-width: 767px) {
.market-table-sticky-fix .data-table thead th,
.market-table-sticky-fix .data-table thead th.sortable {
position: sticky; /* 移动端也要保证 sortable 列 sticky */
top: 0;
z-index: 10;
}
}
/* ============================================================
激光 DEX 品牌增强层 (R200)
覆盖关键品牌位：Logo / 标题 / 主 CTA / 激光光束
============================================================ */
/* 激光渐变文字 (用于品牌名、Hero 主标题) */
.laser-text {
background: var(--gradient-laser);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: transparent;
}
/* Logo Mark - 用激光渐变胶囊替代原绿底 */
.logo-mark {
background: var(--gradient-laser);
box-shadow: var(--shadow-glow-laser);
color: #fff;
}
/* Admin 登录页 Logo (覆盖内联 background) */
.admin-login-logo {
background: var(--gradient-laser) !important;
box-shadow: var(--shadow-glow-laser) !important;
color: #fff !important;
}
/* 主 CTA 按钮 - 激光渐变 */
.btn-laser, .btn-primary-laser {
background: var(--gradient-laser);
color: #fff;
border: none;
border-radius: 0.75rem;
padding: 0.75rem 1.5rem;
font-weight: 700;
letter-spacing: 0.02em;
box-shadow: var(--shadow-glow-laser);
transition: transform 0.2s, box-shadow 0.2s, filter 0.2s;
cursor: pointer;
}
.btn-laser:hover, .btn-primary-laser:hover {
transform: translateY(-1px);
box-shadow: 0 6px 32px rgba(124, 58, 237, 0.55), 0 0 18px rgba(6, 182, 212, 0.4);
filter: brightness(1.08);
}
/* 激光光束扫描动画 (用于 Hero 区) */
@keyframes laser-sweep {
0% { transform: translateX(-100%) skewX(-20deg); opacity: 0; }
10% { opacity: 0.6; }
90% { opacity: 0.6; }
100% { transform: translateX(120%) skewX(-20deg); opacity: 0; }
}
.laser-beam {
position: relative;
overflow: hidden;
}
.laser-beam::after {
content: '';
position: absolute;
top: 0; left: 0;
width: 30%; height: 100%;
background: linear-gradient(90deg, transparent, rgba(124, 58, 237, 0.35), rgba(6, 182, 212, 0.35), transparent);
animation: laser-sweep 3.5s ease-in-out infinite;
pointer-events: none;
}
/* Hero 区品牌渐变背景光晕 */
.hero-laser-bg {
background:
radial-gradient(ellipse 70% 60% at 0% 0%, rgba(59, 130, 246, 0.12), transparent 70%),
radial-gradient(ellipse 70% 60% at 100% 100%, rgba(124, 58, 237, 0.12), transparent 70%),
radial-gradient(ellipse 50% 40% at 50% 50%, rgba(6, 182, 212, 0.08), transparent 80%);
}
/* 网格背景纹理 (微细赛博网格) */
.cyber-grid {
background-image:
linear-gradient(rgba(124, 58, 237, 0.06) 1px, transparent 1px),
linear-gradient(90deg, rgba(124, 58, 237, 0.06) 1px, transparent 1px);
background-size: 32px 32px;
}
/* 边框发光 (用于重点卡片) */
.laser-border {
position: relative;
border-radius: 0.75rem;
background: var(--color-bg-card);
}
.laser-border::before {
content: '';
position: absolute;
inset: 0;
padding: 1px;
background: var(--gradient-laser);
border-radius: inherit;
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
/* 选中文本激光紫 */
::selection {
background: rgba(124, 58, 237, 0.45);
color: #fff;
}
/* ═══════════════════════════════════════════════════════════════════════════
v1.2 HOMEPAGE REDESIGN — JDEX Variable Namespace + Hero/Sections
═══════════════════════════════════════════════════════════════════════════ */
:root {
/* JDEX 品牌色系 (v1.2) */
--jdex-bg: #0A0E1A;
--jdex-card: #0F172A;
--jdex-blue: #3B82F6;
--jdex-purple: #7C3AED;
--jdex-cyan: #22D3EE;
--jdex-text: #E5E7EB;
--jdex-muted: #9CA3AF;
--jdex-border: rgba(59, 130, 246, 0.18);
--jdex-glow-blue: 0 0 24px rgba(59, 130, 246, 0.45);
--jdex-glow-purple: 0 0 24px rgba(124, 58, 237, 0.45);
--jdex-gradient: linear-gradient(135deg, #3B82F6 0%, #7C3AED 50%, #22D3EE 100%);
}
/* ────────── JDEX Hero Section ────────── */
.jdex-hero {
position: relative;
overflow: hidden;
background: var(--jdex-bg);
padding: 56px 16px 48px;
}
.jdex-hero::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 70% 55% at 18% 20%, rgba(59, 130, 246, 0.22), transparent 60%),
radial-gradient(ellipse 60% 50% at 82% 30%, rgba(124, 58, 237, 0.20), transparent 60%),
radial-gradient(ellipse 80% 60% at 50% 110%, rgba(34, 211, 238, 0.14), transparent 60%);
pointer-events: none;
z-index: 0;
}
/* 激光扫光动画 */
.jdex-hero::after {
content: '';
position: absolute;
top: 0; left: -30%;
width: 60%;
height: 100%;
background: linear-gradient(115deg,
transparent 40%,
rgba(34, 211, 238, 0.08) 48%,
rgba(59, 130, 246, 0.18) 50%,
rgba(34, 211, 238, 0.08) 52%,
transparent 60%);
transform: skewX(-12deg);
animation: jdex-laser-sweep 6s ease-in-out infinite;
pointer-events: none;
z-index: 1;
}
@keyframes jdex-laser-sweep {
0% { transform: translateX(-20%) skewX(-12deg); opacity: 0; }
20% { opacity: 1; }
80% { opacity: 1; }
100% { transform: translateX(220%) skewX(-12deg); opacity: 0; }
}
.jdex-hero-inner {
position: relative;
z-index: 2;
max-width: 1280px;
margin: 0 auto;
text-align: center;
}
.jdex-hero-logo {
display: inline-block;
margin: 0 auto 20px;
max-width: 100%;
}
.jdex-hero-logo img {
height: 96px;
width: auto;
filter: drop-shadow(0 0 22px rgba(59, 130, 246, 0.45));
}
@media (max-width: 768px) {
.jdex-hero-logo img { height: 64px; }
}
.jdex-hero-title {
font-size: clamp(34px, 6vw, 72px);
font-weight: 900;
line-height: 1.1;
letter-spacing: -0.02em;
margin: 0 0 14px;
background: var(--jdex-gradient);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
}
.jdex-hero-slogan {
font-size: clamp(22px, 3.4vw, 38px);
font-weight: 700;
color: var(--jdex-text);
margin: 0 0 8px;
letter-spacing: 0.02em;
}
.jdex-hero-slogan-en {
font-size: clamp(14px, 1.4vw, 18px);
font-weight: 500;
color: var(--jdex-cyan);
letter-spacing: 0.05em;
margin: 0 0 18px;
opacity: 0.85;
}
.jdex-hero-subtitle {
font-size: clamp(14px, 1.4vw, 17px);
color: var(--jdex-muted);
margin: 0 0 28px;
line-height: 1.6;
}
.jdex-hero-cta-row {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 14px;
margin-bottom: 22px;
}
.jdex-btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 32px;
font-size: 16px;
font-weight: 700;
border-radius: 12px;
border: none;
cursor: pointer;
text-decoration: none;
transition: transform 0.2s, box-shadow 0.2s, filter 0.2s;
white-space: nowrap;
min-height: 48px;
}
.jdex-btn-primary {
background: var(--jdex-blue);
color: #fff;
box-shadow: 0 2px 8px rgba(59, 130, 246, 0.25);
}
.jdex-btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 6px 24px rgba(59, 130, 246, 0.55), 0 0 32px rgba(59, 130, 246, 0.35);
filter: brightness(1.08);
}
.jdex-btn-secondary {
background: var(--jdex-purple);
color: #fff;
box-shadow: 0 2px 8px rgba(124, 58, 237, 0.25);
}
.jdex-btn-secondary:hover {
transform: translateY(-2px);
box-shadow: 0 6px 24px rgba(124, 58, 237, 0.55), 0 0 32px rgba(124, 58, 237, 0.35);
filter: brightness(1.1);
}
.jdex-hero-disclaimer {
font-size: 12px;
color: var(--jdex-muted);
opacity: 0.7;
max-width: 760px;
margin: 18px auto 0;
line-height: 1.6;
padding: 0 16px;
}
/* ────────── JDEX Section Common ────────── */
.jdex-section {
position: relative;
padding: 56px 16px;
max-width: 1280px;
margin: 0 auto;
}
.jdex-section-title {
font-size: clamp(24px, 3.2vw, 34px);
font-weight: 800;
color: var(--jdex-text);
text-align: center;
margin: 0 0 10px;
letter-spacing: -0.01em;
}
.jdex-section-subtitle {
font-size: clamp(13px, 1.3vw, 15px);
color: var(--jdex-muted);
text-align: center;
margin: 0 0 36px;
}
/* ────────── JDEX Core Feature Cards (4 cards) ────────── */
.jdex-feature-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 20px;
}
@media (min-width: 1024px) {
.jdex-feature-grid { grid-template-columns: repeat(4, 1fr); }
}
.jdex-feature-card {
position: relative;
background: var(--jdex-card);
border: 1px solid var(--jdex-border);
border-radius: 16px;
padding: 28px 22px;
text-decoration: none;
color: inherit;
display: flex;
flex-direction: column;
transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s, background 0.25s;
overflow: hidden;
}
.jdex-feature-card::before {
content: '';
position: absolute;
top: 0; left: 0;
right: 0;
height: 2px;
background: var(--jdex-gradient);
opacity: 0.6;
transition: opacity 0.25s;
}
.jdex-feature-card:hover {
transform: translateY(-4px);
border-color: rgba(59, 130, 246, 0.55);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), 0 0 22px rgba(59, 130, 246, 0.18);
background: linear-gradient(180deg, #111d36 0%, var(--jdex-card) 100%);
}
.jdex-feature-card:hover::before { opacity: 1; }
.jdex-feature-icon {
width: 56px; height: 56px;
border-radius: 14px;
display: flex; align-items: center; justify-content: center;
font-size: 24px;
margin-bottom: 18px;
background: linear-gradient(135deg, rgba(59, 130, 246, 0.18), rgba(124, 58, 237, 0.18));
border: 1px solid var(--jdex-border);
color: var(--jdex-cyan);
}
.jdex-feature-card[data-color="blue"] .jdex-feature-icon { color: var(--jdex-blue); background: linear-gradient(135deg, rgba(59, 130, 246, 0.25), rgba(59, 130, 246, 0.08)); }
.jdex-feature-card[data-color="purple"] .jdex-feature-icon { color: var(--jdex-purple); background: linear-gradient(135deg, rgba(124, 58, 237, 0.25), rgba(124, 58, 237, 0.08)); }
.jdex-feature-card[data-color="cyan"] .jdex-feature-icon { color: var(--jdex-cyan); background: linear-gradient(135deg, rgba(34, 211, 238, 0.25), rgba(34, 211, 238, 0.08)); }
.jdex-feature-card[data-color="pink"] .jdex-feature-icon { color: #F472B6; background: linear-gradient(135deg, rgba(244, 114, 182, 0.25), rgba(244, 114, 182, 0.08)); }
.jdex-feature-title {
font-size: 20px;
font-weight: 800;
color: var(--jdex-text);
margin: 0 0 10px;
}
.jdex-feature-desc {
font-size: 14px;
line-height: 1.65;
color: var(--jdex-muted);
margin: 0 0 18px;
flex: 1;
}
.jdex-feature-cta {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 700;
color: var(--jdex-cyan);
}
.jdex-feature-card:hover .jdex-feature-cta { color: #5EEAFD; }
.jdex-feature-cta i { transition: transform 0.2s; }
.jdex-feature-card:hover .jdex-feature-cta i { transform: translateX(4px); }
/* ────────── JDEX Trust Section (4 horizontal cards) ────────── */
.jdex-trust-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 16px;
}
@media (min-width: 1024px) {
.jdex-trust-grid { grid-template-columns: repeat(4, 1fr); }
}
.jdex-trust-card {
background: var(--jdex-card);
border: 1px solid var(--jdex-border);
border-radius: 14px;
padding: 22px 20px;
display: flex;
gap: 14px;
align-items: flex-start;
transition: border-color 0.25s, transform 0.25s;
}
.jdex-trust-card:hover {
border-color: rgba(124, 58, 237, 0.45);
transform: translateY(-2px);
}
.jdex-trust-icon {
flex-shrink: 0;
width: 40px; height: 40px;
border-radius: 10px;
display: flex; align-items: center; justify-content: center;
font-size: 18px;
background: linear-gradient(135deg, rgba(59, 130, 246, 0.18), rgba(124, 58, 237, 0.18));
color: var(--jdex-cyan);
}
.jdex-trust-title {
font-size: 16px;
font-weight: 700;
color: var(--jdex-text);
margin: 0 0 4px;
}
.jdex-trust-desc {
font-size: 13px;
color: var(--jdex-muted);
line-height: 1.55;
margin: 0;
}
/* ────────── JDEX Trending Section ────────── */
.jdex-trending-header {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 24px;
}
.jdex-trending-header .jdex-section-title { text-align: left; margin: 0; }
.jdex-view-all {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 18px;
font-size: 14px;
font-weight: 600;
color: var(--jdex-cyan);
background: rgba(34, 211, 238, 0.08);
border: 1px solid rgba(34, 211, 238, 0.28);
border-radius: 10px;
text-decoration: none;
transition: background 0.2s, border-color 0.2s;
}
.jdex-view-all:hover {
background: rgba(34, 211, 238, 0.14);
border-color: rgba(34, 211, 238, 0.55);
}
/* ────────── Mobile guard: no horizontal scroll ────────── */
@media (max-width: 768px) {
body { overflow-x: hidden; }
.jdex-hero { padding: 36px 14px 36px; }
.jdex-section { padding: 40px 14px; }
.jdex-feature-card { padding: 22px 18px; }
}
/* ============================================================
v1.3 Stage 1 — /swap Hub 入口页 (SwapHub) 样式
作用范围: 仅 swap-hub.tsx 中使用的 .swap-* 与共享 .jdex-modal*
设计原则: 沿用 v1.2 --jdex-* 设计系统, 不影响原有 token 详情页
============================================================ */
/* --- 主网格布局: 左 Swap 卡 + 右侧面板 --- */
.swap-hub-grid {
max-width: 1200px;
margin: 0 auto;
padding: 0 16px;
display: grid;
grid-template-columns: minmax(0, 1fr) 360px;
gap: 24px;
align-items: start;
}
@media (max-width: 960px) {
.swap-hub-grid {
grid-template-columns: 1fr;
gap: 18px;
padding: 0 12px;
}
}
/* --- Swap 主卡片 --- */
.swap-card {
background: linear-gradient(180deg, rgba(15, 23, 42, 0.96) 0%, rgba(10, 14, 26, 0.96) 100%);
border: 1px solid var(--jdex-border);
border-radius: 20px;
padding: 22px 22px 24px;
box-shadow: 0 8px 40px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.04);
position: relative;
overflow: hidden;
}
.swap-card::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(800px 200px at 50% -100px, rgba(59, 130, 246, 0.15), transparent 60%);
pointer-events: none;
}
.swap-card > * { position: relative; z-index: 1; }
.swap-card-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 18px;
}
.swap-card-title {
font-size: 18px;
font-weight: 800;
color: var(--jdex-text);
display: flex;
align-items: center;
gap: 10px;
margin: 0;
}
.swap-card-title i {
color: var(--jdex-blue);
filter: drop-shadow(0 0 8px rgba(59, 130, 246, 0.6));
}
.swap-icon-btn {
width: 36px; height: 36px;
border-radius: 10px;
border: 1px solid var(--jdex-border);
background: rgba(255, 255, 255, 0.02);
color: var(--jdex-muted);
display: inline-flex; align-items: center; justify-content: center;
cursor: pointer;
transition: all .2s ease;
}
.swap-icon-btn:hover {
color: var(--jdex-blue);
border-color: rgba(59, 130, 246, 0.5);
background: rgba(59, 130, 246, 0.08);
}
.swap-row { margin-bottom: 16px; }
.swap-label {
display: block;
font-size: 12px;
font-weight: 600;
color: var(--jdex-muted);
letter-spacing: 0.04em;
margin-bottom: 8px;
text-transform: uppercase;
}
/* --- 链选择按钮组 --- */
.swap-chain-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(82px, 1fr));
gap: 8px;
}
.swap-chain-pill {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 9px 10px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.02);
border: 1px solid var(--jdex-border);
color: var(--jdex-text);
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: all .18s ease;
white-space: nowrap;
}
.swap-chain-pill:hover {
background: rgba(59, 130, 246, 0.08);
border-color: rgba(59, 130, 246, 0.4);
}
.swap-chain-pill.active {
background: linear-gradient(135deg, rgba(59, 130, 246, 0.22), rgba(124, 58, 237, 0.18));
border-color: var(--jdex-blue);
color: #fff;
box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.35), 0 4px 14px rgba(59, 130, 246, 0.25);
}
/* --- 支付/获得 模块 --- */
.swap-pay-block {
background: rgba(255, 255, 255, 0.025);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 14px;
padding: 14px 14px 12px;
margin-bottom: 8px;
transition: border-color .2s ease;
}
.swap-pay-block:focus-within {
border-color: rgba(59, 130, 246, 0.5);
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}
.swap-pay-label {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 12px;
color: var(--jdex-muted);
margin-bottom: 8px;
}
.swap-balance { font-size: 11px; }
.swap-balance span { color: var(--jdex-text); }
.swap-pay-input-row {
display: flex;
align-items: center;
gap: 10px;
}
.swap-amount-input {
flex: 1;
background: transparent;
border: none;
outline: none;
color: var(--jdex-text);
font-size: 28px;
font-weight: 700;
font-variant-numeric: tabular-nums;
min-width: 0;
padding: 0;
}
.swap-amount-input::placeholder { color: rgba(156, 163, 175, 0.5); }
.swap-token-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
background: rgba(59, 130, 246, 0.12);
border: 1px solid rgba(59, 130, 246, 0.3);
border-radius: 999px;
color: var(--jdex-text);
font-weight: 700;
font-size: 14px;
cursor: pointer;
transition: all .2s ease;
white-space: nowrap;
flex-shrink: 0;
}
.swap-token-btn:hover {
background: rgba(59, 130, 246, 0.22);
border-color: var(--jdex-blue);
transform: translateY(-1px);
}
.swap-token-icon {
width: 22px; height: 22px;
border-radius: 50%;
background: linear-gradient(135deg, #3B82F6, #22D3EE);
display: inline-flex; align-items: center; justify-content: center;
color: #fff;
font-size: 10px;
}
.swap-token-icon-purple {
background: linear-gradient(135deg, #7C3AED, #EC4899);
}
.swap-pay-meta {
display: flex;
align-items: center;
gap: 6px;
margin-top: 10px;
flex-wrap: wrap;
}
.swap-quick-pct {
padding: 4px 10px;
border-radius: 6px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.02);
color: var(--jdex-muted);
font-size: 11px;
font-weight: 600;
cursor: pointer;
transition: all .15s ease;
}
.swap-quick-pct:hover {
color: var(--jdex-blue);
border-color: rgba(59, 130, 246, 0.4);
background: rgba(59, 130, 246, 0.08);
}
.swap-quick-pct.active {
background: rgba(59, 130, 246, 0.2);
border-color: var(--jdex-blue);
color: #fff;
}
.swap-usd-est {
margin-left: auto;
font-size: 12px;
color: var(--jdex-muted);
font-variant-numeric: tabular-nums;
}
/* --- 翻转按钮 --- */
.swap-flip-wrap {
display: flex;
justify-content: center;
margin: -6px 0;
position: relative;
z-index: 2;
}
.swap-flip-btn {
width: 40px; height: 40px;
border-radius: 12px;
background: linear-gradient(135deg, #1e293b, #0f172a);
border: 2px solid var(--jdex-bg);
color: var(--jdex-blue);
font-size: 14px;
display: inline-flex; align-items: center; justify-content: center;
cursor: pointer;
transition: all .25s cubic-bezier(.4,.0,.2,1);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}
.swap-flip-btn:hover {
transform: rotate(180deg);
background: linear-gradient(135deg, var(--jdex-blue), var(--jdex-purple));
color: #fff;
box-shadow: 0 0 24px rgba(59, 130, 246, 0.55);
}
/* --- 报价摘要 --- */
.swap-quote-summary {
margin-top: 14px;
padding: 12px 14px;
border-radius: 12px;
background: rgba(0, 0, 0, 0.25);
border: 1px solid rgba(255, 255, 255, 0.05);
}
.swap-quote-row {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 13px;
padding: 5px 0;
color: var(--jdex-muted);
}
.swap-quote-row span:last-child {
color: var(--jdex-text);
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.swap-quote-row i { margin-right: 6px; opacity: 0.7; }
/* --- 主 CTA --- */
.swap-primary-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
margin-top: 16px;
padding: 15px 20px;
border: none;
border-radius: 14px;
background: var(--jdex-gradient);
color: #fff;
font-weight: 800;
font-size: 15px;
letter-spacing: 0.02em;
cursor: pointer;
transition: all .25s ease;
box-shadow: 0 6px 24px rgba(59, 130, 246, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.swap-primary-btn:hover {
transform: translateY(-2px);
box-shadow: 0 10px 32px rgba(59, 130, 246, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
}
.swap-primary-btn:disabled {
opacity: 0.55;
cursor: not-allowed;
transform: none;
}
.swap-foot-hint {
margin-top: 12px;
font-size: 11px;
color: var(--jdex-muted);
text-align: center;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
}
.swap-foot-hint i { color: var(--jdex-cyan); }
/* --- 右侧面板 --- */
.swap-side {
display: flex;
flex-direction: column;
gap: 16px;
}
.swap-side-card {
background: rgba(15, 23, 42, 0.85);
border: 1px solid var(--jdex-border);
border-radius: 16px;
padding: 18px 18px 16px;
}
.swap-side-card-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 14px;
}
.swap-side-card-header h4 {
font-size: 14px;
font-weight: 700;
color: var(--jdex-text);
display: flex; align-items: center; gap: 8px;
margin: 0;
}
.swap-side-card-header h4 i {
color: var(--jdex-cyan);
font-size: 13px;
}
.swap-side-link {
font-size: 12px;
color: var(--jdex-blue);
text-decoration: none;
transition: color .15s ease;
}
.swap-side-link:hover { color: var(--jdex-cyan); text-decoration: underline; }
.swap-recent-list {
display: flex;
flex-direction: column;
gap: 8px;
min-height: 120px;
}
.swap-recent-empty {
display: flex; flex-direction: column;
align-items: center; justify-content: center;
text-align: center;
padding: 24px 12px;
color: var(--jdex-muted);
font-size: 13px;
gap: 6px;
}
.swap-recent-empty p { margin: 0; }
.swap-recent-empty-sub {
font-size: 11px;
color: rgba(156, 163, 175, 0.65);
}
.swap-recent-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 12px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.04);
font-size: 12px;
}
.swap-recent-item:hover {
background: rgba(59, 130, 246, 0.06);
border-color: rgba(59, 130, 246, 0.2);
}
.swap-recent-item-left { display: flex; flex-direction: column; gap: 2px; }
.swap-recent-item-pair { color: var(--jdex-text); font-weight: 600; }
.swap-recent-item-time { color: var(--jdex-muted); font-size: 10px; }
.swap-recent-item-right { text-align: right; }
.swap-recent-item-amt { color: var(--jdex-text); font-variant-numeric: tabular-nums; font-weight: 600; }
.swap-recent-item-status { font-size: 10px; padding: 1px 6px; border-radius: 4px; }
.swap-recent-item-status.ok { background: rgba(34, 197, 94, 0.15); color: #4ade80; }
.swap-recent-item-status.pending { background: rgba(251, 191, 36, 0.15); color: #fbbf24; }
.swap-recent-item-status.fail { background: rgba(239, 68, 68, 0.15); color: #f87171; }
.swap-tips-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 9px;
}
.swap-tips-list li {
display: flex;
align-items: flex-start;
gap: 9px;
font-size: 12.5px;
line-height: 1.5;
color: var(--jdex-text);
}
.swap-tips-list li i {
color: var(--jdex-cyan);
font-size: 12px;
margin-top: 3px;
flex-shrink: 0;
}
/* --- Demo Notice 条 --- */
.swap-demo-notice {
max-width: 1200px;
margin: 26px auto 0;
padding: 12px 18px;
border-radius: 12px;
background: rgba(34, 211, 238, 0.06);
border: 1px solid rgba(34, 211, 238, 0.25);
color: var(--jdex-text);
font-size: 12.5px;
display: flex;
align-items: center;
gap: 10px;
line-height: 1.5;
}
.swap-demo-notice i { color: var(--jdex-cyan); font-size: 14px; flex-shrink: 0; }
/* ============================================================
通用 Modal (jdex-modal) - 供 /swap, /detect, /launch 复用
============================================================ */
.jdex-modal {
position: fixed; inset: 0;
z-index: 200;
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
}
.jdex-modal.hidden { display: none; }
.jdex-modal-backdrop {
position: absolute; inset: 0;
background: rgba(2, 6, 23, 0.78);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.jdex-modal-content {
position: relative;
width: 100%;
max-width: 460px;
max-height: calc(100vh - 40px);
overflow-y: auto;
background: linear-gradient(180deg, #0F172A 0%, #0A0E1A 100%);
border: 1px solid var(--jdex-border);
border-radius: 18px;
box-shadow: 0 24px 80px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(59, 130, 246, 0.1);
animation: jdex-modal-in .25s cubic-bezier(.4,0,.2,1);
}
@keyframes jdex-modal-in {
from { opacity: 0; transform: scale(0.96) translateY(8px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
.jdex-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px 12px;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.jdex-modal-header h3 {
font-size: 16px;
font-weight: 700;
color: var(--jdex-text);
margin: 0;
}
.jdex-modal-close {
width: 32px; height: 32px;
border-radius: 8px;
border: none;
background: rgba(255, 255, 255, 0.04);
color: var(--jdex-muted);
cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
transition: all .15s ease;
}
.jdex-modal-close:hover {
background: rgba(239, 68, 68, 0.12);
color: #f87171;
}
.jdex-modal-body { padding: 18px 20px 22px; }
/* --- 设置 Modal --- */
.swap-settings-content { max-width: 420px; }
.swap-settings-label {
display: block;
font-size: 12px;
font-weight: 600;
color: var(--jdex-muted);
text-transform: uppercase;
letter-spacing: 0.04em;
margin-bottom: 10px;
}
.swap-slippage-row {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.swap-slippage-preset {
padding: 8px 14px;
border-radius: 10px;
border: 1px solid var(--jdex-border);
background: rgba(255, 255, 255, 0.02);
color: var(--jdex-text);
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: all .15s ease;
}
.swap-slippage-preset:hover {
border-color: rgba(59, 130, 246, 0.5);
background: rgba(59, 130, 246, 0.06);
}
.swap-slippage-preset.active {
border-color: var(--jdex-blue);
background: rgba(59, 130, 246, 0.18);
color: #fff;
}
.swap-slippage-row input[type="number"],
.swap-deadline-row input[type="number"] {
flex: 1;
min-width: 80px;
padding: 8px 12px;
border-radius: 10px;
border: 1px solid var(--jdex-border);
background: rgba(0, 0, 0, 0.3);
color: var(--jdex-text);
font-size: 13px;
outline: none;
font-variant-numeric: tabular-nums;
}
.swap-slippage-row input[type="number"]:focus,
.swap-deadline-row input[type="number"]:focus {
border-color: var(--jdex-blue);
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}
.swap-settings-hint {
margin: 10px 0 0;
font-size: 11.5px;
color: var(--jdex-muted);
line-height: 1.5;
}
.swap-deadline-row {
display: flex;
align-items: center;
gap: 10px;
}
.swap-deadline-row span { color: var(--jdex-muted); font-size: 13px; }
/* --- Token 选择 Modal --- */
.swap-token-content { max-width: 480px; }
.swap-token-search {
position: relative;
margin-bottom: 14px;
}
.swap-token-search i {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
color: var(--jdex-muted);
font-size: 13px;
}
.swap-token-search input {
width: 100%;
padding: 11px 14px 11px 38px;
border-radius: 12px;
border: 1px solid var(--jdex-border);
background: rgba(0, 0, 0, 0.3);
color: var(--jdex-text);
font-size: 13.5px;
outline: none;
}
.swap-token-search input:focus {
border-color: var(--jdex-blue);
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}
.swap-token-popular { margin-bottom: 12px; }
.swap-token-popular-label {
font-size: 11px;
font-weight: 600;
color: var(--jdex-muted);
text-transform: uppercase;
letter-spacing: 0.04em;
margin-bottom: 8px;
}
.swap-token-popular-row {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.swap-token-popular-btn {
padding: 6px 12px;
border-radius: 999px;
border: 1px solid var(--jdex-border);
background: rgba(255, 255, 255, 0.02);
color: var(--jdex-text);
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: all .15s ease;
}
.swap-token-popular-btn:hover {
background: rgba(59, 130, 246, 0.12);
border-color: var(--jdex-blue);
}
.swap-token-list {
display: flex;
flex-direction: column;
gap: 4px;
max-height: 360px;
overflow-y: auto;
}
.swap-token-list-item {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
border-radius: 10px;
border: 1px solid transparent;
background: transparent;
cursor: pointer;
transition: all .15s ease;
text-align: left;
width: 100%;
}
.swap-token-list-item:hover {
background: rgba(59, 130, 246, 0.06);
border-color: rgba(59, 130, 246, 0.2);
}
.swap-token-list-icon {
width: 32px; height: 32px;
border-radius: 50%;
background: linear-gradient(135deg, #3B82F6, #22D3EE);
display: inline-flex; align-items: center; justify-content: center;
color: #fff;
font-size: 12px;
flex-shrink: 0;
}
.swap-token-list-meta { flex: 1; min-width: 0; }
.swap-token-list-sym {
color: var(--jdex-text);
font-weight: 700;
font-size: 14px;
}
.swap-token-list-name {
color: var(--jdex-muted);
font-size: 11.5px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.swap-token-list-right { text-align: right; flex-shrink: 0; }
.swap-token-list-bal {
color: var(--jdex-text);
font-size: 13px;
font-variant-numeric: tabular-nums;
font-weight: 600;
}
.swap-token-list-addr {
color: var(--jdex-muted);
font-size: 10.5px;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
/* --- 移动端调整 --- */
@media (max-width: 640px) {
.swap-card { padding: 18px 16px 20px; border-radius: 16px; }
.swap-card-title { font-size: 16px; }
.swap-amount-input { font-size: 24px; }
.swap-chain-grid { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px; }
.swap-chain-pill { padding: 7px 8px; font-size: 11px; }
.swap-side-card { padding: 16px 14px; }
.jdex-modal-content { border-radius: 14px; }
.jdex-modal-header { padding: 14px 16px 10px; }
.jdex-modal-body { padding: 14px 16px 18px; }
}
/* ===========================================================================
v1.3 vFinal — 视觉系统改造 (品牌规范 v1.0 对齐)
决策: A2 (默认深色 + 浅色可选) / B1 (按钮纯色) / C2 (保留金融语义色)
作用范围: 全站, 通过追加位置 + 选择器特异性, 覆盖此前 jdex-* 与渐变规则
=========================================================================== */
/* ---- vFinal 品牌色 token (与 v1.2 --jdex-* 共存, 提供别名) ---- */
:root {
--vf-bg-primary: #0A0E1A;
--vf-bg-secondary: #1E1B4B;
--vf-text-primary: #F1F5F9;
--vf-text-secondary: #94A3B8;
--vf-brand-blue: #3B82F6;
--vf-brand-blue-hover: #2563EB;
--vf-accent-purple: #7C3AED;
--vf-accent-cyan: #22D3EE;
--vf-card-border: #334155;
/* 金融语义色 (低饱和, 非荧光) */
--vf-green: #10B981; /* 涨 / 成功 / 低风险 (从荧光 #4ade80 降饱和) */
--vf-green-bg: rgba(16, 185, 129, 0.12);
--vf-red: #EF4444; /* 跌 / 失败 / 高风险 */
--vf-red-bg: rgba(239, 68, 68, 0.12);
--vf-amber: #F59E0B; /* 中风险 / 待处理 */
--vf-amber-bg: rgba(245, 158, 11, 0.12);
}
html[data-theme="light"] {
--vf-bg-primary: #F8FAFC;
--vf-bg-secondary: #FFFFFF;
--vf-text-primary: #0F172A;
--vf-text-secondary: #64748B;
--vf-card-border: #E2E8F0;
--vf-green: #059669; /* 浅色模式语义色 (略深, 保对比度) */
--vf-green-bg: rgba(5, 150, 105, 0.10);
--vf-red: #DC2626;
--vf-red-bg: rgba(220, 38, 38, 0.10);
--vf-amber: #D97706;
--vf-amber-bg: rgba(217, 119, 6, 0.10);
}
/* ---- vFinal 统一按钮基类 (B1: 纯色, 无渐变) ---- */
.btn-primary,
.vf-btn,
.vf-btn-primary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 22px;
border: none;
border-radius: 12px;
background-color: var(--vf-brand-blue);
color: #FFFFFF;
font-size: 14px;
font-weight: 600;
letter-spacing: 0.01em;
cursor: pointer;
text-decoration: none;
box-shadow: 0 0 12px rgba(59, 130, 246, 0.35);
transition: background-color .2s ease, box-shadow .2s ease, transform .15s ease;
}
.btn-primary:hover,
.vf-btn:hover,
.vf-btn-primary:hover {
background-color: var(--vf-brand-blue-hover);
box-shadow: 0 0 18px rgba(59, 130, 246, 0.55);
transform: translateY(-1px);
}
.btn-primary:active,
.vf-btn:active,
.vf-btn-primary:active { transform: translateY(0); }
.btn-primary:disabled,
.vf-btn:disabled,
.vf-btn-primary:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
.vf-btn-secondary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 22px;
border-radius: 12px;
background-color: transparent;
color: var(--vf-brand-blue);
border: 1px solid var(--vf-brand-blue);
font-size: 14px;
font-weight: 600;
cursor: pointer;
text-decoration: none;
transition: all .2s ease;
}
.vf-btn-secondary:hover {
background-color: rgba(59, 130, 246, 0.08);
border-color: var(--vf-brand-blue-hover);
}
/* ---- B1: 强制覆盖现有渐变按钮为纯色 ---- */
.swap-primary-btn,
.jdex-hero-cta-primary,
.jdex-feature-cta {
background: var(--vf-brand-blue) !important;
background-image: none !important;
box-shadow: 0 0 14px rgba(59, 130, 246, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}
.swap-primary-btn:hover,
.jdex-hero-cta-primary:hover,
.jdex-feature-cta:hover {
background: var(--vf-brand-blue-hover) !important;
box-shadow: 0 0 22px rgba(59, 130, 246, 0.60), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}
/* Flip 按钮 hover 渐变 → 纯色 (保留 hover 时的颜色变化, 但去掉三色渐变) */
.swap-flip-btn:hover {
background: var(--vf-brand-blue) !important;
background-image: none !important;
}
/* 链选择 pill active 状态 — 之前是双色渐变, 改纯蓝低透明度 */
.swap-chain-pill.active {
background: rgba(59, 130, 246, 0.18) !important;
background-image: none !important;
border-color: var(--vf-brand-blue) !important;
}
/* ---- C2: 亮绿色清理 (保留金融语义绿但降饱和) ---- */
/* 原"成功"徽章 #4ade80 (荧光) → #10B981 (低饱和) */
.swap-recent-item-status.ok {
background: var(--vf-green-bg) !important;
color: var(--vf-green) !important;
}
.swap-recent-item-status.pending {
background: var(--vf-amber-bg) !important;
color: var(--vf-amber) !important;
}
.swap-recent-item-status.fail {
background: var(--vf-red-bg) !important;
color: var(--vf-red) !important;
}
/* light mode 下: 撤销旧"紫色强制改绿色"的过激规则 (那是亮绿色滥用) */
html[data-theme="light"] .text-purple-300,
html[data-theme="light"] .text-purple-400 {
color: #6D28D9 !important; /* 恢复为正常紫色 (品牌色 --accent-purple 的深色版) */
}
/* light mode 全局背景 (vFinal 规范) */
html[data-theme="light"] body {
background-color: var(--vf-bg-primary);
color: var(--vf-text-primary);
}
/* light mode 下 jdex-* 系列卡片改白底 */
html[data-theme="light"] .jdex-hero {
background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%) !important;
border-bottom: 1px solid var(--vf-card-border);
}
html[data-theme="light"] .jdex-hero-title,
html[data-theme="light"] .jdex-hero-slogan {
color: var(--vf-text-primary) !important;
-webkit-text-fill-color: var(--vf-text-primary) !important;
background: none !important;
}
html[data-theme="light"] .jdex-hero-subtitle {
color: var(--vf-text-secondary) !important;
}
html[data-theme="light"] .jdex-section {
background: var(--vf-bg-primary) !important;
}
html[data-theme="light"] .jdex-feature-card,
html[data-theme="light"] .jdex-trust-card,
html[data-theme="light"] .swap-card,
html[data-theme="light"] .swap-side-card {
background: var(--vf-bg-secondary) !important;
border-color: var(--vf-card-border) !important;
box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
color: var(--vf-text-primary);
}
html[data-theme="light"] .swap-card-title,
html[data-theme="light"] .swap-side-card-header h4,
html[data-theme="light"] .jdex-feature-title {
color: var(--vf-text-primary) !important;
}
html[data-theme="light"] .swap-label,
html[data-theme="light"] .swap-pay-label,
html[data-theme="light"] .swap-balance {
color: var(--vf-text-secondary) !important;
}
html[data-theme="light"] .swap-pay-block {
background: rgba(15, 23, 42, 0.025) !important;
border-color: rgba(15, 23, 42, 0.08) !important;
}
html[data-theme="light"] .swap-amount-input {
color: var(--vf-text-primary) !important;
}
html[data-theme="light"] .swap-chain-pill {
background: var(--vf-bg-secondary) !important;
border-color: var(--vf-card-border) !important;
color: var(--vf-text-primary) !important;
}
html[data-theme="light"] .swap-quote-summary {
background: rgba(15, 23, 42, 0.03) !important;
border-color: rgba(15, 23, 42, 0.05) !important;
}
html[data-theme="light"] .swap-quote-row { color: var(--vf-text-secondary) !important; }
html[data-theme="light"] .swap-quote-row span:last-child { color: var(--vf-text-primary) !important; }
html[data-theme="light"] .swap-foot-hint,
html[data-theme="light"] .swap-tips-list li { color: var(--vf-text-secondary) !important; }
html[data-theme="light"] .swap-tips-list li { color: var(--vf-text-primary) !important; }
/* light mode modal */
html[data-theme="light"] .jdex-modal-backdrop {
background: rgba(15, 23, 42, 0.35);
}
html[data-theme="light"] .jdex-modal-content {
background: var(--vf-bg-secondary) !important;
border-color: var(--vf-card-border) !important;
}
html[data-theme="light"] .jdex-modal-header h3 { color: var(--vf-text-primary) !important; }
/* light mode demo notice */
html[data-theme="light"] .swap-demo-notice {
background: rgba(34, 211, 238, 0.08) !important;
border-color: rgba(34, 211, 238, 0.35) !important;
color: var(--vf-text-primary);
}
/* ---- vFinal 首页容器宽度 (Step 4 占位, 实际由 home.tsx 类名应用) ---- */
.vf-container {
max-width: 1440px;
margin-left: auto;
margin-right: auto;
padding-left: 24px;
padding-right: 24px;
width: 100%;
}
@media (min-width: 768px) {
.vf-container { padding-left: 32px; padding-right: 32px; }
}
@media (min-width: 1024px) {
.vf-container { padding-left: 48px; padding-right: 48px; }
}
.vf-hero-text { max-width: 720px; margin-left: auto; margin-right: auto; text-align: center; }
/* ---- vFinal Market 页 (Step 6 配套) ---- */
.market-page { padding: 24px 0 60px; }
.market-header-sticky {
position: sticky;
top: 0;
z-index: 40;
background: var(--vf-bg-primary);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid var(--vf-card-border);
padding: 16px 0;
margin-bottom: 20px;
}
html[data-theme="light"] .market-header-sticky {
background: rgba(248, 250, 252, 0.92);
box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04);
}
.market-toolbar {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.market-search {
flex: 1;
min-width: 220px;
position: relative;
}
.market-search i {
position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
color: var(--vf-text-secondary); font-size: 13px;
}
.market-search input {
width: 100%;
padding: 10px 14px 10px 36px;
border-radius: 10px;
border: 1px solid var(--vf-card-border);
background: var(--vf-bg-secondary);
color: var(--vf-text-primary);
font-size: 13.5px;
outline: none;
}
.market-search input:focus {
border-color: var(--vf-brand-blue);
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}
.market-chain-filter {
display: inline-flex;
flex-wrap: wrap;
gap: 6px;
}
.market-chain-chip {
padding: 6px 12px;
border-radius: 999px;
border: 1px solid var(--vf-card-border);
background: var(--vf-bg-secondary);
color: var(--vf-text-primary);
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: all .15s ease;
}
.market-chain-chip:hover {
border-color: var(--vf-brand-blue);
background: rgba(59, 130, 246, 0.06);
}
.market-chain-chip.active {
background: rgba(59, 130, 246, 0.18);
border-color: var(--vf-brand-blue);
color: var(--vf-brand-blue);
}
.market-demo-banner {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
border-radius: 10px;
background: var(--vf-amber-bg);
border: 1px solid rgba(245, 158, 11, 0.25);
color: var(--vf-text-primary);
font-size: 12.5px;
margin-bottom: 16px;
}
.market-demo-banner i { color: var(--vf-amber); }
.market-table-wrap {
background: var(--vf-bg-secondary);
border: 1px solid var(--vf-card-border);
border-radius: 14px;
overflow: hidden;
}
.market-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
.market-table thead th {
position: sticky;
top: 72px;
background: var(--vf-bg-secondary);
border-bottom: 1px solid var(--vf-card-border);
padding: 12px 14px;
text-align: left;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.04em;
color: var(--vf-text-secondary);
text-transform: uppercase;
z-index: 2;
}
.market-table tbody td {
padding: 14px;
border-bottom: 1px solid var(--vf-card-border);
vertical-align: middle;
}
.market-table tbody tr:last-child td { border-bottom: none; }
.market-table tbody tr:hover {
background: rgba(59, 130, 246, 0.04);
}
.market-token-cell { display: flex; align-items: center; gap: 10px; }
.market-token-icon {
width: 30px; height: 30px;
border-radius: 50%;
background-color: var(--vf-brand-blue);
color: #fff;
display: inline-flex; align-items: center; justify-content: center;
font-weight: 800; font-size: 11px;
flex-shrink: 0;
}
.market-token-name {
display: flex; flex-direction: column; min-width: 0;
}
.market-token-sym { color: var(--vf-text-primary); font-weight: 700; font-size: 13.5px; }
.market-token-fullname { color: var(--vf-text-secondary); font-size: 11px; }
.market-num {
font-variant-numeric: tabular-nums;
font-weight: 600;
color: var(--vf-text-primary);
}
.market-num-up { color: var(--vf-green); }
.market-num-down { color: var(--vf-red); }
.market-risk-tag {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
border-radius: 6px;
font-size: 11px;
font-weight: 600;
}
.market-risk-low { background: var(--vf-green-bg); color: var(--vf-green); }
.market-risk-medium { background: var(--vf-amber-bg); color: var(--vf-amber); }
.market-risk-high { background: var(--vf-red-bg); color: var(--vf-red); }
.market-row-actions { display: inline-flex; gap: 6px; }
.market-row-actions a {
padding: 5px 10px;
border-radius: 7px;
font-size: 11.5px;
font-weight: 600;
text-decoration: none;
border: 1px solid var(--vf-card-border);
color: var(--vf-text-primary);
background: var(--vf-bg-primary);
transition: all .15s ease;
}
.market-row-actions a:hover {
border-color: var(--vf-brand-blue);
color: var(--vf-brand-blue);
background: rgba(59, 130, 246, 0.06);
}
.market-row-actions a.primary {
background: var(--vf-brand-blue);
color: #fff;
border-color: var(--vf-brand-blue);
}
.market-row-actions a.primary:hover { background: var(--vf-brand-blue-hover); }
.market-empty {
padding: 60px 20px;
text-align: center;
color: var(--vf-text-secondary);
font-size: 13.5px;
}
.market-empty i { font-size: 32px; opacity: 0.4; margin-bottom: 10px; display: block; }
/* CTA 区 */
.market-cta-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin-top: 24px;
}
@media (max-width: 768px) {
.market-cta-row { grid-template-columns: 1fr; }
}
.market-cta-card {
padding: 22px 20px;
border-radius: 14px;
background: var(--vf-bg-secondary);
border: 1px solid var(--vf-card-border);
text-decoration: none;
color: inherit;
display: flex;
flex-direction: column;
gap: 8px;
transition: all .2s ease;
}
.market-cta-card:hover {
border-color: var(--vf-brand-blue);
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(59, 130, 246, 0.12);
}
.market-cta-card-icon {
width: 38px; height: 38px;
border-radius: 10px;
background: rgba(59, 130, 246, 0.12);
color: var(--vf-brand-blue);
display: inline-flex; align-items: center; justify-content: center;
font-size: 16px;
}
.market-cta-card-title { font-weight: 700; font-size: 15px; color: var(--vf-text-primary); }
.market-cta-card-desc { font-size: 12.5px; color: var(--vf-text-secondary); line-height: 1.5; }
/* 移动端 market table 简化 */
@media (max-width: 640px) {
.market-table thead th:nth-child(4),
.market-table thead th:nth-child(5),
.market-table tbody td:nth-child(4),
.market-table tbody td:nth-child(5) { display: none; }
.market-table thead th { top: 64px; padding: 10px; }
.market-table tbody td { padding: 12px 10px; }
}
/* ---- 兜底: 强制 light mode 下 hero 渐变文字使用纯色 ---- */
html[data-theme="light"] .jdex-hero-title { text-shadow: none !important; }
/* ---- Step 4: 全局首页 / 各内容区容器 ---- */
.jdex-hero-inner,
.jdex-section > .max-w-\[1280px\],
.jdex-section-inner {
max-width: 1440px;
}
/* === vFinal /market 补全样式 (2026-05-28) === */
.market-page {
padding: 24px 0 64px;
min-height: calc(100vh - 60px);
}
.market-header {
padding: 16px 0 20px;
}
.market-title {
font-size: clamp(24px, 3vw, 36px);
font-weight: 800;
color: var(--vf-text-primary);
margin-bottom: 8px;
letter-spacing: -0.01em;
}
.market-subtitle {
font-size: 14px;
color: var(--vf-text-secondary);
line-height: 1.6;
margin-bottom: 0;
}
.market-chain-icon {
width: 18px;
height: 18px;
border-radius: 50%;
object-fit: cover;
}
.market-token-meta {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.market-token-quote {
color: var(--vf-text-secondary);
font-weight: 500;
margin-left: 2px;
font-size: 12px;
}
.market-token-chain {
font-size: 11px;
color: var(--vf-text-secondary);
opacity: 0.8;
line-height: 1.3;
}
.market-col-pair { min-width: 200px; }
.market-action-btn {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 6px 10px;
font-size: 12px;
font-weight: 600;
border-radius: 8px;
text-decoration: none;
transition: all .15s;
white-space: nowrap;
border: 1px solid transparent;
}
.market-action-trade {
background: var(--vf-brand-blue);
color: #fff;
}
.market-action-trade:hover {
background: var(--vf-brand-blue-hover);
transform: translateY(-1px);
}
.market-action-detect {
background: transparent;
color: var(--vf-brand-blue);
border-color: rgba(59, 130, 246, 0.4);
}
.market-action-detect:hover {
background: rgba(59, 130, 246, 0.1);
border-color: var(--vf-brand-blue);
}
.market-cta-section {
margin-top: 48px;
padding: 32px 0 16px;
}
.market-cta-title {
font-size: 22px;
font-weight: 800;
color: var(--vf-text-primary);
margin-bottom: 20px;
text-align: center;
}
.market-cta-card-enter {
display: inline-flex;
align-items: center;
margin-top: 12px;
color: var(--vf-brand-blue);
font-weight: 600;
font-size: 13px;
}
.market-cta-card-desc {
color: var(--vf-text-secondary);
font-size: 13px;
line-height: 1.5;
margin-top: 6px;
}
.market-disclaimer {
margin-top: 32px;
text-align: center;
font-size: 12px;
color: var(--vf-text-secondary);
opacity: 0.7;
padding: 12px 16px;
border-top: 1px solid var(--vf-border, rgba(148, 163, 184, 0.15));
}
.market-demo-dismiss {
background: transparent;
border: 0;
color: inherit;
cursor: pointer;
margin-left: auto;
padding: 4px 8px;
font-size: 12px;
opacity: 0.7;
}
.market-demo-dismiss:hover { opacity: 1; }
/* 移动端主题切换按钮 (菜单内) */
.theme-toggle-mobile {
background: rgba(148, 163, 184, 0.06);
border: 1px solid rgba(148, 163, 184, 0.18);
border-radius: 8px;
padding: 10px 12px;
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
color: var(--vf-text-primary, #e2e8f0);
font-size: 13px;
text-align: left;
width: 100%;
}
.theme-toggle-mobile .icon-sun { display: inline-block; }
.theme-toggle-mobile .icon-moon { display: none; }
html[data-theme="light"] .theme-toggle-mobile .icon-sun { display: none; }
html[data-theme="light"] .theme-toggle-mobile .icon-moon { display: inline-block; }
/* market 表头 sticky 适配 */
.market-table thead { position: sticky; top: 80px; z-index: 5; background: var(--vf-bg-secondary, #1E1B4B); }
@media (max-width: 640px) {
.market-table thead { top: 64px; }
.market-col-vol, .market-col-liq { display: none; }
.market-token-chain { display: none; }
.market-action-btn span { display: none; }
.market-action-btn { padding: 6px 8px; }
}
/* vf-container 在 .jdex-hero-inner 内时的最大宽度协调 */
.jdex-hero-inner.vf-container { max-width: 1440px; }