@import "tailwindcss";

:root {
  --bg: #0a0a0d;
  --panel: #121218;
  --line: #26262e;
  --line2: #1b1b21;
  --ink: #ededf2;
  --dim: #9d9da8;
  --faint: #67676f;
  --accent: #ffd21e;
  --accent-soft: rgba(255, 210, 30, 0.13);
  --bar: #34343f;
  --up: #3ddc97;
  --danger: #ff7070;
  color-scheme: dark;
}
html.light {
  --bg: #fafafa;
  --panel: #ffffff;
  --line: #e3e3e9;
  --line2: #eeeeF2;
  --ink: #15151a;
  --dim: #5b5b66;
  --faint: #8e8e99;
  --accent: #d9ae00;
  --accent-soft: rgba(217, 174, 0, 0.15);
  --bar: #b9b9c4;
  --up: #0a7d33;
  --danger: #c73a3a;
  color-scheme: light;
}
body {
  background: var(--bg);
  color: var(--ink);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--accent); color: #111; }
.tnum { font-variant-numeric: tabular-nums; }
.grid-tex {
  background-image:
    linear-gradient(var(--line2) 1px, transparent 1px),
    linear-gradient(90deg, var(--line2) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to bottom, black, transparent 100%);
}
@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(61, 220, 151, 0.45); }
  50% { box-shadow: 0 0 0 5px rgba(61, 220, 151, 0); }
}
.live-dot { animation: pulse-dot 2s ease-in-out infinite; }
@keyframes rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
.rise { animation: rise 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes drawline {
  from { stroke-dashoffset: var(--len); }
  to { stroke-dashoffset: 0; }
}