:root {
  color-scheme: light;
  --ink: #182033;
  --muted: #677089;
  --panel: rgba(255, 255, 255, 0.78);
  --line: rgba(43, 55, 83, 0.14);
  --shadow: 0 22px 60px rgba(44, 60, 94, 0.18);
  --blue: #37a7ff;
  --violet: #8b5cff;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 12%, rgba(55, 167, 255, 0.28), transparent 28%),
    radial-gradient(circle at 82% 14%, rgba(255, 93, 184, 0.24), transparent 26%),
    radial-gradient(circle at 48% 88%, rgba(66, 214, 138, 0.24), transparent 30%),
    linear-gradient(135deg, #f7fbff 0%, #fff7fb 48%, #f7fff9 100%);
  overflow-x: hidden;
}

button, select { font: inherit; }
button { cursor: pointer; }

.label {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.home-link {
  color: #3269d8;
  font-weight: 800;
  text-decoration: none;
}

.small-button,
.tab-button,
select {
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 6px 18px rgba(61, 74, 108, 0.08);
}

.small-button {
  min-height: 36px;
  padding: 0 14px;
  font-weight: 800;
}

select {
  min-height: 36px;
  padding: 0 12px;
  font-weight: 700;
}

.float-layer {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
}

.money-pop {
  position: fixed;
  z-index: 41;
  color: #147a4d;
  font-weight: 900;
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.9);
  animation: moneyPop 850ms ease-out forwards;
}

@keyframes moneyPop {
  from { opacity: 1; transform: translate(-50%, -10px) scale(0.92); }
  to { opacity: 0; transform: translate(-50%, -86px) scale(1.18); }
}