/* ═══════════════════════════════════════════════════════
   亿贸 · Design System — Modern Minimal
   Palette: Linear/Vercel-inspired OKLch precision colors
   ═══════════════════════════════════════════════════════ */

:root {
  /* ─── Surface ─────────────────────────────────── */
  --bg: oklch(99% 0.002 240);
  --surface: oklch(100% 0 0);

  /* ─── Foreground ──────────────────────────────── */
  --fg: oklch(18% 0.012 250);
  --muted: oklch(54% 0.012 250);

  /* ─── Border ──────────────────────────────────── */
  --border: oklch(92% 0.005 250);

  /* ─── Accent ──────────────────────────────────── */
  --accent: oklch(58% 0.18 255);
  --accent-hover: oklch(54% 0.18 255);
  --accent-active: oklch(50% 0.18 255);

  /* ─── Computed helpers ────────────────────────── */
  --accent-soft: oklch(58% 0.18 255 / 0.1);
  --fg-soft: oklch(18% 0.012 250 / 0.04);
  --success: oklch(65% 0.18 145);
  --success-soft: oklch(65% 0.18 145 / 0.1);
  --warn: oklch(78% 0.16 85);
  --warn-soft: oklch(78% 0.16 85 / 0.1);
  --danger: oklch(60% 0.20 25);
  --danger-soft: oklch(60% 0.20 25 / 0.1);

  /* ─── Typography ──────────────────────────────── */
  --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', 'Segoe UI', Roboto, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'SF Mono', ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace;

  --fs-xs: 11px; --fs-sm: 13px; --fs-base: 14px; --fs-md: 16px;
  --fs-lg: 20px; --fs-xl: 24px; --fs-2xl: 32px; --fs-3xl: 48px;

  /* ─── Radius ──────────────────────────────────── */
  --radius: 6px;
  --radius-lg: 10px;
  --radius-full: 980px;

  /* ─── Elevation ───────────────────────────────── */
  --shadow-sm: 0 1px 2px oklch(18% 0.012 250 / 0.05);
  --shadow-md: 0 4px 12px oklch(18% 0.012 250 / 0.08);

  /* ─── Spacing ─────────────────────────────────── */
  --gap-xs: 4px; --gap-sm: 8px; --gap-md: 16px; --gap-lg: 24px; --gap-xl: 32px;

  /* ─── Motion ──────────────────────────────────── */
  --motion-fast: 120ms;
  --motion-base: 200ms;
}

/* ─── Reset ──────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--fg);font-family:var(--font-body);font-size:var(--fs-base);line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none}
input,select,textarea{font:inherit;border:none;outline:none;background:none}
h1,h2,h3,h4,h5,h6{font-weight:600;line-height:1.3}
ul,ol{list-style:none}

/* ─── Topnav ─────────────────────────────────── */
.topnav{position:sticky;top:0;z-index:100;background:color-mix(in oklch,var(--bg) 92%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
.topnav-inner{display:flex;align-items:center;height:52px;padding:0 24px;max-width:1440px;margin:0 auto}
.topnav .logo{font-family:var(--font-display);font-size:18px;font-weight:700;color:var(--fg);letter-spacing:-0.02em}
.topnav nav{display:flex;gap:4px;margin-left:40px}
.topnav nav a{font-size:var(--fs-sm);color:var(--muted);padding:6px 12px;border-radius:6px;transition:all .15s}
.topnav nav a:hover{color:var(--fg);background:var(--fg-soft)}
.topnav nav a.active{color:var(--fg);background:var(--fg-soft);font-weight:500}
.topnav-right{margin-left:auto;display:flex;align-items:center;gap:12px}

/* ─── Buttons ────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:var(--radius);font-size:var(--fs-sm);font-weight:500;transition:all .15s;border:1px solid transparent;white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent);color:var(--surface);border-color:var(--accent)}
.btn-primary:hover{filter:brightness(0.92)}
.btn-secondary{background:var(--surface);color:var(--fg);border-color:var(--border)}
.btn-secondary:hover{border-color:var(--muted)}
.btn-ghost{color:var(--muted);padding:7px 10px}
.btn-ghost:hover{color:var(--fg);background:var(--fg-soft)}
.btn-sm{padding:4px 10px;font-size:var(--fs-xs)}
.btn-lg{padding:10px 24px;font-size:var(--fs-md)}

/* ─── Cards ──────────────────────────────────── */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px}
.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.card-title{font-size:var(--fs-md);font-weight:600}

/* ─── Forms ──────────────────────────────────── */
.search-bar{position:relative}
.search-input{width:100%;padding:11px 16px 11px 42px;border:1.5px solid var(--border);border-radius:var(--radius-lg);font-size:var(--fs-md);background:var(--surface);color:var(--fg);transition:border-color .15s}
.search-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.search-input::placeholder{color:var(--muted)}
.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted);width:18px;height:18px}

/* ─── Tabs ───────────────────────────────────── */
.tabs{display:flex;gap:0;border-bottom:1px solid var(--border)}
.tab-item{padding:10px 16px;font-size:var(--fs-sm);color:var(--muted);border-bottom:2px solid transparent;transition:all .15s;cursor:pointer}
.tab-item:hover{color:var(--fg)}
.tab-item.active{color:var(--accent);border-bottom-color:var(--accent);font-weight:500}
.tabs-inline{display:flex;align-items:center;border-bottom:none;gap:4px}
.tabs-inline .tab-item{border-bottom:none;border-radius:6px;padding:6px 12px;font-size:var(--fs-xs)}
.tabs-inline .tab-item.active{background:var(--accent-soft);color:var(--accent);border-bottom:none}

/* ─── Badges ─────────────────────────────────── */
.badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:var(--radius-full);font-size:11px;font-weight:500;font-family:var(--font-mono);letter-spacing:.02em}
.badge-success{background:var(--success-soft);color:var(--success)}
.badge-warn{background:var(--warn-soft);color:var(--warn)}
.badge-danger{background:var(--danger-soft);color:var(--danger)}
.badge-info{background:var(--accent-soft);color:var(--accent)}
.badge-neutral{background:var(--fg-soft);color:var(--muted)}

/* ─── Tables ─────────────────────────────────── */
.ds-table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.ds-table th{padding:10px 14px;text-align:left;font-size:var(--fs-xs);font-weight:500;color:var(--muted);font-family:var(--font-mono);letter-spacing:.04em;text-transform:uppercase;border-bottom:1px solid var(--border);background:var(--bg)}
.ds-table td{padding:12px 14px;border-bottom:1px solid var(--border);color:var(--fg)}
.ds-table tbody tr{transition:background .1s}
.ds-table tbody tr:hover{background:var(--fg-soft)}
.ds-table .num-col{font-family:var(--font-mono);font-variant-numeric:tabular-nums;text-align:right}
.ds-table .checkbox-col{width:40px}

/* ─── Drawer (right side panel) ──────────────── */
.drawer-overlay{position:fixed;inset:0;background:color-mix(in oklch,var(--fg) 25%,transparent);z-index:200;opacity:0;pointer-events:none;transition:opacity .2s}
.drawer-overlay.open{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;width:420px;max-width:90vw;background:var(--surface);border-left:1px solid var(--border);z-index:201;transform:translateX(100%);transition:transform .25s cubic-bezier(.4,0,.2,1);overflow-y:auto;padding:24px}
.drawer.open{transform:translateX(0)}
.drawer-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}
.drawer-title{font-size:var(--fs-lg);font-weight:600}

/* ─── Filter components ──────────────────────── */
.filter-section{padding:16px 0;border-bottom:1px solid var(--border)}
.filter-label{font-size:var(--fs-xs);font-weight:500;color:var(--muted);margin-bottom:8px;text-transform:uppercase;letter-spacing:.04em;font-family:var(--font-mono)}
.filter-group{display:flex;flex-wrap:wrap;gap:8px}
.filter-chip{display:inline-flex;align-items:center;gap:4px;padding:5px 12px;border:1px solid var(--border);border-radius:var(--radius-full);font-size:var(--fs-xs);color:var(--fg);cursor:pointer;transition:all .15s;background:var(--surface)}
.filter-chip:hover{border-color:var(--accent);color:var(--accent)}
.filter-chip.active{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.filter-select{padding:6px 10px;border:1px solid var(--border);border-radius:var(--radius);font-size:var(--fs-xs);color:var(--fg);background:var(--surface);cursor:pointer}
.filter-input{padding:6px 10px;border:1px solid var(--border);border-radius:var(--radius);font-size:var(--fs-xs);color:var(--fg);background:var(--surface);width:200px}
.filter-input:focus,.filter-select:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}

/* ─── Breadcrumb ─────────────────────────────── */
.breadcrumb{display:flex;align-items:center;gap:6px;font-size:var(--fs-xs);color:var(--muted);padding:12px 0}
.breadcrumb a:hover{color:var(--accent)}
.breadcrumb .sep{opacity:.5}

/* ─── Quick access grid ──────────────────────── */
.qa-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.qa-item{display:flex;flex-direction:column;align-items:center;gap:10px;padding:20px 12px;border:1px solid var(--border);border-radius:var(--radius-lg);cursor:pointer;transition:all .15s;background:var(--surface)}
.qa-item:hover{border-color:var(--accent);box-shadow:var(--shadow-sm);transform:translateY(-1px)}
.qa-icon{width:36px;height:36px;display:grid;place-items:center;border-radius:var(--radius);background:var(--fg-soft);color:var(--muted)}
.qa-item:hover .qa-icon{background:var(--accent-soft);color:var(--accent)}
.qa-label{font-size:var(--fs-xs);color:var(--fg);text-align:center;font-weight:500}

/* ─── Pagination ─────────────────────────────── */
.pagination{display:flex;align-items:center;justify-content:center;gap:4px;padding:20px 0}
.page-btn{width:32px;height:32px;display:grid;place-items:center;border-radius:6px;font-size:var(--fs-sm);color:var(--muted);transition:all .15s}
.page-btn:hover{background:var(--fg-soft);color:var(--fg)}
.page-btn.active{background:var(--accent);color:var(--surface)}
.page-ellipsis{color:var(--muted);font-size:var(--fs-sm);padding:0 4px}

/* ─── Checkbox ───────────────────────────────── */
.cb{width:16px;height:16px;border:1.5px solid var(--border);border-radius:4px;cursor:pointer;display:grid;place-items:center;transition:all .1s;flex-shrink:0}
.cb:hover{border-color:var(--accent)}
.cb.checked{background:var(--accent);border-color:var(--accent)}
.cb.checked::after{content:'';display:block;width:8px;height:5px;border-left:2px solid var(--surface);border-bottom:2px solid var(--surface);transform:rotate(-45deg) translateY(-1px)}

/* ─── AI Chat ────────────────────────────────── */
.ai-container{max-width:680px;margin:0 auto;padding:60px 0}
.ai-input{min-height:120px;padding:16px 20px;border:1.5px solid var(--border);border-radius:var(--radius-lg);font-size:var(--fs-md);resize:vertical;line-height:1.6;background:var(--surface);color:var(--fg);width:100%;transition:border-color .15s}
.ai-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.ai-suggestions{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.ai-suggestion{padding:8px 14px;border:1px solid var(--border);border-radius:var(--radius);font-size:var(--fs-xs);color:var(--muted);cursor:pointer;transition:all .15s}
.ai-suggestion:hover{border-color:var(--accent);color:var(--accent)}

/* ─── Progress bar (trade score) ─────────────── */
.progress{height:6px;border-radius:3px;background:var(--border);overflow:hidden;width:120px}
.progress-fill{height:100%;border-radius:3px;transition:width .3s}
.progress-fill.high{background:var(--success)}
.progress-fill.medium{background:var(--warn)}
.progress-fill.low{background:var(--danger)}

/* ─── Hot search tags ────────────────────────── */
.hot-tag{display:inline-flex;align-items:center;padding:4px 10px;border-radius:var(--radius-full);font-size:var(--fs-xs);color:var(--muted);cursor:pointer;transition:all .15s}
.hot-tag:hover{color:var(--accent)}

/* ─── Floating AI button ─────────────────────── */
.fab-ai{position:fixed;bottom:24px;right:24px;width:52px;height:52px;border-radius:50%;background:var(--accent);color:var(--surface);display:grid;place-items:center;box-shadow:var(--shadow-md);cursor:pointer;transition:transform .15s;z-index:50;border:none}
.fab-ai:hover{transform:scale(1.08)}

/* ─── Layout ─────────────────────────────────── */
.main-content{max-width:1440px;margin:0 auto;padding:24px}
.two-col{display:grid;grid-template-columns:1fr 340px;gap:24px}
.section-block{margin-bottom:28px}
.section-label{font-size:var(--fs-sm);font-weight:600;color:var(--fg);margin-bottom:14px}