/* IMMORTAL theme: the palette and the shared look of the account form, the staff form and the review dashboard.
   Colours are sampled from the logo: violet #7a22ff (outline), deep violet #5b10d8 (inner fill), white strokes on
   near-black. Every page and ui.css read these tokens; change a colour here, not in the pages. */
:root {
  color-scheme: dark;

  /* Surfaces, darkest to lightest */
  --bg: #07060b;
  --surface: #0e0c16;
  --surface-2: #15121f;
  --panel: rgba(16, 13, 25, .88);
  --field: #0a0910;
  --line: #231d33;
  --line-strong: #3a2c62;
  --hover: color-mix(in srgb, var(--accent) 8%, transparent);

  /* Text */
  --text: #f4f2fa;
  --text-2: #d3cde3;
  --muted: #958fab;
  --faint: #6c6684;

  /* Brand */
  --accent: #7a22ff;
  --accent-hi: #9046ff;
  --accent-deep: #5b10d8;
  --accent-soft: #b897ff;
  --accent-ink: #ffffff;
  --accent-grad: linear-gradient(180deg, var(--accent-hi), var(--accent) 55%, var(--accent-deep));

  /* States */
  --ok: #2fe0a0;
  --warn: #f5b94a;
  --danger: #ff5a7a;
  --info: #8fa2ff;
  --pink: #ff7ac0;
  --s-new: var(--accent-soft);
  --s-reviewing: var(--info);
  --s-accepted: var(--ok);
  --s-rejected: #f08aa6;
  --cyan: #6fd3e8;   /* extra chart colours (traffic sources) */
  --lime: #9be38a;

  /* Third parties */
  --discord: #5865f2;
  --discord-hover: #4752c4;

  /* Shape and type */
  --radius: 18px;
  --radius-sm: 11px;
  --shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 24px 60px -34px rgba(0, 0, 0, .95);
  --font: system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "Cascadia Code", Consolas, monospace;
}

* { box-sizing: border-box; }
::selection { background: color-mix(in srgb, var(--accent) 55%, transparent); color: #fff; }
html { scrollbar-color: var(--line-strong) var(--bg); }

/* Backdrop: a violet glow from the top edge over a faint grid that fades out, on near-black. */
body {
  margin: 0; color: var(--text); font-family: var(--font);
  background:
    radial-gradient(1100px 520px at 50% -18%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 70%),
    radial-gradient(600px 400px at 100% 0%, color-mix(in srgb, var(--accent-deep) 16%, transparent), transparent 70%),
    var(--bg);
  background-attachment: fixed;
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(color-mix(in srgb, var(--accent-soft) 5%, transparent) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(90deg, color-mix(in srgb, var(--accent-soft) 5%, transparent) 1px, transparent 1px) 0 0 / 56px 56px;
  -webkit-mask-image: radial-gradient(900px 600px at 50% 0%, #000, transparent 75%);
  mask-image: radial-gradient(900px 600px at 50% 0%, #000, transparent 75%);
}
/* The mark, oversized and very faint, cropped off the right edge. */
body::before {
  content: ""; position: fixed; z-index: 0; pointer-events: none; top: 58%; right: 0;
  width: min(1050px, 110vh); aspect-ratio: 1; transform: translate(42%, -50%);
  background: url(/logo.png) center / contain no-repeat; opacity: .06; filter: grayscale(.2);
}
@media (max-width: 900px) { body::before { width: 130vw; transform: translate(48%, -50%); opacity: .04; } }

/* Brand bar: the logo and the IMMORTAL wordmark, then the page it belongs to. */
/* --page: the width of the page's content column, so the brand lines up with it. */
.topbar { position: relative; z-index: 2; display: flex; align-items: center; gap: 14px; max-width: var(--page, 1080px); margin: 0 auto; padding: 18px 16px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; }
.brand img { width: 34px; height: 34px; display: block; filter: drop-shadow(0 0 14px color-mix(in srgb, var(--accent) 45%, transparent)); }
.wordmark { font-weight: 800; font-size: 15px; letter-spacing: .22em; text-transform: uppercase; }
.topbar .crumb { padding-left: 14px; border-left: 1px solid var(--line-strong); color: var(--muted); font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 480px) { .topbar { padding: 14px 16px; gap: 10px; } .brand img { width: 30px; height: 30px; } .wordmark { font-size: 14px; letter-spacing: .18em; } .topbar .crumb { padding-left: 10px; } }

/* Eyebrow pill above page titles */
.eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; padding: 5px 12px 5px 10px; border-radius: 99px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.eyebrow i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-soft); box-shadow: 0 0 10px var(--accent); }
.eyebrow i.live { background: var(--ok); box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 60%, transparent); animation: livePing 2s infinite; }
@keyframes livePing { 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .eyebrow i.live { animation: none; } }

/* Gradient title text: white into the brand violet */
.grad { background: linear-gradient(100deg, #fff 30%, #e4d6ff 55%, var(--accent-soft) 80%, var(--accent-hi));
  -webkit-background-clip: text; background-clip: text; color: transparent; }

:focus-visible { outline-color: var(--accent-soft); }