/* =============================================================================
   AUTO BUMP — design tokens and shared components
   Colours, spacing and effects live here. Page-specific rules live in
   landing.css and panel.css.
   ========================================================================== */

:root {
  /* Surfaces */
  --bg: #04060c;
  --bg-2: #070b14;
  --panel: rgba(12, 18, 32, 0.72);
  --panel-solid: #0a1020;
  --line: rgba(120, 190, 255, 0.14);
  --line-strong: rgba(120, 190, 255, 0.3);

  /* Ink */
  --ink: #e8f1ff;
  --ink-dim: #93a6c4;
  --ink-faint: #5b6c8a;

  /* Accents */
  --cyan: #22e0ff;
  --cyan-deep: #0aa8d6;
  --violet: #8b5cf6;
  --magenta: #ff2d92;
  --lime: #7dff9b;
  --amber: #ffb020;
  --red: #ff4d5e;

  --grad: linear-gradient(115deg, var(--cyan), var(--violet) 55%, var(--magenta));
  --grad-soft: linear-gradient(115deg, rgba(34, 224, 255, 0.16), rgba(139, 92, 246, 0.16));

  /* Buttons run green instead of the site gradient, so the thing you are meant
     to click never blends into the decoration around it. Change these two and
     every primary button on the site changes with them. */
  --btn-green: #00ff9c;
  --btn-green-2: #64ff3c;
  --grad-btn: linear-gradient(115deg, var(--btn-green), var(--btn-green-2));

  /* Geometry */
  --r-sm: 6px;
  --r: 12px;
  --r-lg: 20px;
  --pad: clamp(1rem, 2.5vw, 1.6rem);
  --max: 1200px;

  /* Type */
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", "Fira Code", Consolas, monospace;

  --glow-cyan: 0 0 24px rgba(34, 224, 255, 0.35);
  --glow-magenta: 0 0 24px rgba(255, 45, 146, 0.3);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Ambient backdrop: static aurora + a fine grid, both fixed behind content. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(60rem 40rem at 15% -10%, rgba(34, 224, 255, 0.14), transparent 60%),
    radial-gradient(50rem 35rem at 95% 0%, rgba(139, 92, 246, 0.16), transparent 60%),
    radial-gradient(40rem 30rem at 50% 110%, rgba(255, 45, 146, 0.1), transparent 60%),
    var(--bg);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(120, 190, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120, 190, 255, 0.05) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(90rem 70rem at 50% 20%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(90rem 70rem at 50% 20%, #000 20%, transparent 78%);
}

a { color: var(--cyan); text-decoration: none; }
a:hover { color: #fff; }

h1, h2, h3, h4 {
  margin: 0 0 0.5em;
  line-height: 1.12;
  letter-spacing: -0.02em;
  font-weight: 700;
}

p { margin: 0 0 1em; }

::selection { background: rgba(34, 224, 255, 0.3); color: #fff; }

:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ------------------------------------------------------------------ layout */

.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
}

.section { padding: clamp(4rem, 9vw, 7.5rem) 0; position: relative; }

.kicker {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.kicker::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--cyan);
  box-shadow: var(--glow-cyan);
}

.section-title {
  font-size: clamp(1.9rem, 4.6vw, 3.2rem);
  margin-bottom: 0.6rem;
}

.section-intro {
  color: var(--ink-dim);
  max-width: 62ch;
  font-size: 1.05rem;
}

.grad-text {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ------------------------------------------------------------------ panels */

.panel {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* Corner brackets — the HUD detail that makes a plain box read as a readout. */
.bracket::before,
.bracket::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border: 1px solid var(--cyan);
  opacity: 0.7;
  pointer-events: none;
}
.bracket::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; border-radius: var(--r-sm) 0 0 0; }
.bracket::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; border-radius: 0 0 var(--r-sm) 0; }

/* ----------------------------------------------------------------- buttons */

.btn {
  --btn-bg: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.78rem 1.35rem;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--btn-bg);
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  font-size: 0.94rem;
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease, background 0.16s ease;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}

.btn:hover { transform: translateY(-1px); border-color: var(--cyan); }
.btn:active { transform: translateY(0); }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; transform: none; }

.btn-primary {
  border-color: transparent;
  background: var(--grad-btn);
  color: #04060c;
  font-weight: 800;
  letter-spacing: 0.01em;
  box-shadow: 0 8px 30px rgba(0, 255, 156, 0.25);
}
.btn-primary:hover { box-shadow: 0 10px 40px rgba(100, 255, 60, 0.45); }

/* Sheen sweep on hover. */
.btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.45), transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.6s ease;
}
.btn-primary:hover::after { transform: translateX(120%); }

.btn-ghost { background: rgba(255, 255, 255, 0.03); }

.btn-danger { border-color: rgba(255, 77, 94, 0.4); color: #ffb3ba; }
.btn-danger:hover { border-color: var(--red); background: rgba(255, 77, 94, 0.1); }

.btn-sm { padding: 0.45rem 0.85rem; font-size: 0.82rem; }
.btn-block { width: 100%; }

/* ------------------------------------------------------------------ inputs */

.field { margin-bottom: 1rem; }

.field label {
  display: block;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 0.45rem;
}

.input,
input[type="text"],
input[type="password"],
input[type="number"],
select,
textarea {
  width: 100%;
  padding: 0.8rem 0.95rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: rgba(4, 8, 18, 0.75);
  color: var(--ink);
  font: inherit;
  font-size: 0.95rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.input:focus,
input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(34, 224, 255, 0.14);
}

.input::placeholder { color: var(--ink-faint); }

.hint { font-size: 0.8rem; color: var(--ink-faint); margin-top: 0.4rem; }

/* ------------------------------------------------------------------- chips */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
  background: rgba(255, 255, 255, 0.02);
}

.dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

.chip-running { color: var(--lime); border-color: rgba(125, 255, 155, 0.35); background: rgba(125, 255, 155, 0.08); }
.chip-pending { color: var(--amber); border-color: rgba(255, 176, 32, 0.35); background: rgba(255, 176, 32, 0.08); }
.chip-stopped { color: var(--red); border-color: rgba(255, 77, 94, 0.35); background: rgba(255, 77, 94, 0.08); }
.chip-expired { color: var(--ink-faint); }

.chip-running .dot { animation: pulse 1.8s ease-in-out infinite; }

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(125, 255, 155, 0.6); }
  50% { box-shadow: 0 0 0 6px rgba(125, 255, 155, 0); }
}

/* ------------------------------------------------------------------ toasts */

#toasts {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  max-width: min(24rem, calc(100vw - 2rem));
}

.toast {
  padding: 0.85rem 1.05rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-strong);
  background: rgba(10, 16, 32, 0.96);
  backdrop-filter: blur(10px);
  font-size: 0.9rem;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  animation: toast-in 0.25s ease;
  border-left: 3px solid var(--cyan);
}

.toast.error { border-left-color: var(--red); }
.toast.ok { border-left-color: var(--lime); }

@keyframes toast-in {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------------ modals */

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(2, 4, 10, 0.78);
  backdrop-filter: blur(8px);
  animation: fade 0.18s ease;
}

.modal {
  width: min(30rem, 100%);
  max-height: 92vh;
  overflow-y: auto;
  padding: clamp(1.4rem, 3vw, 2rem);
  border-radius: var(--r-lg);
  border: 1px solid var(--line-strong);
  background: linear-gradient(160deg, rgba(14, 22, 40, 0.98), rgba(6, 10, 20, 0.98));
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  animation: modal-in 0.22s cubic-bezier(0.2, 0.9, 0.3, 1);
  position: relative;
}

.modal h2 { font-size: 1.5rem; }
.modal .sub { color: var(--ink-dim); font-size: 0.92rem; margin-bottom: 1.4rem; }

.modal-close {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-dim);
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
}
.modal-close:hover { color: #fff; border-color: var(--cyan); }

@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-in {
  from { opacity: 0; transform: translateY(14px) scale(0.97); }
  to { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------- discord  */

.discord-fab {
  position: fixed;
  right: 1.1rem;
  bottom: 1.1rem;
  z-index: 120;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(150deg, #5865f2, #404eed);
  box-shadow: 0 10px 30px rgba(88, 101, 242, 0.45);
  color: #fff;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.discord-fab:hover { transform: translateY(-3px) scale(1.06); box-shadow: 0 16px 40px rgba(88, 101, 242, 0.6); }
.discord-fab svg { width: 26px; height: 26px; }

.discord-fab .tip {
  position: absolute;
  right: calc(100% + 10px);
  white-space: nowrap;
  font-size: 0.78rem;
  padding: 0.35rem 0.7rem;
  border-radius: var(--r-sm);
  background: rgba(10, 16, 32, 0.95);
  border: 1px solid var(--line);
  color: var(--ink);
  opacity: 0;
  transform: translateX(6px);
  transition: opacity 0.18s ease, transform 0.18s ease;
  pointer-events: none;
}
.discord-fab:hover .tip { opacity: 1; transform: none; }

/* Keep the floating button clear of the toast stack. */
#toasts { margin-bottom: 4.2rem; }

/* ----------------------------------------------------------------- helpers */

.mono { font-family: var(--mono); }
.dim { color: var(--ink-dim); }
.faint { color: var(--ink-faint); }
.center { text-align: center; }
.row { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
.spread { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.stack { display: grid; gap: 0.75rem; }
.hidden { display: none !important; }
.spin { animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.09), rgba(255,255,255,0.04));
  background-size: 200% 100%;
  animation: shimmer 1.3s linear infinite;
  border-radius: var(--r-sm);
}
@keyframes shimmer { to { background-position: -200% 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}