Spaces:

utkarshpathak48
/

trade-copilot

Running

App Files Files Community

Utkarsh Pathak commited on Jun 18

Commit

ddd5ca4

1 Parent(s): 8c91789

Redesign 3: light mode, liquid glass, teal accent, hero orbs

Browse files

Files changed (1) hide show

static/index.html +547 -501

static/index.html CHANGED Viewed

@@ -3,50 +3,47 @@
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>Trade Copilot — AI Market Scanner</title>
 <style>
-/* ─── Design tokens ──────────────────────────────────────────────────────── */
 :root {
-  /* Base palette — deep navy, not pure black */
-  --bg:        #080c14;
-  --bg1:       #0d1220;
-  --bg2:       #111827;
-  --bg3:       #1a2236;
-  --bg4:       #1f2a40;
-  /* Borders */
-  --b1: rgba(255,255,255,0.06);
-  --b2: rgba(255,255,255,0.10);
-  --b3: rgba(255,255,255,0.16);
-  /* Text */
-  --t1: #f0f4ff;
-  --t2: #8b95b0;
-  --t3: #4a5268;
-  /* Brand — electric indigo + cyan accent */
-  --indigo:  #6366f1;
-  --indigo2: #818cf8;
-  --cyan:    #22d3ee;
-  --cyan2:   #67e8f9;
   /* Semantic */
-  --green:  #10b981;
-  --green2: #34d399;
-  --red:    #f43f5e;
-  --red2:   #fb7185;
-  --amber:  #f59e0b;
-  --amber2: #fbbf24;
-  --font: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', 'Helvetica Neue', sans-serif;
-  --mono: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
-  --r:  12px;
-  --r2: 20px;
   --ease: cubic-bezier(0.16, 1, 0.3, 1);
 }
 *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 html { scroll-behavior: smooth; }
 body {
   font-family: var(--font);
   background: var(--bg);
@@ -56,92 +53,134 @@ body {
   overflow-x: hidden;
 }
-/* ─── Global noise texture overlay ──────────────────────────────────────── */
-body::after {
-  content: '';
-  position: fixed; inset: 0;
-  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
-  opacity: 0.018;
   pointer-events: none;
-  z-index: 9999;
 }
-/* ─── Navbar ─────────────────────────────────────────────────────────────── */
 nav {
-  position: fixed; top: 0; left: 0; right: 0;
-  z-index: 100;
-  height: 58px;
   display: flex; align-items: center;
-  padding: 0 32px;
-  gap: 16px;
-  background: rgba(8,12,20,0.8);
-  backdrop-filter: blur(24px) saturate(160%);
-  -webkit-backdrop-filter: blur(24px) saturate(160%);
-  border-bottom: 1px solid var(--b1);
 }
 .brand {
   display: flex; align-items: center; gap: 10px;
-  flex-shrink: 0; text-decoration: none; color: inherit;
 }
-.brand-icon {
-  width: 30px; height: 30px;
-  background: linear-gradient(135deg, var(--indigo), var(--cyan));
-  border-radius: 8px;
   display: grid; place-items: center;
-  font-size: 14px;
-  box-shadow: 0 0 20px rgba(99,102,241,0.4);
 }
 .brand-name {
-  font-size: 15px; font-weight: 700;
-  letter-spacing: -0.4px;
-  background: linear-gradient(90deg, var(--t1), var(--t2));
-  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
 }
 #status-pill {
   display: inline-flex; align-items: center; gap: 6px;
-  font-size: 11px; font-weight: 600;
   padding: 4px 12px; border-radius: 99px;
-  border: 1px solid var(--b1);
-  background: var(--bg2);
   color: var(--t3);
-  transition: all 0.4s var(--ease);
-  white-space: nowrap;
 }
-#status-pill.ok  { color: var(--green2); border-color: rgba(16,185,129,0.2); background: rgba(16,185,129,0.06); }
-#status-pill.err { color: var(--red2);   border-color: rgba(244,63,94,0.2);  background: rgba(244,63,94,0.06); }
-.live-dot {
-  width: 6px; height: 6px; border-radius: 50%;
-  background: currentColor; flex-shrink: 0;
-}
 .ok .live-dot { animation: livePulse 2s ease-in-out infinite; }
 @keyframes livePulse {
-  0%,100% { box-shadow: 0 0 0 0 rgba(52,211,153,0.5); }
-  50%      { box-shadow: 0 0 0 5px rgba(52,211,153,0); }
 }
-/* Nav controls */
-.nav-right {
-  display: flex; align-items: center; gap: 10px;
   margin-left: auto;
 }
 .input-chip {
   display: flex; align-items: center; gap: 8px;
-  background: var(--bg2);
-  border: 1px solid var(--b1);
-  border-radius: 10px;
-  padding: 7px 14px;
   transition: border-color 0.2s, box-shadow 0.2s;
 }
 .input-chip:focus-within {
-  border-color: rgba(99,102,241,0.4);
-  box-shadow: 0 0 0 3px rgba(99,102,241,0.08);
 }
 .input-chip label {
-  font-size: 10px; font-weight: 700; letter-spacing: 0.8px;
   text-transform: uppercase; color: var(--t3);
   user-select: none; white-space: nowrap;
 }
@@ -155,380 +194,410 @@ nav {
 .input-chip input::-webkit-inner-spin-button,
 .input-chip input::-webkit-outer-spin-button { -webkit-appearance: none; }
-#scan-btn {
-  display: inline-flex; align-items: center; gap: 8px;
-  background: linear-gradient(135deg, var(--indigo), #4f46e5);
   color: #fff; border: none;
   padding: 9px 22px; border-radius: 10px;
   font-size: 13px; font-weight: 700; font-family: var(--font);
-  letter-spacing: -0.2px; cursor: pointer;
-  transition: transform 0.2s var(--ease), box-shadow 0.2s, opacity 0.2s;
-  box-shadow: 0 4px 24px rgba(99,102,241,0.35), inset 0 1px 0 rgba(255,255,255,0.15);
-  white-space: nowrap; flex-shrink: 0;
 }
-#scan-btn:hover  { transform: translateY(-1px); box-shadow: 0 8px 32px rgba(99,102,241,0.5), inset 0 1px 0 rgba(255,255,255,0.15); }
-#scan-btn:active { transform: translateY(0) scale(0.98); }
-#scan-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; }
-/* ─── Hero / above-fold ──────────────────────────────────────────────────── */
 .hero {
-  position: relative;
-  padding: 120px 32px 60px;
   text-align: center;
-  overflow: hidden;
-}
-/* Radial gradient hero bg */
-.hero::before {
-  content: '';
-  position: absolute; inset: 0;
-  background:
-    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(99,102,241,0.18) 0%, transparent 60%),
-    radial-gradient(ellipse 50% 40% at 20% 60%, rgba(34,211,238,0.07) 0%, transparent 50%),
-    radial-gradient(ellipse 40% 40% at 80% 70%, rgba(99,102,241,0.06) 0%, transparent 50%);
-  pointer-events: none;
-}
-/* Grid lines */
-.hero::after {
-  content: '';
-  position: absolute; inset: 0;
-  background-image:
-    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
-    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
-  background-size: 60px 60px;
-  mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, black 30%, transparent 80%);
-  pointer-events: none;
 }
-.hero-eyebrow {
   display: inline-flex; align-items: center; gap: 8px;
   font-size: 11px; font-weight: 700; letter-spacing: 1.2px;
-  text-transform: uppercase;
-  color: var(--indigo2);
-  background: rgba(99,102,241,0.1);
-  border: 1px solid rgba(99,102,241,0.2);
   padding: 5px 14px; border-radius: 99px;
-  margin-bottom: 24px;
-  animation: fadeUp 0.6s var(--ease) 0.1s both;
 }
-.hero-eyebrow span { width: 5px; height: 5px; border-radius: 50%; background: var(--indigo2); }
-.hero-title {
-  font-size: clamp(36px, 5vw, 62px);
-  font-weight: 800;
-  letter-spacing: -2px;
-  line-height: 1.05;
-  margin-bottom: 20px;
-  animation: fadeUp 0.6s var(--ease) 0.2s both;
 }
-.hero-title .grad {
-  background: linear-gradient(135deg, #fff 0%, var(--indigo2) 50%, var(--cyan) 100%);
   -webkit-background-clip: text; -webkit-text-fill-color: transparent;
 }
 .hero-sub {
-  font-size: 17px; font-weight: 400;
-  color: var(--t2); line-height: 1.6;
-  max-width: 500px; margin: 0 auto 36px;
-  animation: fadeUp 0.6s var(--ease) 0.3s both;
 }
-.hero-cta {
   display: inline-flex; align-items: center; gap: 10px;
-  background: linear-gradient(135deg, var(--indigo), #4f46e5);
   color: #fff; border: none;
-  padding: 14px 32px; border-radius: 14px;
-  font-size: 15px; font-weight: 700; font-family: var(--font);
   cursor: pointer; letter-spacing: -0.3px;
-  transition: transform 0.2s var(--ease), box-shadow 0.2s, opacity 0.15s;
-  box-shadow: 0 8px 32px rgba(99,102,241,0.4), inset 0 1px 0 rgba(255,255,255,0.15);
-  animation: fadeUp 0.6s var(--ease) 0.4s both;
-}
-.hero-cta:hover  { transform: translateY(-2px); box-shadow: 0 16px 48px rgba(99,102,241,0.5), inset 0 1px 0 rgba(255,255,255,0.15); }
-.hero-cta:active { transform: scale(0.98); }
-.hero-cta:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
-/* Stats strip */
-.stats-strip {
-  display: flex; justify-content: center; gap: 0;
-  margin-top: 52px;
-  border: 1px solid var(--b1);
-  border-radius: 16px;
-  background: var(--bg1);
-  overflow: hidden;
-  max-width: 600px; margin-left: auto; margin-right: auto;
-  animation: fadeUp 0.6s var(--ease) 0.5s both;
 }
-.stat-cell {
-  flex: 1; padding: 18px 24px; text-align: center;
 }
-.stat-cell + .stat-cell { border-left: 1px solid var(--b1); }
 .stat-val {
-  font-size: 22px; font-weight: 800; letter-spacing: -0.8px;
-  color: var(--t1);
 }
 .stat-label {
   font-size: 11px; font-weight: 600; letter-spacing: 0.5px;
-  color: var(--t3); text-transform: uppercase; margin-top: 3px;
 }
-@keyframes fadeUp {
-  from { opacity: 0; transform: translateY(20px); }
   to   { opacity: 1; transform: translateY(0); }
 }
-/* ─── Scan section ───────────────────────────────────────────────────────── */
 #scan-section {
-  padding: 0 32px 80px;
-  max-width: 1480px;
-  margin: 0 auto;
 }
 #meta {
-  font-size: 12px; color: var(--t3);
-  font-weight: 600; letter-spacing: 0.2px;
-  margin-bottom: 24px; min-height: 16px;
 }
 #error-banner {
   display: none;
-  background: rgba(244,63,94,0.06);
-  border: 1px solid rgba(244,63,94,0.2);
-  border-radius: 12px;
-  padding: 14px 20px;
-  color: var(--red2); font-size: 13px; font-weight: 600;
   margin-bottom: 20px;
-  animation: fadeUp 0.3s var(--ease);
 }
-/* ─── Loader ─────────────────────────────────────────────────────────────── */
 #loader {
-  display: none;
-  flex-direction: column; align-items: center;
-  padding: 80px 0; gap: 20px;
-}
-.loader-orbit {
-  position: relative; width: 56px; height: 56px;
-}
-.loader-orbit::before {
-  content: '';
-  position: absolute; inset: 0;
-  border-radius: 50%;
-  border: 2px solid var(--b2);
 }
-.loader-orbit::after {
   content: '';
   position: absolute; inset: 0;
-  border-radius: 50%;
   border: 2px solid transparent;
-  border-top-color: var(--indigo2);
-  border-right-color: var(--cyan);
-  animation: orbit 0.8s linear infinite;
 }
-@keyframes orbit { to { transform: rotate(360deg); } }
-.loader-inner {
-  position: absolute; inset: 10px;
-  border-radius: 50%;
-  border: 2px solid transparent;
-  border-bottom-color: rgba(99,102,241,0.3);
-  animation: orbit 1.4s linear infinite reverse;
-}
-.loader-text h3 { font-size: 18px; font-weight: 700; letter-spacing: -0.3px; margin-bottom: 4px; text-align: center; }
-.loader-text p  { font-size: 13px; color: var(--t3); text-align: center; }
-.progress-track { width: 180px; height: 2px; background: var(--bg3); border-radius: 1px; overflow: hidden; }
-.progress-fill  { height: 100%; background: linear-gradient(90deg, var(--indigo), var(--cyan)); border-radius: 1px; animation: progressLoop 1.8s ease-in-out infinite; }
-@keyframes progressLoop {
-  0%   { width: 0%; margin-left: 0%; }
   50%  { width: 60%; margin-left: 20%; }
-  100% { width: 0%; margin-left: 100%; }
 }
-/* ─── Empty state ────────────────────────────────────────────────────────── */
-#empty { display: none; }
-/* ─── Cards grid ─────────────────────────────────────────────────────────── */
 #grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
   gap: 16px;
 }
-/* ─── Trade Card ─────────────────────────────────────────────────────────── */
 .card {
   position: relative; overflow: hidden;
-  background: var(--bg1);
-  border: 1px solid var(--b1);
-  border-radius: 20px;
   padding: 24px;
   transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s;
-  animation: cardReveal 0.5s var(--ease) both;
 }
-@keyframes cardReveal {
-  from { opacity: 0; transform: translateY(24px) scale(0.97); }
   to   { opacity: 1; transform: translateY(0) scale(1); }
 }
 .card:hover {
-  transform: translateY(-4px);
-  border-color: rgba(99,102,241,0.25);
   box-shadow:
-    0 0 0 1px rgba(99,102,241,0.12),
-    0 20px 60px rgba(0,0,0,0.5),
-    0 0 80px rgba(99,102,241,0.05);
 }
-/* Top accent stripe */
-.card-stripe {
-  position: absolute; top: 0; left: 0; right: 0; height: 2px;
-  background: linear-gradient(90deg, var(--indigo), var(--cyan));
-  opacity: 0;
-  transition: opacity 0.3s;
 }
-.card:hover .card-stripe { opacity: 1; }
-/* Card glow */
-.card-glow {
-  position: absolute; inset: 0;
-  background: radial-gradient(ellipse 70% 40% at 50% 0%, rgba(99,102,241,0.05), transparent);
-  pointer-events: none; opacity: 0;
   transition: opacity 0.3s;
 }
-.card:hover .card-glow { opacity: 1; }
 /* ── Card header ── */
 .ch {
   display: flex; justify-content: space-between;
-  align-items: flex-start; margin-bottom: 20px;
 }
-.ch-left {}
 .ch-symbol {
-  font-size: 24px; font-weight: 800;
-  letter-spacing: -1px; line-height: 1;
-  color: var(--t1);
 }
-.ch-symbol .quote { font-size: 16px; font-weight: 500; color: var(--t3); letter-spacing: 0; }
-.ch-meta {
-  display: flex; align-items: center; gap: 10px;
-  margin-top: 6px; font-size: 12px;
 }
-.ch-change { font-weight: 700; }
-.ch-change.pos { color: var(--green2); }
-.ch-change.neg { color: var(--red2); }
-.ch-vol { color: var(--t3); font-weight: 500; }
 .dir-tag {
   font-size: 10px; font-weight: 800; letter-spacing: 1px;
-  text-transform: uppercase; padding: 6px 14px;
-  border-radius: 99px;
 }
-.dir-tag.long  { background: rgba(16,185,129,0.1); color: var(--green2); border: 1px solid rgba(16,185,129,0.2); }
-.dir-tag.short { background: rgba(244,63,94,0.1);  color: var(--red2);   border: 1px solid rgba(244,63,94,0.2); }
 /* ── Confidence ── */
-.conf {
-  margin-bottom: 20px;
-  padding: 16px;
-  background: var(--bg2);
-  border-radius: 12px;
-  border: 1px solid var(--b1);
 }
 .conf-top {
-  display: flex; justify-content: space-between;
-  align-items: baseline; margin-bottom: 10px;
 }
 .conf-lbl {
   font-size: 10px; font-weight: 700; letter-spacing: 0.8px;
   text-transform: uppercase; color: var(--t3);
 }
 .conf-score {
-  font-size: 28px; font-weight: 800; letter-spacing: -1px; line-height: 1;
 }
-.conf-score .denom { font-size: 13px; font-weight: 500; color: var(--t3); }
 .conf-track {
-  height: 4px; background: var(--bg3);
-  border-radius: 2px; overflow: hidden;
 }
 .conf-fill {
-  height: 100%; border-radius: 2px;
   transition: width 1s var(--ease);
 }
-.conf-fill.hi { background: linear-gradient(90deg, #059669, var(--green2)); }
 .conf-fill.md { background: linear-gradient(90deg, #b45309, var(--amber2)); }
-.conf-fill.lo { background: linear-gradient(90deg, #be123c, var(--red2)); }
 /* ── TF chips ── */
-.tf-row {
-  display: flex; gap: 6px; margin-bottom: 20px; flex-wrap: wrap;
-}
 .tf-chip {
-  font-size: 10px; font-weight: 700; letter-spacing: 0.4px;
   padding: 4px 10px; border-radius: 99px; text-transform: uppercase;
 }
-.tf-chip.up    { background: rgba(16,185,129,0.08);  color: var(--green2); border: 1px solid rgba(16,185,129,0.15); }
-.tf-chip.down  { background: rgba(244,63,94,0.08);   color: var(--red2);   border: 1px solid rgba(244,63,94,0.15); }
-.tf-chip.range { background: rgba(245,158,11,0.08);  color: var(--amber2); border: 1px solid rgba(245,158,11,0.15); }
-.tf-chip.na    { background: var(--bg3); color: var(--t3); border: 1px solid var(--b1); }
 /* ── Rule ── */
-.rule { height: 1px; background: var(--b1); margin: 18px -24px; }
-/* ── Levels ── */
 .levels {
   display: grid; grid-template-columns: repeat(3,1fr);
-  gap: 8px; margin-bottom: 16px;
 }
 .lv {
-  background: var(--bg2); border-radius: 10px;
-  padding: 11px 13px;
-  border: 1px solid var(--b1);
   position: relative; overflow: hidden;
-  transition: border-color 0.2s;
 }
-.lv:hover { border-color: var(--b2); }
-.lv-top {
-  height: 2px; border-radius: 10px 10px 0 0;
-  position: absolute; top: 0; left: 0; right: 0;
 }
-.lv.entry .lv-top { background: var(--indigo2); }
-.lv.sl    .lv-top { background: var(--red2); }
-.lv.tp    .lv-top { background: var(--green2); }
-.lv.rr    .lv-top { background: var(--amber2); }
-.lv-label {
-  font-size: 9px; font-weight: 700; letter-spacing: 0.8px;
-  text-transform: uppercase; color: var(--t3); margin-bottom: 5px;
 }
 .lv-val {
-  font-size: 14px; font-weight: 700;
-  font-variant-numeric: tabular-nums; letter-spacing: -0.3px;
 }
-.lv.entry .lv-val { color: var(--indigo2); }
-.lv.sl    .lv-val { color: var(--red2); }
-.lv.tp    .lv-val { color: var(--green2); }
-.lv.rr    .lv-val { color: var(--amber2); }
-/* ── Sizing row ── */
 .sizing {
-  display: flex; background: var(--bg2);
   border-radius: 10px; overflow: hidden;
-  border: 1px solid var(--b1); margin-bottom: 16px;
-}
-.sz { flex: 1; padding: 11px 13px; text-align: center; }
-.sz + .sz { border-left: 1px solid var(--b1); }
-.sz-label {
-  font-size: 9px; font-weight: 700; letter-spacing: 0.8px;
-  text-transform: uppercase; color: var(--t3); margin-bottom: 4px;
 }
 .sz-val { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
 /* ── Narrative ── */
 .narr {
   font-size: 12px; color: var(--t2); line-height: 1.6;
-  padding: 12px 14px;
-  background: rgba(99,102,241,0.04);
-  border-left: 2px solid rgba(99,102,241,0.35);
   border-radius: 0 8px 8px 0;
-  margin-bottom: 16px;
 }
 /* ── Evidence ── */
@@ -536,69 +605,76 @@ nav {
   font-size: 9px; font-weight: 700; letter-spacing: 0.8px;
   text-transform: uppercase; color: var(--t3); margin-bottom: 10px;
 }
-.ev-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
 .ev-key { font-size: 11px; font-weight: 600; color: var(--t2); width: 80px; flex-shrink: 0; }
-.ev-track { flex: 1; height: 3px; background: var(--bg3); border-radius: 2px; overflow: hidden; }
-.ev-fill  { height: 100%; border-radius: 2px; background: linear-gradient(90deg, var(--indigo), var(--indigo2)); transition: width 0.8s var(--ease); }
-.ev-num   { font-size: 11px; font-weight: 800; width: 20px; text-align: right; color: var(--t1); }
-/* ── Card actions ── */
-.card-acts { display: flex; gap: 8px; margin-top: 18px; }
 .ca {
-  flex: 1; display: inline-flex; align-items: center;
-  justify-content: center; gap: 6px;
-  padding: 10px 14px; border-radius: 10px;
   font-size: 12px; font-weight: 700; font-family: var(--font);
-  border: none; cursor: pointer;
-  transition: transform 0.15s var(--ease), opacity 0.15s, background 0.15s;
-  text-decoration: none; white-space: nowrap;
-}
-.ca:hover  { transform: scale(1.03); }
-.ca:active { transform: scale(0.97); opacity: 0.85; }
-.ca-chart  { background: rgba(99,102,241,0.1); color: var(--indigo2); border: 1px solid rgba(99,102,241,0.2); }
-.ca-copy   { background: var(--bg3); color: var(--t1); border: 1px solid var(--b1); }
-.ca-copy:hover { background: var(--bg4); }
-.ca-ref    { flex: 0; padding: 10px 12px; background: var(--bg3); color: var(--t3); border: 1px solid var(--b1); }
-.ca-ref:hover { color: var(--t1); border-color: var(--b2); }
 /* Error card */
 .err-card {
-  background: rgba(244,63,94,0.06);
-  border: 1px solid rgba(244,63,94,0.2);
-  border-radius: 16px; padding: 20px;
-  color: var(--red2); font-size: 13px; font-weight: 600;
 }
-/* ─── Mobile ──────────────────────────────────────────────────────────────── */
 @media (max-width: 700px) {
-  nav { padding: 0 16px; flex-wrap: wrap; height: auto; padding-top: 12px; padding-bottom: 12px; gap: 10px; }
-  .nav-right { width: 100%; margin-left: 0; }
   .input-chip { flex: 1; min-width: 0; }
-  .hero { padding: 100px 20px 40px; }
-  .stats-strip { flex-direction: column; }
-  .stat-cell + .stat-cell { border-left: none; border-top: 1px solid var(--b1); }
-  #scan-section { padding: 0 16px 60px; }
   #grid { grid-template-columns: 1fr; }
-  .card { padding: 18px; border-radius: 16px; }
-  .rule { margin: 16px -18px; }
 }
 </style>
 </head>
 <body>
-<!-- ─── Nav ───────────────────────────────────────────────────────────────── -->
 <nav>
   <div class="brand">
-    <div class="brand-icon">⚡</div>
     <span class="brand-name">Trade Copilot</span>
   </div>
-  <div id="status-pill">
     <span class="live-dot"></span>
     <span id="status-text">Connecting…</span>
-  </div>
-  <div class="nav-right">
     <div class="input-chip">
       <label for="account">Account $</label>
       <input id="account" type="number" value="10000" min="100">
@@ -618,68 +694,63 @@ nav {
   </div>
 </nav>
-<!-- ─── Hero ───────────────────────────────────────────────────────────────── -->
 <section class="hero">
-  <div class="hero-eyebrow"><span></span>AI-Powered · Real-Time · Zero Hallucination</div>
   <h1 class="hero-title">
-    Find your<br><span class="grad">next best trade.</span>
   </h1>
   <p class="hero-sub">
-    Scans the entire crypto market in real-time. Surfaces top setups with entry, stop-loss, take-profit, sizing — all computed deterministically from live exchange data.
   </p>
-  <button class="hero-cta" id="hero-cta">
-    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
-    Scan Market Now
-  </button>
-  <div class="stats-strip">
-    <div class="stat-cell">
-      <div class="stat-val" id="stat-pairs">—</div>
-      <div class="stat-label">Live Pairs</div>
-    </div>
-    <div class="stat-cell">
-      <div class="stat-val">3</div>
-      <div class="stat-label">Exchanges</div>
-    </div>
-    <div class="stat-cell">
-      <div class="stat-val">3</div>
-      <div class="stat-label">Timeframes</div>
-    </div>
-    <div class="stat-cell">
-      <div class="stat-val">40/20/20/20</div>
-      <div class="stat-label">Score Weight</div>
-    </div>
   </div>
 </section>
-<!-- ─── Scan results ────────────────────────────────────────────────────────── -->
 <section id="scan-section">
   <div id="meta"></div>
   <div id="error-banner"></div>
   <div id="loader">
-    <div class="loader-orbit">
-      <div class="loader-inner"></div>
-    </div>
     <div class="loader-text">
       <h3>Scanning the market</h3>
-      <p>Pulling live data · computing indicators · ranking setups</p>
     </div>
-    <div class="progress-track"><div class="progress-fill"></div></div>
   </div>
-  <div id="empty"></div>
   <div id="grid"></div>
 </section>
 <script>
-/* ── Helpers ────────────────────────────────────────────────────────────── */
 const $  = id => document.getElementById(id);
 const sf = n => {
   if (n == null) return '—';
   const v = +n;
-  if (v >= 10000) return v.toLocaleString('en-US', {maximumFractionDigits:0});
-  if (v >= 100)   return v.toLocaleString('en-US', {maximumFractionDigits:2});
   if (v >= 1)     return v.toFixed(4);
   if (v >= 0.001) return v.toFixed(6);
   return v.toFixed(8);
@@ -694,47 +765,40 @@ const fu = n => {
 };
 const pc = n => n == null ? null : (n>=0?'+':'')+( +n).toFixed(2)+'%';
-/* ── Status ─────────────────────────────────────────────────────────────── */
 async function checkStatus() {
   try {
-    const d = await fetch('/api/status').then(r=>r.json());
     const pill = $('status-pill'), tx = $('status-text');
-    if (d.ok) {
-      tx.textContent = d.source.toUpperCase()+' · '+d.market;
-      pill.className = 'ok';
-    } else {
-      tx.textContent = 'No exchange'; pill.className = 'err';
-    }
   } catch { $('status-text').textContent='Offline'; $('status-pill').className='err'; }
 }
-/* ── Wire up both scan buttons ──────────────────────────────────────────── */
-function scanBtnHTML(loading) {
-  if (loading) return `<div style="width:13px;height:13px;border:2px solid rgba(255,255,255,0.25);border-top-color:#fff;border-radius:50%;animation:orbit .7s linear infinite;flex-shrink:0"></div>Scanning…`;
-  return `<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>Scan`;
-}
-function heroBtnHTML(loading) {
-  if (loading) return `<div style="width:16px;height:16px;border:2.5px solid rgba(255,255,255,0.25);border-top-color:#fff;border-radius:50%;animation:orbit .7s linear infinite;flex-shrink:0"></div>Scanning…`;
-  return `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>Scan Market Now`;
-}
 $('scan-btn-nav').addEventListener('click', runScan);
-$('hero-cta').addEventListener('click', () => { $('scan-section').scrollIntoView({behavior:'smooth', block:'start'}); runScan(); });
 async function runScan() {
-  const navBtn  = $('scan-btn-nav');
-  const heroBtn = $('hero-cta');
-  const grid = $('grid'), meta = $('meta');
-  const err  = $('error-banner'), loader = $('loader');
-  // State
-  [navBtn, heroBtn].forEach(b => { b.disabled = true; });
-  navBtn.innerHTML  = scanBtnHTML(true);
-  heroBtn.innerHTML = heroBtnHTML(true);
   grid.innerHTML = '';
   err.style.display = 'none';
   loader.style.display = 'flex';
-  $('scan-section').scrollIntoView({behavior:'smooth', block:'start'});
   const account = +$('account').value || 10000;
   const risk    = +$('risk').value    || 1;
@@ -742,33 +806,27 @@ async function runScan() {
   try {
     const data = await fetch(`/api/scan?account=${account}&risk_pct=${risk}&top=${top}`)
-      .then(r => { if(!r.ok) throw new Error(`HTTP ${r.status}`); return r.json(); });
     loader.style.display = 'none';
     const ts = new Date(data.fetched_at).toLocaleTimeString([],{hour:'2-digit',minute:'2-digit'});
     meta.textContent = `${data.cards.length} setups · ${data.source.toUpperCase()} · ${data.market} · ${ts}`;
-    // Update live pairs stat
-    const sp = $('stat-pairs');
-    if (sp) sp.textContent = data.cards.length+'+ live';
-    data.cards.forEach((c,i) => {
       const el = buildCard(c, account, risk);
-      el.style.animationDelay = (i*60)+'ms';
       grid.appendChild(el);
     });
   } catch(e) {
     loader.style.display = 'none';
-    err.textContent = '⚠︎  '+e.message;
     err.style.display = 'block';
-  } finally {
-    [navBtn, heroBtn].forEach(b => { b.disabled = false; });
-    navBtn.innerHTML  = scanBtnHTML(false);
-    heroBtn.innerHTML = heroBtnHTML(false);
-  }
 }
-/* ── Card builder ───────────────────────────────────────────────────────── */
 function buildCard(c, account, risk) {
   if (c.error) {
     const d = document.createElement('div');
@@ -777,30 +835,28 @@ function buildCard(c, account, risk) {
     return d;
   }
-  const conf    = +(c.confidence||0);
-  const confPct = Math.min(100, conf*10);
-  const confCls = conf>=7?'hi':conf>=5?'md':'lo';
-  const confColor = conf>=7?'var(--green2)':conf>=5?'var(--amber2)':'var(--red2)';
-  const dir = (c.direction||'long').toLowerCase();
-  const lv  = c.levels||{}, sz = c.sizing||{};
-  const ev  = c.evidence||{}, tf = c.timeframes||{};
-  const ri  = c.rank_info||{};
-  const base = (c.symbol||'').replace(/USD$/,'');
   const chg  = ri.change_24h_pct;
-  const chgHTML = chg!=null
-    ? `<span class="ch-change ${chg>=0?'pos':'neg'}">${pc(chg)}</span>`:'';
-  const volHTML = ri.quote_volume_usd
-    ? `<span class="ch-vol">${fu(ri.quote_volume_usd)}</span>`:'';
   const tfHTML = ['1h','15m','5m'].map(t => {
-    const s = (tf[t]?.structure||'').toLowerCase();
     const cls = s==='uptrend'?'up':s==='downtrend'?'down':s?'range':'na';
     return `<span class="tf-chip ${cls}">${t} · ${s||'n/a'}</span>`;
   }).join('');
   const evHTML = ['structure','volume','positioning','catalyst'].map(k => {
-    const e = ev[k]||{}, sc = +(e.score||0);
     return `<div class="ev-row">
       <span class="ev-key">${k[0].toUpperCase()+k.slice(1)}</span>
       <div class="ev-track"><div class="ev-fill" style="width:${sc*10}%"></div></div>
@@ -808,66 +864,59 @@ function buildCard(c, account, risk) {
     </div>`;
   }).join('');
-  let narr = (c.narrative||'');
-  if (narr.length>200) narr = narr.slice(0,197)+'…';
   const plan = [
     `${c.symbol} ${dir.toUpperCase()} | Confidence ${conf}/10`,
-    `Entry     ${sf(c.close)}`,
-    `SL        ${sf(lv.sl)}`,
-    `TP1       ${sf(lv.tp1)}`,
-    `TP2       ${sf(lv.tp2)}`,
-    `TP3       ${sf(lv.tp3)}`,
-    `R/R       ${lv.rr1??'—'}×`,
-    `Risk      ${fu(sz.risk_usd)} | Units ${sz.units??'—'} | Notional ${fu(sz.notional)}`,
-    `Time      ${new Date().toLocaleString()}`
   ].join('\n');
-  const tvUrl = `https://www.tradingview.com/chart/?symbol=${encodeURIComponent(c.tv_symbol||c.symbol)}`;
   const el = document.createElement('div');
   el.className = 'card';
   el.innerHTML = `
-    <div class="card-stripe"></div>
-    <div class="card-glow"></div>
     <div class="ch">
-      <div class="ch-left">
-        <div class="ch-symbol">${base}<span class="quote">USD</span></div>
-        <div class="ch-meta">${chgHTML}${volHTML}</div>
       </div>
       <span class="dir-tag ${dir}">${dir.toUpperCase()}</span>
     </div>
-    <div class="conf">
       <div class="conf-top">
         <span class="conf-lbl">Confidence</span>
-        <span class="conf-score" style="color:${confColor}">${conf}<span class="denom">/10</span></span>
       </div>
       <div class="conf-track"><div class="conf-fill ${confCls}" style="width:${confPct}%"></div></div>
     </div>
     <div class="tf-row">${tfHTML}</div>
     <div class="rule"></div>
     <div class="levels">
-      <div class="lv entry"><div class="lv-top"></div><div class="lv-label">Entry</div><div class="lv-val">${sf(c.close)}</div></div>
-      <div class="lv sl">  <div class="lv-top"></div><div class="lv-label">Stop Loss</div><div class="lv-val">${sf(lv.sl)}</div></div>
-      <div class="lv rr">  <div class="lv-top"></div><div class="lv-label">R / R</div><div class="lv-val">${lv.rr1??'—'}×</div></div>
-      <div class="lv tp">  <div class="lv-top"></div><div class="lv-label">TP 1</div><div class="lv-val">${sf(lv.tp1)}</div></div>
-      <div class="lv tp">  <div class="lv-top"></div><div class="lv-label">TP 2</div><div class="lv-val">${sf(lv.tp2)}</div></div>
-      <div class="lv tp">  <div class="lv-top"></div><div class="lv-label">TP 3</div><div class="lv-val">${sf(lv.tp3)}</div></div>
     </div>
     <div class="sizing">
-      <div class="sz"><div class="sz-label">Risk</div><div class="sz-val">${fu(sz.risk_usd)}</div></div>
-      <div class="sz"><div class="sz-label">Units</div><div class="sz-val">${sz.units??'—'}</div></div>
-      <div class="sz"><div class="sz-label">Notional</div><div class="sz-val">${fu(sz.notional)}</div></div>
     </div>
-    ${narr?`<div class="narr">${narr}</div>`:''}
     <div class="rule"></div>
     <div class="ev-title">Score Breakdown</div>
@@ -882,37 +931,34 @@ function buildCard(c, account, risk) {
         <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
         Copy Plan
       </button>
-      <button class="ca ca-ref" data-sym="${c.symbol}" data-acc="${account}" data-risk="${risk}" title="Refresh card">
         <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/></svg>
       </button>
     </div>`;
-  // Copy
   el.querySelector('.ca-copy').addEventListener('click', function() {
-    const text = this.dataset.plan.replace(/\\n/g,'\n');
     navigator.clipboard.writeText(text).then(() => {
       const orig = this.innerHTML;
       this.innerHTML = `<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><polyline points="20 6 9 17 4 12"/></svg> Copied!`;
-      this.style.color = 'var(--green2)'; this.style.borderColor = 'rgba(16,185,129,0.3)';
       setTimeout(() => { this.innerHTML = orig; this.style.color=''; this.style.borderColor=''; }, 2200);
     }).catch(() => prompt('Copy:', text));
   });
-  // Refresh
   el.querySelector('.ca-ref').addEventListener('click', async function() {
-    const {sym, acc, risk} = this.dataset, orig = this.innerHTML;
     this.disabled = true;
-    this.innerHTML = `<div style="width:13px;height:13px;border:2px solid rgba(255,255,255,0.15);border-top-color:var(--t2);border-radius:50%;animation:orbit .7s linear infinite"></div>`;
     try {
-      const data = await fetch(`/api/card/${sym}?account=${acc}&risk_pct=${risk}`).then(r=>r.json());
-      el.replaceWith(buildCard(data, +acc, +risk));
     } catch { this.disabled=false; this.innerHTML=orig; }
   });
   return el;
 }
-/* ── Init ───────────────────────────────────────────────────────────────── */
 checkStatus();
 setInterval(checkStatus, 60000);
 </script>

 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Trade Copilot</title>
 <style>
+/* ── Tokens ───────────────────────────────────────────────────────────── */
 :root {
+  --bg:      #f2f4f8;
+  --white:   #ffffff;
+  --glass:   rgba(255,255,255,0.65);
+  --glass2:  rgba(255,255,255,0.45);
+  --glass3:  rgba(255,255,255,0.25);
+  --t1:  #0a0f1e;
+  --t2:  #3d4966;
+  --t3:  #8892ab;
+  /* Teal-green — money, growth, trust */
+  --teal:   #0d9488;
+  --teal2:  #14b8a6;
+  --teal3:  #99f6e4;
+  /* Accent blue — intelligence, calm */
+  --blue:   #2563eb;
+  --blue2:  #3b82f6;
   /* Semantic */
+  --green:  #059669;
+  --green2: #10b981;
+  --red:    #dc2626;
+  --red2:   #ef4444;
+  --amber:  #d97706;
+  --amber2: #f59e0b;
+  --r:  14px;
+  --r2: 22px;
+  --font: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', sans-serif;
   --ease: cubic-bezier(0.16, 1, 0.3, 1);
+  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
 }
 *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 html { scroll-behavior: smooth; }
 body {
   font-family: var(--font);
   background: var(--bg);
   overflow-x: hidden;
 }
+/* ── Hero background ─────────────────────────────────────────────────── */
+.hero-bg {
+  position: fixed; inset: 0; z-index: 0;
+  overflow: hidden;
   pointer-events: none;
 }
+/* Large abstract gradient orbs — the "hero shape" */
+.orb {
+  position: absolute;
+  border-radius: 50%;
+  filter: blur(80px);
+  opacity: 0.55;
+}
+.orb-1 {
+  width: 700px; height: 700px;
+  top: -200px; left: -150px;
+  background: radial-gradient(circle, #99f6e4, #5eead4, #0d9488);
+  animation: drift1 18s ease-in-out infinite alternate;
+}
+.orb-2 {
+  width: 600px; height: 600px;
+  top: -100px; right: -200px;
+  background: radial-gradient(circle, #bfdbfe, #93c5fd, #3b82f6);
+  opacity: 0.4;
+  animation: drift2 22s ease-in-out infinite alternate;
+}
+.orb-3 {
+  width: 500px; height: 500px;
+  bottom: 10%; left: 30%;
+  background: radial-gradient(circle, #d9f99d, #86efac, #22c55e);
+  opacity: 0.25;
+  animation: drift3 26s ease-in-out infinite alternate;
+}
+@keyframes drift1 {
+  from { transform: translate(0,0) scale(1); }
+  to   { transform: translate(60px,40px) scale(1.08); }
+}
+@keyframes drift2 {
+  from { transform: translate(0,0) scale(1); }
+  to   { transform: translate(-40px,60px) scale(1.1); }
+}
+@keyframes drift3 {
+  from { transform: translate(0,0) scale(1); }
+  to   { transform: translate(30px,-50px) scale(0.95); }
+}
+/* Subtle mesh grid */
+.hero-bg::after {
+  content: '';
+  position: absolute; inset: 0;
+  background-image:
+    linear-gradient(rgba(13,148,136,0.04) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(13,148,136,0.04) 1px, transparent 1px);
+  background-size: 48px 48px;
+}
+/* ── Navbar — liquid glass ──────────────────────────────────────────── */
 nav {
+  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
+  height: 60px;
   display: flex; align-items: center;
+  padding: 0 36px; gap: 16px;
+  background: rgba(255,255,255,0.72);
+  backdrop-filter: blur(24px) saturate(180%);
+  -webkit-backdrop-filter: blur(24px) saturate(180%);
+  border-bottom: 1px solid rgba(13,148,136,0.1);
+  box-shadow: 0 1px 0 rgba(255,255,255,0.8), 0 4px 24px rgba(0,0,0,0.06);
 }
 .brand {
   display: flex; align-items: center; gap: 10px;
+  text-decoration: none; color: inherit; flex-shrink: 0;
 }
+.brand-mark {
+  width: 32px; height: 32px;
+  background: linear-gradient(135deg, var(--teal), var(--blue2));
+  border-radius: 9px;
   display: grid; place-items: center;
+  font-size: 16px;
+  box-shadow: 0 2px 12px rgba(13,148,136,0.35), inset 0 1px 0 rgba(255,255,255,0.3);
 }
 .brand-name {
+  font-size: 16px; font-weight: 700; letter-spacing: -0.5px;
+  color: var(--t1);
 }
 #status-pill {
   display: inline-flex; align-items: center; gap: 6px;
+  font-size: 11px; font-weight: 600; letter-spacing: 0.1px;
   padding: 4px 12px; border-radius: 99px;
+  background: rgba(255,255,255,0.8);
+  border: 1px solid rgba(0,0,0,0.08);
   color: var(--t3);
+  transition: all 0.35s var(--ease);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
 }
+#status-pill.ok  { color: var(--green); border-color: rgba(5,150,105,0.2); background: rgba(209,250,229,0.7); }
+#status-pill.err { color: var(--red);   border-color: rgba(220,38,38,0.2); background: rgba(254,226,226,0.7); }
+.live-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
 .ok .live-dot { animation: livePulse 2s ease-in-out infinite; }
 @keyframes livePulse {
+  0%,100% { box-shadow: 0 0 0 0 rgba(5,150,105,0.5); }
+  50%      { box-shadow: 0 0 0 5px rgba(5,150,105,0); }
 }
+.nav-controls {
+  display: flex; align-items: center; gap: 8px;
   margin-left: auto;
 }
 .input-chip {
   display: flex; align-items: center; gap: 8px;
+  background: rgba(255,255,255,0.8);
+  border: 1px solid rgba(0,0,0,0.08);
+  border-radius: 10px; padding: 6px 14px;
+  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
   transition: border-color 0.2s, box-shadow 0.2s;
 }
 .input-chip:focus-within {
+  border-color: rgba(13,148,136,0.4);
+  box-shadow: 0 0 0 3px rgba(13,148,136,0.08);
 }
 .input-chip label {
+  font-size: 10px; font-weight: 700; letter-spacing: 0.7px;
   text-transform: uppercase; color: var(--t3);
   user-select: none; white-space: nowrap;
 }
 .input-chip input::-webkit-inner-spin-button,
 .input-chip input::-webkit-outer-spin-button { -webkit-appearance: none; }
+#scan-btn-nav {
+  display: inline-flex; align-items: center; gap: 7px;
+  background: linear-gradient(135deg, var(--teal), #0f766e);
   color: #fff; border: none;
   padding: 9px 22px; border-radius: 10px;
   font-size: 13px; font-weight: 700; font-family: var(--font);
+  cursor: pointer; white-space: nowrap; flex-shrink: 0;
+  transition: transform 0.2s var(--spring), box-shadow 0.2s;
+  box-shadow: 0 4px 20px rgba(13,148,136,0.35), inset 0 1px 0 rgba(255,255,255,0.2);
 }
+#scan-btn-nav:hover  { transform: translateY(-1px); box-shadow: 0 8px 28px rgba(13,148,136,0.45), inset 0 1px 0 rgba(255,255,255,0.2); }
+#scan-btn-nav:active { transform: scale(0.98); }
+#scan-btn-nav:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; }
+/* ── Hero ────────────────────────────────────────────────────────────── */
 .hero {
+  position: relative; z-index: 1;
+  padding: 140px 36px 80px;
   text-align: center;
+  max-width: 900px; margin: 0 auto;
 }
+.eyebrow {
   display: inline-flex; align-items: center; gap: 8px;
   font-size: 11px; font-weight: 700; letter-spacing: 1.2px;
+  text-transform: uppercase; color: var(--teal);
+  background: rgba(209,250,229,0.7);
+  border: 1px solid rgba(13,148,136,0.2);
+  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
   padding: 5px 14px; border-radius: 99px;
+  margin-bottom: 28px;
+  animation: riseIn 0.7s var(--ease) 0.1s both;
 }
+.eyebrow-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--teal); }
+h1.hero-title {
+  font-size: clamp(42px, 6vw, 76px);
+  font-weight: 800; letter-spacing: -2.5px; line-height: 1.02;
+  color: var(--t1); margin-bottom: 22px;
+  animation: riseIn 0.7s var(--ease) 0.2s both;
 }
+h1.hero-title .accent {
+  background: linear-gradient(135deg, var(--teal) 0%, var(--blue2) 60%);
   -webkit-background-clip: text; -webkit-text-fill-color: transparent;
 }
 .hero-sub {
+  font-size: 18px; line-height: 1.65; color: var(--t2);
+  max-width: 540px; margin: 0 auto 40px; font-weight: 400;
+  animation: riseIn 0.7s var(--ease) 0.3s both;
+}
+.hero-actions {
+  display: flex; justify-content: center; gap: 12px; flex-wrap: wrap;
+  animation: riseIn 0.7s var(--ease) 0.4s both;
 }
+.btn-primary {
   display: inline-flex; align-items: center; gap: 10px;
+  background: linear-gradient(135deg, var(--teal), #0f766e);
   color: #fff; border: none;
+  padding: 16px 36px; border-radius: 14px;
+  font-size: 16px; font-weight: 700; font-family: var(--font);
   cursor: pointer; letter-spacing: -0.3px;
+  transition: transform 0.2s var(--spring), box-shadow 0.2s;
+  box-shadow: 0 8px 32px rgba(13,148,136,0.35), inset 0 1px 0 rgba(255,255,255,0.2);
 }
+.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 48px rgba(13,148,136,0.45), inset 0 1px 0 rgba(255,255,255,0.2); }
+.btn-primary:active { transform: scale(0.98); }
+.btn-primary:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; }
+.btn-ghost {
+  display: inline-flex; align-items: center; gap: 8px;
+  background: rgba(255,255,255,0.8);
+  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
+  border: 1px solid rgba(0,0,0,0.1);
+  color: var(--t2); padding: 16px 28px; border-radius: 14px;
+  font-size: 16px; font-weight: 600; font-family: var(--font);
+  cursor: pointer;
+  transition: transform 0.2s var(--spring), box-shadow 0.2s, border-color 0.2s;
+  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
+}
+.btn-ghost:hover { transform: translateY(-1px); border-color: rgba(13,148,136,0.3); box-shadow: 0 8px 24px rgba(0,0,0,0.08); }
+/* Stats cards */
+.stats {
+  display: flex; justify-content: center; gap: 12px; flex-wrap: wrap;
+  margin-top: 60px;
+  animation: riseIn 0.7s var(--ease) 0.55s both;
+}
+.stat-card {
+  background: var(--glass);
+  backdrop-filter: blur(20px) saturate(180%);
+  -webkit-backdrop-filter: blur(20px) saturate(180%);
+  border: 1px solid rgba(255,255,255,0.9);
+  border-radius: 16px; padding: 18px 28px;
+  text-align: center;
+  box-shadow: 0 4px 24px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,1);
+  min-width: 130px;
 }
 .stat-val {
+  font-size: 26px; font-weight: 800; letter-spacing: -1px;
+  color: var(--t1); line-height: 1;
 }
 .stat-label {
   font-size: 11px; font-weight: 600; letter-spacing: 0.5px;
+  text-transform: uppercase; color: var(--t3); margin-top: 5px;
 }
+@keyframes riseIn {
+  from { opacity: 0; transform: translateY(28px); }
   to   { opacity: 1; transform: translateY(0); }
 }
+/* ── Section container ──────────────────────────────────────────────── */
 #scan-section {
+  position: relative; z-index: 1;
+  max-width: 1480px; margin: 0 auto;
+  padding: 0 36px 100px;
 }
 #meta {
+  font-size: 12px; color: var(--t3); font-weight: 600;
+  letter-spacing: 0.2px; margin-bottom: 24px; min-height: 16px;
 }
 #error-banner {
   display: none;
+  background: rgba(254,226,226,0.8);
+  border: 1px solid rgba(220,38,38,0.2);
+  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
+  border-radius: 12px; padding: 14px 20px;
+  color: var(--red); font-size: 13px; font-weight: 600;
   margin-bottom: 20px;
 }
+/* ── Loader ──────────────────────────────────────────────────────────── */
 #loader {
+  display: none; flex-direction: column; align-items: center;
+  padding: 80px 0; gap: 22px;
+}
+.loader-glass {
+  width: 72px; height: 72px;
+  background: var(--glass);
+  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
+  border: 1px solid rgba(255,255,255,0.9);
+  border-radius: 20px;
+  display: grid; place-items: center;
+  box-shadow: 0 8px 32px rgba(0,0,0,0.08), inset 0 1px 0 white;
+  position: relative; overflow: hidden;
 }
+.loader-glass::after {
   content: '';
   position: absolute; inset: 0;
+  border-radius: 20px;
   border: 2px solid transparent;
+  border-top-color: var(--teal);
+  border-right-color: var(--blue2);
+  animation: spin 1s linear infinite;
+}
+@keyframes spin { to { transform: rotate(360deg); } }
+.loader-icon { font-size: 28px; }
+.loader-text { text-align: center; }
+.loader-text h3 { font-size: 18px; font-weight: 700; letter-spacing: -0.4px; margin-bottom: 4px; }
+.loader-text p  { font-size: 13px; color: var(--t3); }
+.prog-track { width: 200px; height: 3px; background: rgba(0,0,0,0.08); border-radius: 2px; overflow: hidden; }
+.prog-fill  {
+  height: 100%; border-radius: 2px;
+  background: linear-gradient(90deg, var(--teal), var(--blue2));
+  animation: prog 1.8s ease-in-out infinite;
 }
+@keyframes prog {
+  0%   { width: 0; margin-left: 0; }
   50%  { width: 60%; margin-left: 20%; }
+  100% { width: 0; margin-left: 100%; }
 }
+/* ── Empty state ──────────────────────────────────────────────────────── */
+#empty {
+  display: flex; flex-direction: column; align-items: center;
+  padding: 80px 0; gap: 12px;
+}
+.empty-glass {
+  width: 88px; height: 88px;
+  background: var(--glass);
+  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
+  border: 1px solid rgba(255,255,255,0.9);
+  border-radius: 24px;
+  display: grid; place-items: center;
+  font-size: 40px;
+  box-shadow: 0 8px 32px rgba(0,0,0,0.06), inset 0 1px 0 white;
+  margin-bottom: 4px;
+  animation: float 3s ease-in-out infinite;
+}
+@keyframes float {
+  0%,100% { transform: translateY(0); }
+  50%      { transform: translateY(-10px); }
+}
+.empty-title { font-size: 20px; font-weight: 700; letter-spacing: -0.5px; color: var(--t1); opacity: 0.5; }
+.empty-sub   { font-size: 14px; color: var(--t3); }
+/* ── Cards grid ──────────────────────────────────────────────────────── */
 #grid {
   display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(370px, 1fr));
   gap: 16px;
 }
+/* ── Trade Card — LIQUID GLASS ───────────────────────────────────────── */
 .card {
   position: relative; overflow: hidden;
+  /* Liquid glass effect */
+  background: var(--glass);
+  backdrop-filter: blur(28px) saturate(180%);
+  -webkit-backdrop-filter: blur(28px) saturate(180%);
+  border: 1px solid rgba(255,255,255,0.85);
+  border-radius: var(--r2);
+  box-shadow:
+    0 1px 0 rgba(255,255,255,1) inset,      /* top highlight */
+    0 -1px 0 rgba(0,0,0,0.04) inset,         /* bottom inner shadow */
+    0 8px 32px rgba(0,0,0,0.08),             /* soft drop shadow */
+    0 2px 8px rgba(0,0,0,0.04);
   padding: 24px;
   transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s;
+  animation: cardIn 0.5s var(--ease) both;
 }
+@keyframes cardIn {
+  from { opacity: 0; transform: translateY(20px) scale(0.98); }
   to   { opacity: 1; transform: translateY(0) scale(1); }
 }
 .card:hover {
+  transform: translateY(-4px) scale(1.005);
+  border-color: rgba(255,255,255,1);
   box-shadow:
+    0 1px 0 rgba(255,255,255,1) inset,
+    0 -1px 0 rgba(0,0,0,0.04) inset,
+    0 20px 60px rgba(0,0,0,0.12),
+    0 0 0 1px rgba(13,148,136,0.15);
 }
+/* Inner specular sheen — the "liquid" part */
+.card::before {
+  content: '';
+  position: absolute; top: 0; left: 0; right: 0;
+  height: 50%;
+  background: linear-gradient(180deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 100%);
+  border-radius: var(--r2) var(--r2) 0 0;
+  pointer-events: none; z-index: 0;
 }
+.card > * { position: relative; z-index: 1; }
+/* Teal top-edge glow on hover */
+.card::after {
+  content: '';
+  position: absolute; top: 0; left: 10%; right: 10%;
+  height: 2px; border-radius: 0 0 2px 2px;
+  background: linear-gradient(90deg, transparent, var(--teal), transparent);
+  opacity: 0;
   transition: opacity 0.3s;
 }
+.card:hover::after { opacity: 1; }
 /* ── Card header ── */
 .ch {
   display: flex; justify-content: space-between;
+  align-items: flex-start; margin-bottom: 18px;
 }
 .ch-symbol {
+  font-size: 26px; font-weight: 800; letter-spacing: -1px;
+  color: var(--t1); line-height: 1;
 }
+.ch-symbol .q { font-size: 17px; font-weight: 500; color: var(--t3); letter-spacing: 0; }
+.ch-sub {
+  display: flex; align-items: center; gap: 8px;
+  margin-top: 5px; font-size: 12px; font-weight: 600;
 }
+.chg.pos { color: var(--green); }
+.chg.neg { color: var(--red); }
+.vol { color: var(--t3); }
 .dir-tag {
   font-size: 10px; font-weight: 800; letter-spacing: 1px;
+  text-transform: uppercase; padding: 6px 14px; border-radius: 99px;
+  /* glass pill */
+  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
+}
+.dir-tag.long  {
+  background: rgba(209,250,229,0.7);
+  color: var(--green); border: 1px solid rgba(5,150,105,0.2);
+  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
+}
+.dir-tag.short {
+  background: rgba(254,226,226,0.7);
+  color: var(--red); border: 1px solid rgba(220,38,38,0.2);
+  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
 }
 /* ── Confidence ── */
+.conf-wrap {
+  background: rgba(255,255,255,0.5);
+  border: 1px solid rgba(255,255,255,0.8);
+  border-radius: var(--r);
+  padding: 14px 16px;
+  margin-bottom: 16px;
+  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
 }
 .conf-top {
+  display: flex; justify-content: space-between; align-items: baseline;
+  margin-bottom: 10px;
 }
 .conf-lbl {
   font-size: 10px; font-weight: 700; letter-spacing: 0.8px;
   text-transform: uppercase; color: var(--t3);
 }
 .conf-score {
+  font-size: 30px; font-weight: 800; letter-spacing: -1.2px; line-height: 1;
 }
+.conf-denom { font-size: 14px; font-weight: 500; color: var(--t3); }
 .conf-track {
+  height: 5px; background: rgba(0,0,0,0.06);
+  border-radius: 3px; overflow: hidden;
 }
 .conf-fill {
+  height: 100%; border-radius: 3px;
   transition: width 1s var(--ease);
 }
+.conf-fill.hi { background: linear-gradient(90deg, #047857, var(--green2)); }
 .conf-fill.md { background: linear-gradient(90deg, #b45309, var(--amber2)); }
+.conf-fill.lo { background: linear-gradient(90deg, #b91c1c, var(--red2)); }
 /* ── TF chips ── */
+.tf-row { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
 .tf-chip {
+  font-size: 10px; font-weight: 700; letter-spacing: 0.3px;
   padding: 4px 10px; border-radius: 99px; text-transform: uppercase;
+  background: rgba(255,255,255,0.6);
+  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
+  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
 }
+.tf-chip.up    { color: var(--green);  border: 1px solid rgba(5,150,105,0.2);  background: rgba(209,250,229,0.6); }
+.tf-chip.down  { color: var(--red);    border: 1px solid rgba(220,38,38,0.2);  background: rgba(254,226,226,0.6); }
+.tf-chip.range { color: var(--amber);  border: 1px solid rgba(217,119,6,0.2);  background: rgba(254,243,199,0.6); }
+.tf-chip.na    { color: var(--t3);     border: 1px solid rgba(0,0,0,0.07); }
 /* ── Rule ── */
+.rule { height: 1px; background: rgba(0,0,0,0.06); margin: 16px -24px; }
+/* ── Levels grid ── */
 .levels {
   display: grid; grid-template-columns: repeat(3,1fr);
+  gap: 8px; margin-bottom: 12px;
 }
 .lv {
+  background: rgba(255,255,255,0.55);
+  border: 1px solid rgba(255,255,255,0.8);
+  border-radius: 10px; padding: 10px 12px;
+  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9);
   position: relative; overflow: hidden;
 }
+.lv::before {
+  content: '';
+  position: absolute; top: 0; left: 0; right: 0; height: 2px;
 }
+.lv.entry::before { background: var(--teal2); }
+.lv.sl::before    { background: var(--red2); }
+.lv.tp::before    { background: var(--green2); }
+.lv.rr::before    { background: var(--amber2); }
+.lv-lbl {
+  font-size: 9px; font-weight: 700; letter-spacing: 0.7px;
+  text-transform: uppercase; color: var(--t3); margin-bottom: 4px;
 }
 .lv-val {
+  font-size: 14px; font-weight: 700; letter-spacing: -0.3px;
+  font-variant-numeric: tabular-nums;
 }
+.lv.entry .lv-val { color: var(--teal); }
+.lv.sl    .lv-val { color: var(--red); }
+.lv.tp    .lv-val { color: var(--green); }
+.lv.rr    .lv-val { color: var(--amber); }
+/* ── Sizing ── */
 .sizing {
+  display: flex;
+  background: rgba(255,255,255,0.55);
+  border: 1px solid rgba(255,255,255,0.8);
   border-radius: 10px; overflow: hidden;
+  margin-bottom: 12px;
+  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9);
 }
+.sz { flex: 1; padding: 10px 12px; text-align: center; }
+.sz + .sz { border-left: 1px solid rgba(0,0,0,0.06); }
+.sz-lbl { font-size: 9px; font-weight: 700; letter-spacing: 0.7px; text-transform: uppercase; color: var(--t3); margin-bottom: 3px; }
 .sz-val { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
 /* ── Narrative ── */
 .narr {
   font-size: 12px; color: var(--t2); line-height: 1.6;
+  padding: 11px 14px; margin-bottom: 12px;
+  background: rgba(209,250,229,0.3);
+  border-left: 2px solid rgba(13,148,136,0.4);
   border-radius: 0 8px 8px 0;
 }
 /* ── Evidence ── */
   font-size: 9px; font-weight: 700; letter-spacing: 0.8px;
   text-transform: uppercase; color: var(--t3); margin-bottom: 10px;
 }
+.ev-row { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; }
 .ev-key { font-size: 11px; font-weight: 600; color: var(--t2); width: 80px; flex-shrink: 0; }
+.ev-track { flex: 1; height: 3px; background: rgba(0,0,0,0.07); border-radius: 2px; overflow: hidden; }
+.ev-fill { height: 100%; border-radius: 2px; background: linear-gradient(90deg, var(--teal), var(--teal2)); transition: width 0.8s var(--ease); }
+.ev-num { font-size: 11px; font-weight: 800; width: 22px; text-align: right; color: var(--t1); }
+/* ── Actions ── */
+.card-acts { display: flex; gap: 8px; margin-top: 16px; }
 .ca {
+  flex: 1; display: inline-flex; align-items: center; justify-content: center;
+  gap: 6px; padding: 10px 14px; border-radius: 10px;
   font-size: 12px; font-weight: 700; font-family: var(--font);
+  border: none; cursor: pointer; text-decoration: none; white-space: nowrap;
+  transition: transform 0.15s var(--spring), box-shadow 0.15s;
+  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
+  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
+}
+.ca:hover { transform: scale(1.03); }
+.ca:active { transform: scale(0.97); }
+.ca-chart  { background: rgba(209,250,229,0.6); color: var(--teal); border: 1px solid rgba(13,148,136,0.2); }
+.ca-copy   { background: rgba(255,255,255,0.7); color: var(--t1); border: 1px solid rgba(0,0,0,0.08); }
+.ca-copy:hover { background: rgba(255,255,255,0.9); }
+.ca-ref    { flex: 0; padding: 10px 12px; background: rgba(255,255,255,0.7); color: var(--t3); border: 1px solid rgba(0,0,0,0.08); }
+.ca-ref:hover { color: var(--t1); }
 /* Error card */
 .err-card {
+  background: rgba(254,226,226,0.7);
+  border: 1px solid rgba(220,38,38,0.2);
+  border-radius: var(--r2); padding: 20px;
+  color: var(--red); font-size: 13px; font-weight: 600;
+  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
 }
+/* ── Mobile ──────────────────────────────────────────────────────────── */
 @media (max-width: 700px) {
+  nav { padding: 0 20px; height: auto; flex-wrap: wrap; padding-top: 12px; padding-bottom: 12px; gap: 10px; }
+  .nav-controls { width: 100%; margin-left: 0; }
   .input-chip { flex: 1; min-width: 0; }
+  .hero { padding: 110px 20px 60px; }
+  h1.hero-title { letter-spacing: -1.5px; }
+  .stats { gap: 8px; }
+  .stat-card { padding: 14px 18px; min-width: 100px; }
+  #scan-section { padding: 0 16px 80px; }
   #grid { grid-template-columns: 1fr; }
+  .card { padding: 18px; border-radius: 18px; }
+  .rule { margin: 14px -18px; }
 }
 </style>
 </head>
 <body>
+<!-- Animated background orbs -->
+<div class="hero-bg">
+  <div class="orb orb-1"></div>
+  <div class="orb orb-2"></div>
+  <div class="orb orb-3"></div>
+</div>
+<!-- ── Nav ───────────────────────────────────────────────────────────── -->
 <nav>
   <div class="brand">
+    <div class="brand-mark">⚡</div>
     <span class="brand-name">Trade Copilot</span>
   </div>
+  <span id="status-pill">
     <span class="live-dot"></span>
     <span id="status-text">Connecting…</span>
+  </span>
+  <div class="nav-controls">
     <div class="input-chip">
       <label for="account">Account $</label>
       <input id="account" type="number" value="10000" min="100">
   </div>
 </nav>
+<!-- ── Hero ──────────────────────────────────────────────────────────── -->
 <section class="hero">
+  <div class="eyebrow"><span class="eyebrow-dot"></span>Real-Time · AI-Powered · Zero Hallucination</div>
   <h1 class="hero-title">
+    Find your<br><span class="accent">next best trade.</span>
   </h1>
   <p class="hero-sub">
+    Scans the entire crypto market live. Surfaces top setups with precise entry, stop-loss, take-profit and sizing — computed deterministically from real exchange data.
   </p>
+  <div class="hero-actions">
+    <button class="btn-primary" id="hero-cta">
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
+      Scan Market
+    </button>
+    <button class="btn-ghost" onclick="document.getElementById('scan-section').scrollIntoView({behavior:'smooth'})">
+      <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M12 5v14M5 12l7 7 7-7"/></svg>
+      See setups
+    </button>
+  </div>
+  <div class="stats">
+    <div class="stat-card"><div class="stat-val" id="stat-pairs">—</div><div class="stat-label">Live Pairs</div></div>
+    <div class="stat-card"><div class="stat-val">3</div><div class="stat-label">Exchanges</div></div>
+    <div class="stat-card"><div class="stat-val">3</div><div class="stat-label">Timeframes</div></div>
+    <div class="stat-card"><div class="stat-val">40/20/20/20</div><div class="stat-label">Score Weight</div></div>
   </div>
 </section>
+<!-- ── Results ────────────────────────────────────────────────────────── -->
 <section id="scan-section">
   <div id="meta"></div>
   <div id="error-banner"></div>
   <div id="loader">
+    <div class="loader-glass"><div class="loader-icon">📡</div></div>
     <div class="loader-text">
       <h3>Scanning the market</h3>
+      <p>Fetching live data · computing indicators · ranking setups</p>
     </div>
+    <div class="prog-track"><div class="prog-fill"></div></div>
+  </div>
+  <div id="empty">
+    <div class="empty-glass">📡</div>
+    <div class="empty-title">Ready to scan</div>
+    <div class="empty-sub">Hit Scan Market to surface top trade setups</div>
   </div>
   <div id="grid"></div>
 </section>
 <script>
 const $  = id => document.getElementById(id);
 const sf = n => {
   if (n == null) return '—';
   const v = +n;
+  if (v >= 10000) return v.toLocaleString('en-US', {maximumFractionDigits: 0});
+  if (v >= 100)   return v.toLocaleString('en-US', {maximumFractionDigits: 2});
   if (v >= 1)     return v.toFixed(4);
   if (v >= 0.001) return v.toFixed(6);
   return v.toFixed(8);
 };
 const pc = n => n == null ? null : (n>=0?'+':'')+( +n).toFixed(2)+'%';
+/* Status */
 async function checkStatus() {
   try {
+    const d = await fetch('/api/status').then(r => r.json());
     const pill = $('status-pill'), tx = $('status-text');
+    if (d.ok) { tx.textContent = d.source.toUpperCase()+' · '+d.market; pill.className='ok'; }
+    else       { tx.textContent = 'No exchange'; pill.className='err'; }
   } catch { $('status-text').textContent='Offline'; $('status-pill').className='err'; }
 }
+/* Scan buttons */
 $('scan-btn-nav').addEventListener('click', runScan);
+$('hero-cta').addEventListener('click', () => { $('scan-section').scrollIntoView({behavior:'smooth'}); setTimeout(runScan, 300); });
+function setLoading(on) {
+  const nb = $('scan-btn-nav'), hb = $('hero-cta');
+  nb.disabled = hb.disabled = on;
+  nb.innerHTML = on
+    ? `<div style="width:13px;height:13px;border:2px solid rgba(255,255,255,0.35);border-top-color:#fff;border-radius:50%;animation:spin 0.7s linear infinite;flex-shrink:0"></div>Scanning…`
+    : `<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>Scan`;
+  hb.innerHTML = on
+    ? `<div style="width:16px;height:16px;border:2.5px solid rgba(255,255,255,0.3);border-top-color:#fff;border-radius:50%;animation:spin 0.7s linear infinite;flex-shrink:0"></div>Scanning…`
+    : `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>Scan Market`;
+}
 async function runScan() {
+  const grid = $('grid'), meta = $('meta'), err = $('error-banner');
+  const loader = $('loader'), empty = $('empty');
+  setLoading(true);
   grid.innerHTML = '';
   err.style.display = 'none';
+  empty.style.display = 'none';
   loader.style.display = 'flex';
   const account = +$('account').value || 10000;
   const risk    = +$('risk').value    || 1;
   try {
     const data = await fetch(`/api/scan?account=${account}&risk_pct=${risk}&top=${top}`)
+      .then(r => { if (!r.ok) throw new Error(`HTTP ${r.status}`); return r.json(); });
     loader.style.display = 'none';
     const ts = new Date(data.fetched_at).toLocaleTimeString([],{hour:'2-digit',minute:'2-digit'});
     meta.textContent = `${data.cards.length} setups · ${data.source.toUpperCase()} · ${data.market} · ${ts}`;
+    const sp = $('stat-pairs'); if (sp) sp.textContent = data.cards.length+'+';
+    if (!data.cards.length) { empty.style.display = 'flex'; return; }
+    data.cards.forEach((c, i) => {
       const el = buildCard(c, account, risk);
+      el.style.animationDelay = (i * 55) + 'ms';
       grid.appendChild(el);
     });
   } catch(e) {
     loader.style.display = 'none';
+    empty.style.display = 'flex';
+    err.textContent = '⚠︎  ' + e.message;
     err.style.display = 'block';
+  } finally { setLoading(false); }
 }
 function buildCard(c, account, risk) {
   if (c.error) {
     const d = document.createElement('div');
     return d;
   }
+  const conf = +(c.confidence || 0);
+  const confPct = Math.min(100, conf * 10);
+  const confCls = conf >= 7 ? 'hi' : conf >= 5 ? 'md' : 'lo';
+  const confColor = conf >= 7 ? 'var(--green)' : conf >= 5 ? 'var(--amber)' : 'var(--red)';
+  const dir = (c.direction || 'long').toLowerCase();
+  const lv = c.levels || {}, sz = c.sizing || {};
+  const ev = c.evidence || {}, tf = c.timeframes || {};
+  const ri = c.rank_info || {};
+  const base = (c.symbol || '').replace(/USD$/, '');
   const chg  = ri.change_24h_pct;
+  const chgHTML = chg != null ? `<span class="chg ${chg>=0?'pos':'neg'}">${pc(chg)}</span>` : '';
+  const volHTML = ri.quote_volume_usd ? `<span class="vol">${fu(ri.quote_volume_usd)}</span>` : '';
   const tfHTML = ['1h','15m','5m'].map(t => {
+    const s = (tf[t]?.structure || '').toLowerCase();
     const cls = s==='uptrend'?'up':s==='downtrend'?'down':s?'range':'na';
     return `<span class="tf-chip ${cls}">${t} · ${s||'n/a'}</span>`;
   }).join('');
   const evHTML = ['structure','volume','positioning','catalyst'].map(k => {
+    const e = ev[k] || {}, sc = +(e.score || 0);
     return `<div class="ev-row">
       <span class="ev-key">${k[0].toUpperCase()+k.slice(1)}</span>
       <div class="ev-track"><div class="ev-fill" style="width:${sc*10}%"></div></div>
     </div>`;
   }).join('');
+  let narr = (c.narrative || '');
+  if (narr.length > 200) narr = narr.slice(0, 197) + '…';
   const plan = [
     `${c.symbol} ${dir.toUpperCase()} | Confidence ${conf}/10`,
+    `Entry    ${sf(c.close)}`,
+    `SL       ${sf(lv.sl)}`,
+    `TP1      ${sf(lv.tp1)}`, `TP2 ${sf(lv.tp2)}`, `TP3 ${sf(lv.tp3)}`,
+    `R/R      ${lv.rr1??'—'}×`,
+    `Risk     ${fu(sz.risk_usd)} | Units ${sz.units??'—'} | Notional ${fu(sz.notional)}`,
+    `Time     ${new Date().toLocaleString()}`
   ].join('\n');
+  const tvUrl = `https://www.tradingview.com/chart/?symbol=${encodeURIComponent(c.tv_symbol || c.symbol)}`;
   const el = document.createElement('div');
   el.className = 'card';
   el.innerHTML = `
     <div class="ch">
+      <div>
+        <div class="ch-symbol">${base}<span class="q">USD</span></div>
+        <div class="ch-sub">${chgHTML}${volHTML}</div>
       </div>
       <span class="dir-tag ${dir}">${dir.toUpperCase()}</span>
     </div>
+    <div class="conf-wrap">
       <div class="conf-top">
         <span class="conf-lbl">Confidence</span>
+        <span class="conf-score" style="color:${confColor}">${conf}<span class="conf-denom">/10</span></span>
       </div>
       <div class="conf-track"><div class="conf-fill ${confCls}" style="width:${confPct}%"></div></div>
     </div>
     <div class="tf-row">${tfHTML}</div>
     <div class="rule"></div>
     <div class="levels">
+      <div class="lv entry"><div class="lv-lbl">Entry</div><div class="lv-val">${sf(c.close)}</div></div>
+      <div class="lv sl">  <div class="lv-lbl">Stop Loss</div><div class="lv-val">${sf(lv.sl)}</div></div>
+      <div class="lv rr">  <div class="lv-lbl">R / R</div><div class="lv-val">${lv.rr1??'—'}×</div></div>
+      <div class="lv tp">  <div class="lv-lbl">TP 1</div><div class="lv-val">${sf(lv.tp1)}</div></div>
+      <div class="lv tp">  <div class="lv-lbl">TP 2</div><div class="lv-val">${sf(lv.tp2)}</div></div>
+      <div class="lv tp">  <div class="lv-lbl">TP 3</div><div class="lv-val">${sf(lv.tp3)}</div></div>
     </div>
     <div class="sizing">
+      <div class="sz"><div class="sz-lbl">Risk</div><div class="sz-val">${fu(sz.risk_usd)}</div></div>
+      <div class="sz"><div class="sz-lbl">Units</div><div class="sz-val">${sz.units??'—'}</div></div>
+      <div class="sz"><div class="sz-lbl">Notional</div><div class="sz-val">${fu(sz.notional)}</div></div>
     </div>
+    ${narr ? `<div class="narr">${narr}</div>` : ''}
     <div class="rule"></div>
     <div class="ev-title">Score Breakdown</div>
         <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
         Copy Plan
       </button>
+      <button class="ca ca-ref" data-sym="${c.symbol}" data-acc="${account}" data-risk="${risk}" title="Refresh">
         <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/></svg>
       </button>
     </div>`;
   el.querySelector('.ca-copy').addEventListener('click', function() {
+    const text = this.dataset.plan.replace(/\\n/g, '\n');
     navigator.clipboard.writeText(text).then(() => {
       const orig = this.innerHTML;
       this.innerHTML = `<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><polyline points="20 6 9 17 4 12"/></svg> Copied!`;
+      this.style.color = 'var(--green)'; this.style.borderColor = 'rgba(5,150,105,0.3)';
       setTimeout(() => { this.innerHTML = orig; this.style.color=''; this.style.borderColor=''; }, 2200);
     }).catch(() => prompt('Copy:', text));
   });
   el.querySelector('.ca-ref').addEventListener('click', async function() {
+    const {sym, acc, risk: r} = this.dataset, orig = this.innerHTML;
     this.disabled = true;
+    this.innerHTML = `<div style="width:13px;height:13px;border:2px solid rgba(0,0,0,0.1);border-top-color:var(--teal);border-radius:50%;animation:spin .7s linear infinite"></div>`;
     try {
+      const data = await fetch(`/api/card/${sym}?account=${acc}&risk_pct=${r}`).then(x=>x.json());
+      el.replaceWith(buildCard(data, +acc, +r));
     } catch { this.disabled=false; this.innerHTML=orig; }
   });
   return el;
 }
 checkStatus();
 setInterval(checkStatus, 60000);
 </script>