:root {
  --bg: #fdfcff;
  --bg-2: #efe5ff;

  --card: #fff;
  --text: #1f1f1f;
  --muted: #6a6a6a;
  --brand: #9d2ec5;
  --brand-600: #ae37da;
  --border: #e7ddff;
  --card: #ffffff;
  --ring: rgba(124, 58, 237, 0.25);
  --row-hover: #f5f6fa;
  --glow: rgba(124, 58, 237, 0.22);
  --white: #fff;
  --soft-lilac: #eee7ff;
  --soft-code: #f5efff;
  --purple-100: #efe8ff;
  --green-100: #e8fff1;
  --amber-100: #fff7e6;
  --pill-queued: #eadcff;
  --pill-pre: #dce7ff;
  --pill-train: #dceeff;
  --pill-opt: #d7fff4;
  --pill-pack: #fff2d8;
  --pill-done: #dcfbe7;
  --pill-fail: #ffe1e1;
  --row-hover: #ebecec;

  --shadow: 0 10px 30px rgba(124, 58, 237, 0.14);
  --shadow-deep: 0 12px 36px rgba(124, 58, 237, 0.22);
  --shadow-strong: 0 16px 40px rgba(124, 58, 237, 0.2);

  --gap: 16px;
}

html[data-theme="dark"] {
  --bg: #0d1422;
  --bg-2: #111927;
  --card: #151f30;
  --text: #edf3ff;
  --muted: #9bacbf;
  --brand: #a160eb;
  --brand-600: #8848d7;
  --border: #253347;
  --ring: rgba(161, 96, 235, 0.24);
  --row-hover: #1a2537;
  --glow: rgba(161, 96, 235, 0.18);
  --soft-lilac: #1a2436;
  --soft-code: #121b29;
  --purple-100: #221533;
  --green-100: #11251f;
  --amber-100: #2b2312;
  --pill-queued: #281d3b;
  --pill-pre: #18253c;
  --pill-train: #12273b;
  --pill-opt: #112c29;
  --pill-pack: #2c2416;
  --pill-done: #13291d;
  --pill-fail: #331b1d;
  --shadow: 0 16px 36px rgba(0, 0, 0, 0.34);
  --shadow-deep: 0 20px 42px rgba(0, 0, 0, 0.42);
  --shadow-strong: 0 24px 48px rgba(0, 0, 0, 0.46);
}

html[data-theme="dark"] {
  --bg: #0d1422;
  --bg-2: #111927;
  --card: #151f30;
  --text: #edf3ff;
  --muted: #9bacbf;
  --brand: #a160eb;
  --brand-600: #8848d7;
  --border: #253347;
  --ring: rgba(161, 96, 235, 0.24);
  --row-hover: #1a2537;
  --glow: rgba(161, 96, 235, 0.18);
  --soft-lilac: #1a2436;
  --soft-code: #121b29;
  --purple-100: #221533;
  --green-100: #11251f;
  --amber-100: #2b2312;
  --pill-queued: #281d3b;
  --pill-pre: #18253c;
  --pill-train: #12273b;
  --pill-opt: #112c29;
  --pill-pack: #2c2416;
  --pill-done: #13291d;
  --pill-fail: #331b1d;
  --shadow: 0 16px 36px rgba(0, 0, 0, 0.34);
  --shadow-deep: 0 20px 42px rgba(0, 0, 0, 0.42);
  --shadow-strong: 0 24px 48px rgba(0, 0, 0, 0.46);
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

body {
  font-family:
    ui-sans-serif,
    system-ui,
    -apple-system,
    Segoe UI,
    Roboto,
    "Helvetica Neue",
    Arial;
  color: var(--text);
  background: var(--bg-2);

  /* display: flex; */
  flex-direction: column;
}

html[data-theme="dark"] body {
  background:
    radial-gradient(circle at top, rgba(161, 96, 235, 0.12), transparent 26%),
    linear-gradient(180deg, #0c1320 0%, #111927 100%);
}

html[data-theme="dark"] body {
  background:
    radial-gradient(circle at top, rgba(161, 96, 235, 0.12), transparent 26%),
    linear-gradient(180deg, #0c1320 0%, #111927 100%);
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.page-content {
  animation: fadeIn 0.4s ease-out forwards;
  padding-bottom: 50px;
}

.site-footer {
  background: var(--bg);
  padding: 10px 20px 14px;
  text-align: center;
  color: var(--muted);
  margin-top: auto;
}

.site-footer .line {
  height: 1px;
  background: #eee;
  margin: 0 auto 10px;
  max-width: 1400px;
}

html[data-theme="dark"] .site-footer .line {
  background: #253347;
}

html[data-theme="dark"] .site-footer .line {
  background: #253347;
}