/* ChainScope - 四链 Swap 监控 UI
   深色/浅色主题 + 侧边栏布局 + 数据表格 + 分页
*/

/* ─────────────────────────────────────────────
   CSS Variables
───────────────────────────────────────────── */
:root {
  --background: #f8fafc;
  --foreground: #0f172a;
  --card: #ffffff;
  --primary: #7c3aed;
  --primary-foreground: #ffffff;
  --secondary: #f1f5f9;
  --secondary-foreground: #334155;
  --muted: #f1f5f9;
  --muted-foreground: #475569;
  --accent: #6d28d9;
  --destructive: #dc2626;
  --success: #16a34a;
  --warning: #ca8a04;
  --border: #e2e8f0;
  --input: #f1f5f9;
  --ring: #7c3aed;
  --sidebar: #f8fafc;
  --sidebar-foreground: #0f172a;
  --sidebar-primary: #7c3aed;
  --sidebar-accent: #f1f5f9;
  --sidebar-border: #e2e8f0;
  --radius: 0.5rem;
}

.dark {
  --background: #0a0a0f;
  --foreground: #f8fafc;
  --card: #111118;
  --primary: #a855f7;
  --primary-foreground: #0a0a0f;
  --secondary: #1e1e2e;
  --secondary-foreground: #cbd5e1;
  --muted: #1e1e2e;
  --muted-foreground: #94a3b8;
  --accent: #c084fc;
  --destructive: #f87171;
  --success: #4ade80;
  --warning: #facc15;
  --border: #2e2e3e;
  --input: #1e1e2e;
  --ring: #c084fc;
  --sidebar: #0d0d12;
  --sidebar-foreground: #f8fafc;
  --sidebar-primary: #a855f7;
  --sidebar-accent: #1e1e2e;
  --sidebar-border: #2e2e3e;
}

/* ─────────────────────────────────────────────
   Base
───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  background-color: var(--background);
  color: var(--foreground);
  min-height: 100vh;
  transition: background-color 0.3s ease, color 0.3s ease;
}

a { text-decoration: none; }
.hidden { display: none !important; }

/* ─────────────────────────────────────────────
   Layout
───────────────────────────────────────────── */
.app-container { display: flex; min-height: 100vh; }

/* 侧边栏 */
.sidebar {
  position: fixed; left: 0; top: 0; z-index: 40;
  height: 100vh; width: 14rem;
  background-color: var(--sidebar);
  border-right: 1px solid var(--sidebar-border);
  transition: width 0.3s ease;
  display: flex; flex-direction: column;
}
.sidebar.collapsed { width: 4rem; }

.sidebar-header {
  display: flex; height: 3.5rem;
  align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--sidebar-border);
  padding: 0 1rem;
}
.sidebar-logo {
  display: flex; align-items: center; gap: 0.5rem;
  color: var(--sidebar-foreground);
}
.sidebar-logo-icon {
  display: flex; height: 2rem; width: 2rem;
  align-items: center; justify-content: center;
  border-radius: 0.5rem;
  background-color: var(--primary);
  color: var(--primary-foreground);
  flex-shrink: 0;
}
.sidebar-logo-icon svg { width: 1rem; height: 1rem; }
.sidebar-logo-text { font-weight: 600; font-size: 0.95rem; }
.sidebar.collapsed .sidebar-logo-text { display: none; }

.sidebar-chain-select {
  padding: 0.75rem 0.75rem;
  border-bottom: 1px solid var(--sidebar-border);
}
.chain-select-ctrl {
  width: 100%;
  padding: 0.375rem 0.5rem;
  border-radius: 0.375rem;
  border: 1px solid var(--sidebar-border);
  background-color: var(--sidebar-accent);
  color: var(--sidebar-foreground);
  font-size: 0.8125rem; font-weight: 600;
  cursor: pointer;
}
.sidebar.collapsed .sidebar-chain-select { display: none; }

.sidebar-nav {
  flex: 1; padding: 1rem 0.5rem;
  display: flex; flex-direction: column; gap: 0.25rem;
}
.nav-item {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.875rem; font-weight: 500;
  color: var(--sidebar-foreground); opacity: 0.7;
  transition: all 0.2s ease;
}
.nav-item:hover { background-color: var(--sidebar-accent); opacity: 1; }
.nav-item.active { background-color: var(--sidebar-accent); color: var(--sidebar-primary); opacity: 1; }
.nav-item svg { width: 1rem; height: 1rem; flex-shrink: 0; }
.sidebar.collapsed .nav-item { justify-content: center; padding: 0.625rem 0.5rem; }
.sidebar.collapsed .nav-item span { display: none; }

.sidebar-footer {
  border-top: 1px solid var(--sidebar-border);
  padding: 0.75rem 0.5rem;
}

.sidebar-toggle {
  position: absolute; right: -0.75rem; top: 5rem;
  display: flex; height: 1.5rem; width: 1.5rem;
  align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--sidebar-border);
  background-color: var(--sidebar); color: var(--sidebar-foreground);
  cursor: pointer; transition: background-color 0.2s ease;
}
.sidebar-toggle:hover { background-color: var(--sidebar-accent); }
.sidebar-toggle svg { width: 0.75rem; height: 0.75rem; }

/* 主内容区 */
.main-content {
  flex: 1; margin-left: 14rem;
  transition: margin-left 0.3s ease;
  padding: 1rem 1.5rem;
}
.sidebar.collapsed ~ .main-content,
.main-content.sidebar-collapsed { margin-left: 4rem; }

/* ─────────────────────────────────────────────
   Page Header
───────────────────────────────────────────── */
.page-header {
  display: flex; flex-wrap: wrap; gap: 0.75rem;
  align-items: center; justify-content: space-between;
  margin-bottom: 0.75rem;
}
.page-header-left {
  display: flex; flex-direction: row; align-items: center;
  gap: 0.75rem; flex-wrap: wrap; min-width: 0;
}
.page-title { font-size: 1.25rem; font-weight: 600; white-space: nowrap; }
.header-info {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 0.5rem; font-size: 0.8125rem; color: var(--muted-foreground);
}
.header-divider { color: var(--border); }
.page-header-right { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; }

/* ─────────────────────────────────────────────
   Buttons
───────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 500;
  border-radius: var(--radius); border: 1px solid transparent;
  cursor: pointer; transition: all 0.2s ease; white-space: nowrap;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-outline {
  background-color: transparent; color: var(--foreground); border-color: var(--border);
}
.btn-outline:hover:not(:disabled) { background-color: var(--secondary); }
.btn-sm { padding: 0.25rem 0.5rem; font-size: 0.75rem; }
.btn-icon { padding: 0.5rem; }
.btn svg { width: 1rem; height: 1rem; }

/* 主题切换 */
.theme-toggle {
  display: flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem;
  border-radius: var(--radius);
  background-color: var(--secondary); border: 1px solid var(--border);
  cursor: pointer; color: var(--foreground); transition: background-color 0.2s ease;
}
.theme-toggle:hover { background-color: var(--muted); }
.theme-toggle svg { width: 1.125rem; height: 1.125rem; }

/* ─────────────────────────────────────────────
   Filter Bar
───────────────────────────────────────────── */
.filters {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.75rem; margin-bottom: 1rem;
}
.filter-select-inline {
  padding: 0.25rem 1.75rem 0.25rem 0.5rem;
  font-size: 0.8rem; border-radius: 0.375rem;
  border: 1px solid var(--border);
  background-color: var(--secondary); color: var(--foreground);
  cursor: pointer; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.3rem center;
}
/* symbol / CA 搜索框（与 filter-select-inline 同高同色，配前置放大镜图标） */
.filter-search-inline {
  width: 12rem; max-width: 42vw;
  padding: 0.25rem 0.5rem 0.25rem 1.7rem;
  font-size: 0.8rem; border-radius: 0.375rem;
  border: 1px solid var(--border);
  background-color: var(--secondary); color: var(--foreground);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: left 0.45rem center;
}
.filter-search-inline:focus {
  outline: none; border-color: var(--primary);
}
.filter-search-inline::placeholder { color: var(--muted-foreground); }
.filter-checkbox-inline {
  display: flex; align-items: center; gap: 0.375rem;
  font-size: 0.8rem; color: var(--muted-foreground); cursor: pointer;
}
.filter-checkbox-inline input[type="checkbox"] {
  accent-color: var(--primary); cursor: pointer;
}

/* ─────────────────────────────────────────────
   Data Table
───────────────────────────────────────────── */
.data-table {
  width: 100%; overflow: hidden;
  background-color: var(--card);
  border: 1px solid var(--border); border-radius: var(--radius);
}
.table-container { overflow-x: auto; max-height: calc(100vh - 155px); }

table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }

thead { position: sticky; top: 0; z-index: 10; }

th {
  padding: 0.75rem 0.75rem;
  text-align: left; font-weight: 500; font-size: 0.75rem;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--muted-foreground);
  background-color: var(--muted);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
td {
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid var(--border);
  color: var(--foreground); vertical-align: middle;
}
tbody tr { transition: background-color 0.15s ease; }
tbody tr:hover { background-color: var(--muted); cursor: pointer; }
tbody tr:last-child td { border-bottom: none; }

/* Table inner elements */
.table-link {
  color: var(--accent); display: inline-flex;
  align-items: center; gap: 0.25rem;
}
.table-link:hover { text-decoration: underline; }
.table-link svg { width: 0.75rem; height: 0.75rem; opacity: 0.5; }

.token-symbol { font-weight: 600; color: var(--primary); cursor: pointer; }
.token-symbol:hover { text-decoration: underline; }

.mono-text {
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 0.75rem;
}

.text-success { color: var(--success); }
.text-danger  { color: var(--destructive); }
.text-warning { color: var(--warning); }
.text-accent  { color: var(--accent); }
.text-muted   { color: var(--muted-foreground); }
.text-primary { color: var(--primary); }
.font-medium  { font-weight: 500; }

/* Empty state */
.empty-state {
  text-align: center; padding: 3rem 1rem;
  color: var(--muted-foreground);
}
.empty-state svg { margin: 0 auto 0.75rem; display: block; }
.empty-state-text { font-size: 0.875rem; }

/* ─────────────────────────────────────────────
   Badges
───────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.125rem 0.5rem;
  font-size: 0.75rem; font-weight: 600; border-radius: 9999px;
}
.badge-buy { background: rgba(74,222,128,.15); color: var(--success); }
.badge-sell { background: rgba(248,113,113,.15); color: var(--destructive); }
.badge-success { background: rgba(74,222,128,.15); color: var(--success); }
.badge-fail { background: rgba(248,113,113,.15); color: var(--destructive); }

.tag {
  display: inline-block; padding: 0.125rem 0.5rem;
  background: rgba(168,85,247,.15); color: var(--primary);
  border-radius: 9999px; font-size: 0.7rem; font-weight: 600;
}

/* ─────────────────────────────────────────────
   Pagination
───────────────────────────────────────────── */
.pagination {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--border);
  background-color: var(--card);
  border-radius: 0 0 var(--radius) var(--radius);
}
.pagination-left { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; }
.pagination-right { display: flex; align-items: center; gap: 0.375rem; }
.pagination-info { font-size: 0.8rem; color: var(--muted-foreground); min-width: 4rem; text-align: center; }
.pagination-input {
  width: 3.5rem; padding: 0.25rem 0.375rem;
  border: 1px solid var(--border); border-radius: 0.375rem;
  background-color: var(--secondary); color: var(--foreground);
  font-size: 0.8rem; text-align: center;
}

/* 分页栏内联登录/退出按钮 */
.auth-inline-slot {
  display: inline-flex; align-items: center;
  margin-left: 0.5rem; padding-left: 0.5rem;
  border-left: 1px solid var(--border);
}

/* ─────────────────────────────────────────────
   Loading Overlay
───────────────────────────────────────────── */
.loading-overlay {
  position: fixed; inset: 0; z-index: 100;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background: rgba(0,0,0,.4); gap: 1rem;
}
.loading-spinner {
  width: 2.5rem; height: 2.5rem;
  border: 3px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
.loading-text { color: #fff; font-size: 0.875rem; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ─────────────────────────────────────────────
   Toast
───────────────────────────────────────────── */
.toast {
  position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 200;
  padding: 0.75rem 1.25rem; border-radius: var(--radius);
  font-size: 0.875rem; font-weight: 500;
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
  animation: fadeIn 0.2s ease;
}
.toast-success { background: var(--success); color: #fff; }
.toast-error { background: var(--destructive); color: #fff; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(0.5rem); } to { opacity: 1; transform: translateY(0); } }

/* ─────────────────────────────────────────────
   Auth Dialog
───────────────────────────────────────────── */
dialog {
  /* 全局 reset 的 margin:0 会覆盖浏览器对 modal dialog 的 margin:auto，导致弹窗贴到左上角。
     这里显式恢复 margin:auto，使 showModal() 的弹窗水平 + 垂直居中。 */
  margin: auto;
  padding: 2rem; border-radius: var(--radius);
  border: 1px solid var(--border);
  background-color: var(--card); color: var(--foreground);
  min-width: 20rem;
}
dialog::backdrop { background: rgba(0,0,0,.5); }
/* 弹窗底部辅助行（注册/登录互链） */
.dialog-foot { margin-top: 0.75rem; font-size: 0.8125rem; color: var(--muted-foreground); text-align: center; }
.dialog-foot a { color: var(--accent); font-weight: 600; }
.dialog-foot a:hover { text-decoration: underline; }
dialog h2 { font-size: 1.125rem; font-weight: 600; margin-bottom: 1rem; }
dialog input {
  width: 100%; padding: 0.5rem 0.75rem; margin-bottom: 0.75rem;
  border: 1px solid var(--border); border-radius: var(--radius);
  background-color: var(--input); color: var(--foreground); font-size: 0.875rem;
}
dialog input:focus { outline: none; border-color: var(--ring); }
dialog menu {
  display: flex; justify-content: flex-end; gap: 0.75rem;
  list-style: none; margin-top: 1.25rem; padding: 0;
}
/* 弹窗按钮统一样式：对齐注册页质感 */
dialog menu .btn {
  min-width: 5.5rem; padding: 0.55rem 1.25rem;
  font-size: 0.875rem; font-weight: 600;
  border-radius: var(--radius);
}
.error { color: var(--destructive); font-size: 0.8125rem; }

/* Auth control in sidebar footer */
.auth-footer { font-size: 0.8rem; color: var(--muted-foreground); }
.auth-footer .btn { width: 100%; }

/* ─────────────────────────────────────────────
   Chart
───────────────────────────────────────────── */
.chart-container {
  background-color: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1rem; margin-bottom: 1.5rem;
}
.chart-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 0.75rem;
}
.chart-title { font-size: 0.875rem; font-weight: 600; color: var(--foreground); }
.chart-legend { display: flex; gap: 1rem; }
.legend-item { display: flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; color: var(--muted-foreground); }
.legend-dot { width: 0.625rem; height: 0.625rem; border-radius: 50%; }
/* Chart.js 需要固定高度的相对定位父容器（maintainAspectRatio:false 下避免重绘时无限增高）。*/
.chart-canvas-wrap { position: relative; height: 240px; width: 100%; }
#activityChart { width: 100%; }

/* Token detail stats cards */
.stats-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem; margin-bottom: 1.5rem;
}
.stat-card {
  background-color: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1rem;
}
.stat-label { font-size: 0.75rem; color: var(--muted-foreground); margin-bottom: 0.25rem; }
.stat-value { font-size: 1.25rem; font-weight: 600; color: var(--foreground); }

/* Time range tabs */
.time-tabs { display: flex; gap: 0.25rem; }
.time-tab {
  padding: 0.25rem 0.625rem; font-size: 0.75rem; border-radius: 0.375rem;
  border: 1px solid var(--border); background: transparent;
  color: var(--muted-foreground); cursor: pointer; transition: all 0.15s ease;
}
.time-tab.active,
.time-tab:hover { background: var(--primary); color: var(--primary-foreground); border-color: var(--primary); }

/* ─────────────────────────────────────────────
   管理端：交易信号复盘 / 黑名单 / 叙事
───────────────────────────────────────────── */
.btn-danger { background-color: var(--destructive); color: #fff; border: 1px solid var(--destructive); }
.btn-danger:hover:not(:disabled) { opacity: 0.88; }
.badge-danger { background: rgba(248,113,113,.15); color: var(--destructive); }
.badge-base { background: rgba(168,85,247,.12); color: var(--accent); }
/* 黑名单行：低饱和警示底色 */
.row-blacklisted { background-color: rgba(248,113,113,.06); }
.row-blacklisted:hover { background-color: rgba(248,113,113,.12); }
.back-link { color: var(--muted-foreground); text-decoration: none; font-size: 0.875rem; margin-right: 0.5rem; }
.back-link:hover { color: var(--primary); }
/* 叙事/原因单元格：截断省略，hover title 显示全文 */
.story-cell, .reason-cell {
  max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--muted-foreground);
}
/* 交易信号明细表：Tx 列只放外链图标 → 极窄；原因列让出宽度展示更多，并可复制全文 */
.signal-detail-table th.col-tx, .signal-detail-table td.col-tx {
  width: 2rem; min-width: 2rem; max-width: 2.25rem;
  padding: 0.25rem 0.2rem; text-align: center; white-space: nowrap;
}
.signal-detail-table td.reason-cell {
  max-width: 34rem; overflow: visible; white-space: normal;
}
.signal-detail-table .reason-line {
  display: flex; align-items: center; gap: 0.3rem; min-width: 0;
}
.signal-detail-table .reason-text {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.signal-detail-table .reason-line .copy-btn { flex: 0 0 auto; }
.action-cell { display: flex; gap: 0.375rem; white-space: nowrap; }
.stat-sub { font-size: 0.7rem; color: var(--muted-foreground); margin-top: 0.25rem; }
.stat-card-wide { grid-column: 1 / -1; }
.stat-story { font-size: 0.875rem; font-weight: 400; white-space: pre-wrap; line-height: 1.5; }

/* ── token 详情：紧凑指标条 + 明细并排排版 ── */
/* 紧凑指标卡：更小占位，给图表/明细让空间。 */
.stats-grid.compact { grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 0.5rem; margin-bottom: 1rem; }
.stats-grid.compact .stat-card { padding: 0.45rem 0.6rem; }
.stats-grid.compact .stat-label { font-size: 0.66rem; margin-bottom: 0.1rem; }
.stats-grid.compact .stat-value { font-size: 0.95rem; }
.stats-grid.compact .stat-story { font-size: 0.8rem; line-height: 1.35; }
/* 鲸鱼 + 聪明钱明细并排（窄屏自动堆叠）。 */
.detail-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.5rem; }
.detail-cols .detail-block { min-width: 0; margin-bottom: 0; }
.detail-cols .table-container { max-height: 360px; }
@media (max-width: 980px) { .detail-cols { grid-template-columns: 1fr; } }
.detail-load-row td {
  padding: 0.55rem 0.75rem;
  background-color: var(--card);
}
.detail-load-inner {
  display: flex; align-items: center; justify-content: center;
  gap: 0.75rem; min-height: 1.75rem;
}
.detail-load-count { color: var(--muted-foreground); font-size: 0.75rem; white-space: nowrap; }
tbody tr.detail-load-row:hover { background-color: var(--card); cursor: default; }
/* 叙事编辑 textarea（dialog 内）*/
dialog textarea {
  width: 100%; padding: 0.5rem 0.75rem; margin-bottom: 0.75rem;
  border: 1px solid var(--border); border-radius: var(--radius);
  background-color: var(--input); color: var(--foreground);
  font-size: 0.875rem; font-family: inherit; resize: vertical; box-sizing: border-box;
}
dialog textarea:focus { outline: none; border-color: var(--ring); }

/* ─────────────────────────────────────────────
   链标识 Badge（CA 列内联色块）
───────────────────────────────────────────── */
.chain-tag {
  display: inline-block; padding: 1px 5px;
  border-radius: 3px; font-size: 0.65rem; font-weight: 700;
  margin-right: 4px; vertical-align: middle; white-space: nowrap;
}

/* ─────────────────────────────────────────────
   语言切换（右上角内联版）
───────────────────────────────────────────── */
.lang-toggle-inline { display: flex; gap: 0.25rem; align-items: center; }
.lang-btn {
  background: none; border: 1px solid var(--border);
  border-radius: 0.25rem; padding: 0.2rem 0.5rem;
  font-size: 0.75rem; cursor: pointer;
  color: var(--muted-foreground);
  transition: all 0.15s ease;
}
.lang-btn:hover { border-color: var(--primary); color: var(--primary); }
.lang-active { background: var(--primary); border-color: var(--primary); color: #fff; }

/* ── 列间距统一规则（仅 .list-table 内生效） ────────────── */

/* 时间列：紧凑右间距，与 Tx 列贴近 */
.list-table th.col-time, .list-table td.col-time {
  padding-right: 0.15rem; white-space: nowrap;
}
/* TX / OPS 列：仅图标宽度 */
.list-table th.col-tx, .list-table td.col-tx,
.list-table th.col-ops, .list-table td.col-ops {
  width: 2.25rem; min-width: 2.25rem; max-width: 2.75rem;
  padding: 0.25rem 0.1rem; text-align: center; white-space: nowrap;
}
/* 链列：极窄 */
.list-table th.col-chain, .list-table td.col-chain {
  width: 3rem; min-width: 3rem; padding-right: 0.25rem; white-space: nowrap;
}
/* CA / Symbol / 交易员：紧凑 */
.list-table th.col-ca, .list-table td.col-ca { padding-right: 0.2rem; max-width: 8rem; white-space: nowrap; }
.list-table th.col-sym, .list-table td.col-sym { padding-left: 0.3rem; padding-right: 0.2rem; max-width: 6rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list-table th.col-trader, .list-table td.col-trader { padding-left: 0.3rem; padding-right: 0.2rem; white-space: nowrap; }
/* 价格 / FDV：紧凑一组 */
.list-table th.col-price, .list-table td.col-price { padding-right: 0.2rem; }
.list-table th.col-fdv, .list-table td.col-fdv { padding-left: 0.2rem; padding-right: 0.25rem; }

/* 列分组：组首列加细分隔线 + 左间距 */
th.grp-start, td.grp-start {
  border-left: 1px solid var(--border);
  padding-left: 0.7rem;
}
/* 数值/计数列收紧左右间距（聪明钱/鲸鱼/高频等） */
.list-table td.text-success, .list-table td.text-danger,
.list-table td.text-primary, .list-table td.text-accent,
.list-table td.text-warning, .list-table td.text-muted {
  padding-left: 0.35rem; padding-right: 0.35rem;
}
.list-table td.grp-start { padding-left: 0.7rem; }

/* 叙事列：整格单行不换行 —— 叙事文字截断省略，编辑键(✏)紧跟其后同一行，绝不被挤到下一行 */
.list-table th.col-story, .list-table td.col-story {
  min-width: 14rem; max-width: 32rem;
  white-space: nowrap; vertical-align: middle;
}
/* 叙事文字：固定单行，超出省略号截断，保持所有行等高（避免长叙事撑高整行、
   连带 CA / trader 等短内容被居中浮空）。全文通过 title 属性鼠标悬停查看。
   inline-block 而非 block：使后随的 ✏ 编辑键停留在同一行末尾。 */
.story-inline {
  font-size: 0.8rem; color: var(--muted-foreground);
  line-height: 1.4;
  display: inline-block; vertical-align: middle; max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 叙事后面跟着编辑键(✏)时为其预留空间，保证按钮与叙事同一行；
   无按钮时(:last-child)叙事占满整列宽度。 */
.story-inline:not(:last-child) { max-width: calc(100% - 2rem); }

/* dialog 优化：最小宽度、textarea 最小高度 */
dialog { min-width: 24rem; max-width: 92vw; }
dialog textarea { min-height: 7rem; }

/* ─────────────────────────────────────────────
   Admin 内联控件（黑名单 + 叙事编辑）
───────────────────────────────────────────── */
/* admin 操作列：不换行，按钮紧凑排列 */
.admin-cell { white-space: nowrap; }
/* 小图标按钮（✏ × ⊘） */
.btn-icon-sm {
  background: none; border: none; cursor: pointer;
  padding: 2px 4px; font-size: 13px;
  color: var(--muted-foreground); border-radius: 3px;
  line-height: 1; vertical-align: middle;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.btn-icon-sm:hover { background: var(--secondary); color: var(--foreground); }
/* 危险色变体（拉黑 / 清空叙事） */
.btn-danger-sm { color: var(--destructive); }
.btn-danger-sm:hover { background: var(--destructive); color: #fff; }
/* 叙事简短文本（截断省略，inline 展示） */
.story-display {
  font-size: 0.75rem; color: var(--muted-foreground);
  max-width: 10rem; display: inline-block; vertical-align: middle;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  margin-right: 2px;
}

/* ─────────────────────────────────────────────
   CA 复制按钮（所有列表页 CA 列内联）
───────────────────────────────────────────── */
.copy-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.05rem; height: 1.05rem; margin-left: 0.3rem; padding: 0;
  vertical-align: middle; border: none; border-radius: 3px;
  background: transparent; color: var(--muted-foreground);
  cursor: pointer; opacity: 0.6;
  transition: background-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}
.copy-btn:hover { opacity: 1; background: var(--secondary); color: var(--primary); }
.copy-btn.copied { color: var(--success); opacity: 1; }
.copy-btn svg { width: 0.75rem; height: 0.75rem; }

/* ─────────────────────────────────────────────
   Token 详情：单行紧凑指标条（指标 + 叙事同行）
───────────────────────────────────────────── */
.token-statbar {
  display: flex; align-items: stretch; flex-wrap: nowrap;
  gap: 0; margin-bottom: 1rem;
  background-color: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
}
/* 指标小格：固定较窄，价格→高频块彼此紧凑 */
.token-statbar .sb-metric {
  flex: 0 0 auto; min-width: 4.75rem;
  padding: 0.5rem 0.7rem;
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column; justify-content: center; gap: 0.1rem;
}
.token-statbar .sb-metric-wide { min-width: 7.9rem; }
.token-statbar .sb-label { font-size: 0.66rem; color: var(--muted-foreground); white-space: nowrap; }
.token-statbar .sb-value { font-size: 0.95rem; font-weight: 600; color: var(--foreground); white-space: nowrap; }
.token-statbar .sb-value.with-breakdown {
  display: flex; align-items: baseline; gap: 0.3rem;
}
.token-statbar .sb-breakdown {
  font-size: 0.68rem; font-weight: 500; color: var(--muted-foreground);
}
/* 叙事格：占据剩余空间 */
.token-statbar .sb-story {
  flex: 1 1 auto; min-width: 0;
  padding: 0.5rem 0.85rem;
  display: flex; flex-direction: column; justify-content: center; gap: 0.15rem;
}
.token-statbar .sb-story .sb-label { display: flex; align-items: center; gap: 0.4rem; }
.token-statbar .sb-story-line {
  display: inline-flex; align-items: center; gap: 0.25rem;
  min-width: 0; max-width: 100%;
}
.token-statbar .sb-story-text {
  font-size: 0.8rem; line-height: 1.35; color: var(--muted-foreground);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.token-statbar #admin-story-btns {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 0.2rem;
  white-space: nowrap;
}
/* 窄屏：横向滚动而非堆叠，保持「一行」语义 */
@media (max-width: 760px) {
  .token-statbar { flex-wrap: wrap; }
  .token-statbar .sb-story { flex-basis: 100%; border-top: 1px solid var(--border); }
  .token-statbar .sb-links { flex-basis: 100%; border-top: 1px solid var(--border); flex-direction: row; }
}

/* 指标条内外链区域（DexScreener / Explorer / OKX） */
.sb-links {
  flex: 0 0 auto;
  padding: 0.5rem 0.75rem;
  border-left: 1px solid var(--border);
  display: flex; flex-direction: column; justify-content: center;
  gap: 0.2rem;
}
.sb-links .table-link {
  font-size: 0.73rem; white-space: nowrap;
}

/* ─────────────────────────────────────────────
   首页（landing）—— 复用旧站 hero + 功能卡片，适配四链
───────────────────────────────────────────── */
.home-wrap { max-width: 64rem; margin: 0 auto; padding: 2.5rem 1.5rem 3rem; }
.home-header { position: relative; text-align: center; margin-bottom: 2.5rem; }
.home-topbar { position: absolute; right: 0; top: 0; display: flex; gap: 0.5rem; align-items: center; }
.home-logo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 4rem; height: 4rem; margin-bottom: 1rem;
  border-radius: 1rem; background: var(--primary); color: var(--primary-foreground);
  box-shadow: 0 8px 24px rgba(124,58,237,.35);
}
.home-title {
  font-size: 2.25rem; font-weight: 700; letter-spacing: -0.02em;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.home-desc { margin-top: 0.5rem; font-size: 1rem; color: var(--muted-foreground); }
.home-chains { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin-top: 1.25rem; }

.home-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem; margin-bottom: 2.5rem;
}
.home-card {
  position: relative; display: block;
  background-color: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.5rem;
  color: var(--foreground); overflow: hidden;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.home-card:hover { transform: translateY(-3px); border-color: var(--primary); box-shadow: 0 12px 28px rgba(0,0,0,.18); }
.home-card-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; margin-bottom: 1rem;
  border-radius: 0.75rem; background: var(--secondary); color: var(--primary);
}
.home-card-icon svg { width: 1.4rem; height: 1.4rem; }
.home-card-title { font-size: 1.1rem; font-weight: 600; margin-bottom: 0.4rem; }
.home-card-desc { font-size: 0.85rem; color: var(--muted-foreground); line-height: 1.5; }
.home-card-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1rem; }
.home-card-arrow {
  position: absolute; right: 1.25rem; top: 1.5rem; color: var(--muted-foreground);
  opacity: 0; transform: translateX(-4px); transition: all 0.2s ease;
}
.home-card:hover .home-card-arrow { opacity: 1; transform: translateX(0); color: var(--primary); }
.home-card-arrow svg { width: 1.1rem; height: 1.1rem; }

.features-section { border-top: 1px solid var(--border); padding-top: 2rem; }
.features-title { font-size: 1.1rem; font-weight: 600; text-align: center; margin-bottom: 1.5rem; }
.features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; }
.feature-card { text-align: center; padding: 1rem; }
.feature-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; margin-bottom: 0.75rem; border-radius: 0.65rem;
}
.feature-icon svg { width: 1.25rem; height: 1.25rem; }
.feature-icon.green { background: rgba(74,222,128,.15); color: var(--success); }
.feature-icon.blue { background: rgba(96,165,250,.15); color: #60a5fa; }
.feature-icon.yellow { background: rgba(250,204,21,.15); color: var(--warning); }
.feature-icon.purple { background: rgba(168,85,247,.15); color: var(--primary); }
.feature-title { font-size: 0.9rem; font-weight: 600; margin-bottom: 0.25rem; }
.feature-desc { font-size: 0.8rem; color: var(--muted-foreground); }

/* 首页页脚 / 社区入口 */
.home-footer { border-top: 1px solid var(--border); margin-top: 2.5rem; padding-top: 2rem; text-align: center; }
.home-community { font-size: 0.95rem; font-weight: 600; color: var(--muted-foreground); margin-bottom: 1rem; }
.home-social { display: flex; gap: 0.75rem; justify-content: center; }
.social-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.6rem; height: 2.6rem; border-radius: 0.7rem;
  border: 1px solid var(--border); background-color: var(--card);
  color: var(--muted-foreground);
  transition: transform .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.social-link:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.16); }
.social-link svg { width: 1.3rem; height: 1.3rem; }
.social-link.gh:hover { color: var(--foreground); border-color: var(--foreground); }
.social-link.x:hover { color: var(--foreground); border-color: var(--foreground); }
.social-link.tg:hover { color: #229ed9; border-color: #229ed9; }
.home-copy { margin-top: 1.5rem; font-size: 0.78rem; color: var(--muted-foreground); }

/* 链标识徽章（首页用，复用 chain-tag 配色） */
.badge-eth { background: rgba(98,126,234,.15); color: #627eea; }
.badge-bsc { background: rgba(200,155,0,.18); color: #c89b00; }
.badge-base { background: rgba(0,82,255,.15); color: #3b82f6; }
.badge-sol { background: rgba(153,69,255,.15); color: #9945ff; }

/* ─────────────────────────────────────────────
   认证页（注册）居中卡片
───────────────────────────────────────────── */
.auth-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.auth-card {
  width: 100%; max-width: 22rem;
  background-color: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 2rem;
  box-shadow: 0 12px 32px rgba(0,0,0,.18);
}
.auth-card h1 { font-size: 1.4rem; font-weight: 700; text-align: center; margin-bottom: 0.35rem; }
.auth-card .auth-sub { font-size: 0.85rem; color: var(--muted-foreground); text-align: center; margin-bottom: 1.5rem; }
.auth-card label { display: block; font-size: 0.8rem; color: var(--muted-foreground); margin-bottom: 0.3rem; }
.auth-card input {
  width: 100%; padding: 0.55rem 0.75rem; margin-bottom: 1rem;
  border: 1px solid var(--border); border-radius: var(--radius);
  background-color: var(--input); color: var(--foreground); font-size: 0.9rem;
}
.auth-card input:focus { outline: none; border-color: var(--ring); }
.auth-card .btn { width: 100%; justify-content: center; padding: 0.6rem; }
.btn-primary { background: var(--primary); color: var(--primary-foreground); border: 1px solid var(--primary); }
.btn-primary:hover:not(:disabled) { opacity: 0.9; }

/* 状态徽章（用户管理：pending/active/banned） */
.badge-active { background: rgba(74,222,128,.15); color: var(--success); }
.badge-pending { background: rgba(250,204,21,.18); color: var(--warning); }
.badge-banned { background: rgba(248,113,113,.15); color: var(--destructive); }

/* ─────────────────────────────────────────────
   移动端抽屉侧边栏（≤640px 手机竖屏）
   桌面 / iPad 保持固定侧栏不变；手机下侧栏离屏，
   汉堡按钮唤出 + 半透明遮罩，点击遮罩 / 导航 / Esc 关闭。
───────────────────────────────────────────── */
/* 汉堡按钮：JS 注入页头左侧，默认隐藏（仅移动端显形） */
.mobile-nav-toggle {
  display: none;
  align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; flex-shrink: 0;
  border-radius: var(--radius);
  background-color: var(--secondary); border: 1px solid var(--border);
  color: var(--foreground); cursor: pointer;
  transition: background-color 0.2s ease;
}
.mobile-nav-toggle:hover { background-color: var(--muted); }
.mobile-nav-toggle svg { width: 1.25rem; height: 1.25rem; }

/* 遮罩：桌面不渲染 */
.sidebar-backdrop { display: none; }

@media (max-width: 640px) {
  /* 侧栏 → 离屏抽屉：固定 16rem、完整文字，默认移出视口左侧 */
  .sidebar,
  .sidebar.collapsed {
    width: 16rem;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
  }
  .sidebar.mobile-open {
    transform: translateX(0);
    box-shadow: 0 0 40px rgba(0,0,0,.45);
  }
  /* 抽屉内恢复完整文字 + 左对齐（覆盖桌面 collapsed 图标态） */
  .sidebar.collapsed .sidebar-logo-text,
  .sidebar.collapsed .nav-item span { display: inline; }
  .sidebar.collapsed .nav-item { justify-content: flex-start; padding: 0.625rem 0.75rem; }
  /* 桌面折叠箭头在抽屉模式无意义 */
  .sidebar-toggle { display: none; }

  /* 内容区铺满全宽，不再为侧栏让出边距 */
  .main-content,
  .main-content.sidebar-collapsed { margin-left: 0; padding: 0.75rem; }

  /* 汉堡按钮显形 */
  .mobile-nav-toggle { display: inline-flex; }

  /* 遮罩：开启时淡入（visibility 隐藏态不拦截点击） */
  .sidebar-backdrop {
    display: block; position: fixed; inset: 0; z-index: 39;
    background: rgba(0,0,0,.5);
    opacity: 0; visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }
  .sidebar-backdrop.show { opacity: 1; visibility: visible; }

  /* 抽屉打开时锁定背景滚动 */
  body.nav-open { overflow: hidden; }
}
.badge-role-admin { background: rgba(168,85,247,.15); color: var(--primary); }
.badge-role-user { background: var(--secondary); color: var(--muted-foreground); }