/* AND Circle — shared branding.
   Palette: warm orange gradient on clean white. Ring/circle motif. */
:root {
  --orange-1: #f7941e; /* amber-orange (top of gradient) */
  --orange-2: #f26522; /* burnt orange (bottom of gradient) */
  --grad: linear-gradient(135deg, var(--orange-1), var(--orange-2));
  --ink: #2a2118;
  --muted: #8a8175;
  --line: #efe9e2;
  --surface: #ffffff;
  --bg: #fffdfb;
  --ok: #2e9e5b;
  --warn: #e0a106;
  --err: #d8442a;
  --radius: 18px;
  --shadow: 0 6px 24px rgba(242, 101, 34, 0.10);
  font-synthesis: none;
}

* { box-sizing: border-box; }

/* The pages toggle sections via the `hidden` attribute. Author `display:` rules
   would otherwise override the UA `[hidden]{display:none}`, so enforce it. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--orange-2); }

.btn {
  appearance: none;
  border: none;
  border-radius: 999px;
  padding: 14px 22px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  background: var(--grad);
  color: #fff;
  box-shadow: var(--shadow);
  transition: transform 0.06s ease, opacity 0.2s ease;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn.secondary {
  background: #fff;
  color: var(--orange-2);
  border: 1.5px solid var(--orange-2);
  box-shadow: none;
}
.btn.ghost {
  background: transparent;
  color: var(--muted);
  box-shadow: none;
}

input[type="text"], input[type="password"] {
  width: 100%;
  padding: 14px 16px;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  font-size: 16px;
  background: #fff;
  color: var(--ink);
}
input:focus { outline: none; border-color: var(--orange-1); }

/* The AND Circle mark — three brand-orange blades forming a circle.
   Inlined as an SVG background so a single rule drives every size/page
   (`.ring-mark`, `.ring-mark.big`, the wordmark variant). */
.ring-mark {
  width: 58px;
  height: 58px;
  flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 597 137 139'%3E%3Cg transform='rotate(90 72 662)'%3E%3Cpath fill='%23F26522' d='M102.8,701.1c0,7.5,6.1,13.6,13.6,13.6,7.5,0,13.6-6.1,13.6-13.6v-.2s0-70,0-70c0-11.5-6-22.6-16.6-28.8-3.4-1.9-7-3.2-10.6-3.9v102.9Z'/%3E%3Cpath fill='%23F7941E' d='M32.9,674.4c-6.5-3.8-14.8-1.5-18.6,5-3.8,6.5-1.5,14.8,5,18.6,0,0,.1,0,.2.1l60.6,35h0c9.9,5.7,22.6,6.2,33.3,0,3.4-1.9,6.3-4.4,8.7-7.2l-89.1-51.4Z'/%3E%3Cpath fill='%23FBB040' d='M91,627.2c6.5-3.8,8.7-12.1,5-18.6-3.8-6.5-12.1-8.7-18.6-5,0,0-.1,0-.2.1l-60.6,35h0C6.7,644.5,0,655.2,0,667.6c0,3.9.7,7.6,1.9,11.1l89.1-51.4Z'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;  
}
/* The old badge drew a white glyph via ::after; the new mark is the art itself. */
.ring-mark::after { content: none; }

.brand-row {
  display: flex;
  align-items: center;
  gap: 14px;
}
.brand-title { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.brand-sub { color: var(--muted); font-size: 13px; margin-top: 2px; }

.muted { color: var(--muted); }
.center { text-align: center; }
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}