:root {
  --accent:#6366f1;     /* indigo */
  --accent-2:#4f46e5;   /* indigo darker */
  --bg:#f5f7fb;
  --text:#111827;
  --muted:#6b7280;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  font-family: Arial, Helvetica, sans-serif;
  color: var(--text);
  background: var(--bg);
  margin: 0;
}

/* Inputs (used on login form) */
.input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(148,163,184,.36);
  font-size: 1rem;
}

/* Shared primary button — used by Continue + Sign in */
/* Shared primary button */
.button {
  display: inline-block;
  padding: 8px 28px;                    /* wider */
  min-width: 220px;                      /* ensures a wide look */
  background: linear-gradient(135deg, #c80f2e); /* blue */
  color: #fff;
  border: 0;
  border-radius: 14px;
  cursor: pointer;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.2px;
  box-shadow: 0 18px 36px rgba(13,110,253,0.25);
  transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease;
  text-decoration: none;
}

.button:active {
  transform: translateY(0);
  box-shadow: 0 14px 28px rgba(13,110,253,0.22);
}

.button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* Optional: make buttons full-width on small screens */
@media (max-width: 480px) {
  .button { width: 100%; }
}