/* FinCanvas — 21st.dev design system (shadcn/tailwind tokens, vanilla) */
:root {
  --background: #020617;
  --panel: #090f19;
  --panel-2: #0d1729;
  --foreground: #e2e8f0;
  --muted: #94a3b8;
  --border: #1e3a5f;
  --accent: #22c55e;
  --accent-2: #3b82f6;
  --accent-foreground: #020617;
  --radius: 0.5rem;
  --warn: #f59e0b;
  --danger: #ef4444;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  font-family: "Inter", "JetBrains Mono", ui-monospace, monospace;
  background: var(--background);
  color: var(--foreground);
  height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  font-size: 14px;
}

header {
  padding: 14px 24px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.logo { font-size: 18px; font-weight: 700; color: var(--accent); display: flex; gap: 8px; align-items: center; }
.logo .dot { width: 10px; height: 10px; border-radius: 2px; background: var(--accent); box-shadow: 0 0 12px var(--accent); }
.tagline { color: var(--muted); font-size: 12.5px; }

main { display: grid; grid-template-columns: 1fr 300px; gap: 1px; background: var(--border); }

.canvas-area { padding: 28px; background: radial-gradient(1000px 500px at 70% 20%, rgba(34,197,94,.05), transparent 60%), var(--background); }
#canvas { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); width: 100%; height: 560px; cursor: crosshair; box-shadow: 0 0 40px rgba(34,197,94,.06); }

/* SVG notes (shadcn card look) */
.note-h { fill: #0f2f23; stroke: var(--accent); stroke-width: 1.5; }
.note-a { fill: #0c182e; stroke: var(--accent-2); stroke-width: 1.5; }
.company-card { fill: var(--panel-2); stroke: var(--accent); stroke-width: 1; }
.chart-point { fill: var(--accent); stroke: var(--background); stroke-width: 1; }
.anomaly-flag { fill: #271405; stroke: var(--warn); stroke-width: 1; }
.agent-path { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 4 3; opacity: .6; }
svg text { font-family: "JetBrains Mono", monospace; font-size: 11px; fill: var(--foreground); }
.note-label { font-size: 10px; fill: var(--muted); }
.ticker { font-weight: 700; font-size: 13px; fill: var(--accent); }
.company-label { font-weight: 600; font-size: 12px; fill: var(--foreground); }
.ratio-tag { font-size: 10px; fill: var(--accent); }

/* Sidebar */
.sidebar { padding: 20px; background: var(--panel); border-left: 1px solid var(--border); overflow-y: auto; display: flex; flex-direction: column; font-size: 12.5px; }
.sidebar h2 { font-size: 13px; margin: 0 0 10px; color: var(--accent); border-bottom: 1px solid var(--border); padding-bottom: 6px; }
.sidebar h3 { font-size: 11px; margin: 16px 0 6px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }

#tool-list, #company-list, #ratio-list { list-style: none; padding: 0; margin: 0; }
#tool-list li, #company-list li, #ratio-list li { font-family: "JetBrains Mono", monospace; font-size: 11.5px; padding: 4px 0; border-bottom: 1px dashed rgba(30,58,95,.5); color: var(--muted); word-break: break-word; }
#tool-list li strong, #company-list li strong { color: var(--accent); }
#ratio-list li { display: flex; justify-content: space-between; }
#ratio-list .v { color: var(--accent); }
.company-list li { display: flex; justify-content: space-between; align-items: center; }
.company-list .del { color: var(--danger); cursor: pointer; }

#log { font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--accent); background: var(--background); padding: 10px; border-radius: var(--radius); height: 150px; overflow-y: auto; white-space: pre-wrap; border: 1px solid var(--border); margin-top: auto; }

footer { padding: 10px 24px; border-top: 1px solid var(--border); background: var(--panel); text-align: center; }
footer small { color: var(--muted); font-size: 11.5px; }
footer a { color: var(--accent); }

/* Buttons (shadcn-style) */
.btn { display: inline-flex; align-items: center; gap: 6px; border-radius: var(--radius); background: var(--accent); color: var(--accent-foreground); padding: 6px 12px; font-size: 12px; font-weight: 600; border: none; cursor: pointer; }
.btn:hover { opacity: .9; }
.badge { display: inline-block; border-radius: 9999px; border: 1px solid var(--border); padding: 2px 8px; font-size: 10px; color: var(--muted); }