:root {
  --accent: #0EA5E9;
  --accent-dark: #0284C7;
  --ink: #0F172A;
  --muted: #64748B;
  --bg: #F8FAFC;
  --card: #FFFFFF;
  --border: #E2E8F0;
  --danger: #DC2626;
  --success: #16A34A;
}
html, body { background: var(--bg); color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, "Inter", system-ui, sans-serif; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-dark); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

/* CRANITAZ loading dots — bouncing wave */
@keyframes cdot-bounce {
  0%, 80%, 100% { transform: scale(0.3); opacity: 0.5; }
  40%          { transform: scale(1);   opacity: 1;   }
}
.cranitaz-dots {
  display: inline-block;
  font-size: 0;
  line-height: 1;
  vertical-align: middle;
}
.cranitaz-dots > span {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin: 0 3px;
  background: currentColor;
  border-radius: 50%;
  animation: cdot-bounce 1.2s infinite ease-in-out both;
}
.cranitaz-dots > span:nth-child(1) { animation-delay: -0.32s; }
.cranitaz-dots > span:nth-child(2) { animation-delay: -0.16s; }
.cranitaz-dots > span:nth-child(3) { animation-delay:  0s;    }