:root {
  --background: 222 47% 6%;
  --foreground: 43 56% 92%;
  --primary: 42 96% 58%;
  --primary-foreground: 222 47% 7%;
  --secondary: 181 64% 44%;
  --secondary-foreground: 222 47% 6%;
  --muted: 222 28% 17%;
  --muted-foreground: 220 16% 72%;
  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 100%;
  --border: 220 28% 24%;
  --card: 222 42% 10%;
  --shadow-sm: 0 8px 18px rgba(0,0,0,.22);
  --shadow-md: 0 18px 44px rgba(0,0,0,.34);
  --shadow-lg: 0 30px 90px rgba(0,0,0,.48);
  --transition-fast: 160ms ease;
  --transition-smooth: 260ms cubic-bezier(.2,.8,.2,1);
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 26px;
}

.dark {
  --background: 222 47% 6%;
  --foreground: 43 56% 92%;
  --primary: 42 96% 58%;
  --secondary: 181 64% 44%;
  --muted: 222 28% 17%;
  --destructive: 0 84% 60%;
  --border: 220 28% 24%;
  --card: 222 42% 10%;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 15% 10%, hsla(var(--primary), .24), transparent 30%),
    radial-gradient(circle at 86% 6%, hsla(var(--secondary), .22), transparent 31%),
    radial-gradient(circle at 55% 88%, hsla(var(--primary), .10), transparent 28%),
    linear-gradient(135deg, hsl(var(--background)), hsl(222 58% 4%));
  color: hsl(var(--foreground));
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }

.glass-card {
  background: linear-gradient(180deg, hsla(var(--card), .96), hsla(var(--card), .76));
  border: 1px solid hsla(var(--border), .92);
  box-shadow: var(--shadow-md), inset 0 1px 0 hsla(var(--foreground), .05);
  backdrop-filter: blur(18px);
}

.gold-grid {
  background-image:
    linear-gradient(hsla(var(--primary), .08) 1px, transparent 1px),
    linear-gradient(90deg, hsla(var(--primary), .08) 1px, transparent 1px);
  background-size: 28px 28px;
}

.focus-ring:focus {
  outline: 2px solid hsl(var(--primary));
  outline-offset: 2px;
}

.tv-frame {
  width: 100%;
  min-height: 520px;
  border: 0;
  border-radius: var(--radius-md);
  background: hsl(var(--muted));
}

.trade-line-entry {
  background: linear-gradient(90deg, transparent, hsla(var(--secondary), .8), transparent);
}

.trade-line-exit {
  background: linear-gradient(90deg, transparent, hsla(var(--primary), .9), transparent);
}

@media (max-width: 640px) {
  .tv-frame { min-height: 380px; }
}