:root {
  --navy: #10182b;
  --navy-soft: #1a2440;
  --purple: #6d28d9;
  --purple-dark: #5b21b6;
  --purple-tint: #f3efff;
  --purple-line: #ddd6fb;
  --gold: #c9a227;
  --page: #f1f3f8;
  --card: #ffffff;
  --line: #dfe2ea;
  --line-soft: #eef0f5;
  --rule: #dcdfe8;
  --ink: #1e293b;
  --ink-strong: #10182b;
  --ink-soft: #64748b;
  --ink-faint: #7a879f;
  --ink-light: #a8adbd;
  --good: #16a34a;
  --good-bg: #e7f8ee;
  --good-line: #bfe9cf;
  --danger: #dc2626;
  --danger-line: #f6c9c9;
}

/* Tones. A card, panel or badge takes a colour by carrying one of these classes;
   the rules that spend the values live with the component that uses them, so a
   colour is defined once and never copied into a module stylesheet. Every tone
   here is already in the sidebar's group palette. */
.tint-purple { --tint-wash: #f6f4ff; --tint-wash-deep: #ece6fe; --tint-edge: #e4dcfb; --tint-edge-deep: #c4b4f6; --tint-ink: #5b21b6; --tint-glow: rgba(109, 40, 217, 0.26); --tint-chip-light: #7c5cf6; --tint-chip-dark: #5b21b6; }
.tint-blue   { --tint-wash: #eff5fe; --tint-wash-deep: #dfeafd; --tint-edge: #d3e3fb; --tint-edge-deep: #a9c8f6; --tint-ink: #1e4bab; --tint-glow: rgba(30, 75, 171, 0.24);  --tint-chip-light: #4b91f7; --tint-chip-dark: #1e4bab; }
.tint-teal   { --tint-wash: #edf9f7; --tint-wash-deep: #d9f2ee; --tint-edge: #c9e9e3; --tint-edge-deep: #9bd6cd; --tint-ink: #0f766e; --tint-glow: rgba(15, 118, 110, 0.24);  --tint-chip-light: #14b8a6; --tint-chip-dark: #0f766e; }
.tint-amber  { --tint-wash: #fdf5e9; --tint-wash-deep: #fbe9d1; --tint-edge: #f2e2c6; --tint-edge-deep: #e5c795; --tint-ink: #b45309; --tint-glow: rgba(180, 83, 9, 0.24);   --tint-chip-light: #e39117; --tint-chip-dark: #b45309; }
.tint-slate  { --tint-wash: #f5f7fa; --tint-wash-deep: #e8ecf3; --tint-edge: #e3e8f0; --tint-edge-deep: #c8d1e0; --tint-ink: #475569; --tint-glow: rgba(71, 85, 105, 0.2);   --tint-chip-light: #7d8aa3; --tint-chip-dark: #475569; }
.tint-rose   { --tint-wash: #fdf1f4; --tint-wash-deep: #fbe1e8; --tint-edge: #f8d4dd; --tint-edge-deep: #f0aec0; --tint-ink: #be123c; --tint-glow: rgba(190, 18, 60, 0.22);  --tint-chip-light: #e94a6c; --tint-chip-dark: #be123c; }
.tint-green  { --tint-wash: #f1fbf5; --tint-wash-deep: #dff5e8; --tint-edge: #bfe9cf; --tint-edge-deep: #93d8ae; --tint-ink: #12803b; --tint-glow: rgba(22, 163, 74, 0.22);  --tint-chip-light: #34c46e; --tint-chip-dark: #12803b; }

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--page);
  color: var(--ink);
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--purple); text-decoration: none; }
a:hover { color: var(--purple-dark); text-decoration: underline; }

.button-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  margin-top: 0;
  padding: 11px 18px;
  border: none;
  border-radius: 11px;
  background: var(--purple);
  color: #ffffff;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background 140ms ease;
}
.button-primary:hover { background: var(--purple-dark); }
/* Access screens keep the full-width form button. */
.access-card .button-primary { display: block; width: 100%; margin-top: 22px; }
.button-link { text-align: center; text-decoration: none; }
.button-link-quiet { display: inline-flex; align-items: center; text-decoration: none; }
.button-link-quiet:hover { text-decoration: none; }
.button-link:hover { color: #ffffff; text-decoration: none; }

.button-quiet {
  border: 1px solid var(--line);
  background: #ffffff;
  color: #475569;
  border-radius: 10px;
  padding: 8px 13px;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
}
.button-quiet:hover { background: #f7f8fb; }

.field-label {
  display: block;
  margin: 16px 0 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.field {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #ffffff;
  font-family: inherit;
  font-size: 13px;
  color: var(--ink);
  outline: none;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.field:focus {
  border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(109, 40, 217, 0.12);
}

.notice {
  margin: 18px 0 4px;
  padding: 11px 14px;
  border-radius: 11px;
  font-size: 12.5px;
  line-height: 1.6;
}
.notice-error  { background: #fdf1f1; color: #a52020; border: 1px solid var(--danger-line); }
.notice-locked { background: #fdf3e0; color: #8a5c05; border: 1px solid #ecdcaa; }