:root {
  --navy-950: #0b111b;
  --navy-900: #0f1724;
  --navy-850: #111c2a;
  --navy-800: #152133;
  --navy-700: #1b2a3f;
  --surface: #101826;
  --surface-2: #141f2f;
  --border: #243247;
  --text: #e6edf6;
  --muted: #9fb1c8;
  --muted-2: #7f92aa;
  --cyan: #38d6f2;
  --green: #22c55e;
  --amber: #f59e0b;
  --red: #ef4444;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  background: var(--navy-950);
  color: var(--text);
  font-family: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.bg-ambient {
  background-image: radial-gradient(circle at top right, rgba(56, 214, 242, 0.08), transparent 55%),
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.06), transparent 55%);
  background-repeat: no-repeat;
  background-size: 120% 120%;
  background-attachment: fixed;
}

.live-dot {
  box-shadow: 0 0 12px rgba(56, 214, 242, 0.6);
}

.chip-active {
  border-color: var(--cyan);
  color: var(--text);
}

.select-clean {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239fb1c8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 12px;
  padding-right: 2.5rem;
}

@media (prefers-color-scheme: light) {
  :root {
    --navy-950: #f5f7fb;
    --navy-900: #eef2f7;
    --navy-850: #e8edf5;
    --navy-800: #e2e8f0;
    --navy-700: #d8e0ea;
    --surface: #ffffff;
    --surface-2: #f6f8fc;
    --border: #d7dee8;
    --text: #0b111b;
    --muted: #4a5a72;
    --muted-2: #6a7b94;
    --cyan: #0ea5c6;
    --green: #16a34a;
    --amber: #f59e0b;
    --red: #dc2626;
  }

  body {
    background: var(--navy-950);
  }

  .bg-ambient {
    background-image: radial-gradient(circle at top right, rgba(14, 165, 198, 0.12), transparent 55%),
      radial-gradient(circle at 30% 20%, rgba(15, 23, 36, 0.04), transparent 55%);
    background-repeat: no-repeat;
    background-size: 120% 120%;
    background-attachment: fixed;
  }

  .live-dot {
    box-shadow: 0 0 10px rgba(14, 165, 198, 0.45);
  }

  .select-clean {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236a7b94' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  }
}