@import url("https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap");

:root {
  --ds-canvas: #cda8ea;
  --ds-canvas-a: #caa6eb;
  --ds-canvas-b: #bde9ef;
  --ds-canvas-grid: rgba(255, 255, 255, 0.35);
  --ds-ink: #2c2952;
  --ds-muted: #5d5788;
  --ds-window-pink: #ffd1eb;
  --ds-window-cyan: #c4f2ff;
  --ds-window-cream: #fff8d9;
  --ds-border: #3b3768;
  --ds-shadow: rgba(44, 41, 82, 0.28);
  --ds-accent-red: #ef4444;
  --ds-success: #37b589;
  --ds-error: #cf4363;
  --ds-grad-a: rgba(255, 203, 236, 0.45);
  --ds-grad-b: rgba(176, 242, 255, 0.4);
  --ds-grad-c: rgba(255, 240, 171, 0.35);
  --ds-grad-d: rgba(210, 205, 255, 0.3);
  --ds-grad-e: rgba(194, 255, 228, 0.28);
  --ds-grad-f: rgba(255, 190, 210, 0.24);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body.y2k {
  font-family: "Space Grotesk", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif !important;
  color: var(--ds-ink) !important;
  background-color: var(--ds-canvas-a) !important;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.4) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.4) 1px, transparent 1px),
    linear-gradient(rgba(78, 59, 117, 0.18) 1.5px, transparent 1.5px),
    linear-gradient(90deg, rgba(78, 59, 117, 0.18) 1.5px, transparent 1.5px);
  background-size: 24px 24px, 24px 24px, 96px 96px, 96px 96px;
  background-position: 0 0, 0 0, 0 0, 0 0;
  animation:
    y2kCanvasPulse 28s ease-in-out infinite alternate;
}

@keyframes y2kCanvasPulse {
  from {
    background-color: var(--ds-canvas-a);
  }
  to {
    background-color: var(--ds-canvas-b);
  }
}

body.y2k::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(700px 400px at 14% 18%, var(--ds-grad-a), transparent 62%),
    radial-gradient(620px 420px at 86% 32%, var(--ds-grad-b), transparent 64%),
    radial-gradient(500px 300px at 42% 80%, var(--ds-grad-c), transparent 58%);
  mix-blend-mode: color-dodge;
  opacity: 0.95;
  z-index: -1;
  animation:
    y2kGlowSaturationPulse 22s ease-in-out infinite alternate;
}

@keyframes y2kGlowSaturationPulse {
  from {
    filter: saturate(1.05) hue-rotate(0deg);
    opacity: 0.74;
  }
  to {
    filter: saturate(1.45) hue-rotate(34deg);
    opacity: 0.98;
  }
}

body.y2k.page-home {
  --ds-canvas-a: #cba5ec;
  --ds-canvas-b: #b6eaf2;
  --ds-grad-a: rgba(255, 197, 236, 0.5);
  --ds-grad-b: rgba(126, 235, 255, 0.58);
  --ds-grad-c: rgba(255, 235, 124, 0.5);
  --ds-grad-d: rgba(153, 194, 255, 0.5);
  --ds-grad-e: rgba(160, 255, 216, 0.42);
  --ds-grad-f: rgba(255, 170, 196, 0.42);
}

body.y2k.page-notes {
  --ds-canvas-a: #c2acee;
  --ds-canvas-b: #b8ead8;
  --ds-grad-a: rgba(255, 176, 212, 0.48);
  --ds-grad-b: rgba(140, 217, 255, 0.5);
  --ds-grad-c: rgba(176, 255, 214, 0.46);
  --ds-grad-d: rgba(205, 189, 255, 0.45);
  --ds-grad-e: rgba(255, 232, 149, 0.4);
  --ds-grad-f: rgba(255, 165, 208, 0.34);
}

body.y2k.page-settings {
  --ds-canvas-a: #d2aee9;
  --ds-canvas-b: #c1eefd;
  --ds-grad-a: rgba(255, 208, 246, 0.56);
  --ds-grad-b: rgba(156, 244, 255, 0.52);
  --ds-grad-c: rgba(255, 248, 160, 0.45);
  --ds-grad-d: rgba(186, 206, 255, 0.48);
  --ds-grad-e: rgba(175, 255, 230, 0.42);
  --ds-grad-f: rgba(255, 184, 205, 0.34);
}

body.y2k.page-mcp-guide {
  --ds-canvas-a: #c5afe6;
  --ds-canvas-b: #b5d9fb;
  --ds-grad-a: rgba(233, 197, 255, 0.53);
  --ds-grad-b: rgba(120, 211, 255, 0.56);
  --ds-grad-c: rgba(255, 213, 118, 0.46);
  --ds-grad-d: rgba(204, 187, 255, 0.46);
  --ds-grad-e: rgba(135, 255, 240, 0.4);
  --ds-grad-f: rgba(255, 170, 190, 0.35);
}

body.y2k.page-about {
  --ds-canvas-a: #d4b0e4;
  --ds-canvas-b: #b6efde;
  --ds-grad-a: rgba(255, 200, 225, 0.52);
  --ds-grad-b: rgba(163, 233, 255, 0.5);
  --ds-grad-c: rgba(175, 255, 198, 0.44);
  --ds-grad-d: rgba(220, 198, 255, 0.44);
  --ds-grad-e: rgba(255, 223, 142, 0.42);
  --ds-grad-f: rgba(255, 178, 214, 0.34);
}

body.y2k::after {
  content: "";
  position: fixed;
  inset: -8%;
  pointer-events: none;
  background:
    radial-gradient(52% 44% at 16% 26%, var(--ds-grad-d), transparent 68%),
    radial-gradient(44% 40% at 84% 22%, var(--ds-grad-e), transparent 72%),
    radial-gradient(48% 42% at 60% 84%, var(--ds-grad-f), transparent 73%),
    conic-gradient(from 110deg at 52% 48%, rgba(255, 255, 255, 0.16), transparent 18%, rgba(186, 214, 255, 0.14) 40%, transparent 58%, rgba(255, 208, 236, 0.14) 78%, transparent 100%);
  mix-blend-mode: overlay;
  opacity: 0.9;
  z-index: -2;
  animation:
    y2kGlowSaturationPulseAlt 34s ease-in-out infinite alternate;
}

@keyframes y2kGlowSaturationPulseAlt {
  from {
    filter: saturate(1) hue-rotate(0deg);
    opacity: 0.58;
  }
  to {
    filter: saturate(1.35) hue-rotate(-26deg);
    opacity: 0.86;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.y2k {
    animation: none;
  }
  body.y2k::before {
    animation: none;
    filter: none;
  }
  body.y2k::after {
    animation: none;
    filter: none;
  }
}

body.y2k h1,
body.y2k h2,
body.y2k h3 {
  font-family: "Chakra Petch", "Space Grotesk", "Inter", sans-serif !important;
  color: var(--ds-ink) !important;
  letter-spacing: 0.04em;
}

body.y2k .muted,
body.y2k .status,
body.y2k .meta,
body.y2k .msg {
  color: var(--ds-muted) !important;
}

body.y2k .top a,
body.y2k .top button,
body.y2k #header a,
body.y2k #header button,
body.y2k #setup button,
body.y2k #toggle-summary {
  font-family: "Chakra Petch", "Space Grotesk", "Inter", sans-serif !important;
  border: 1.5px solid var(--ds-border) !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #fffafc, #f0ebff) !important;
  color: var(--ds-ink) !important;
  box-shadow: 0 4px 0 rgba(59, 55, 104, 0.22) !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
}

body.y2k .card,
body.y2k .capture,
body.y2k #setup .auth-onboarding,
body.y2k #setup .todoist-onboarding,
body.y2k #setup .claude-onboarding,
body.y2k #result-panel {
  border: 1.5px solid var(--ds-border) !important;
  border-radius: var(--ui-radius-card);
  box-shadow:
    0 8px 18px var(--ds-shadow),
    inset 0 0 0 1px rgba(255, 255, 255, 0.54) !important;
}

body.y2k .card:nth-of-type(3n + 1),
body.y2k .capture:nth-of-type(3n + 1),
body.y2k #setup .auth-onboarding {
  background: var(--ds-window-pink) !important;
}
body.y2k .card:nth-of-type(3n + 2),
body.y2k .capture:nth-of-type(3n + 2),
body.y2k #setup .todoist-onboarding {
  background: var(--ds-window-cyan) !important;
}
body.y2k .card:nth-of-type(3n + 3),
body.y2k .capture:nth-of-type(3n + 3),
body.y2k #setup .claude-onboarding,
body.y2k #result-panel {
  background: var(--ds-window-cream) !important;
}

body.y2k input {
  font-family: "Space Grotesk", ui-monospace, SFMono-Regular, Menlo, monospace !important;
  border: 1.5px solid var(--ds-border) !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.86) !important;
  color: var(--ds-ink) !important;
}

body.y2k select {
  width: 100%;
  max-width: 100%;
  padding: 10px 12px;
  border: 1.5px solid var(--ds-border) !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.86) !important;
  color: var(--ds-ink) !important;
  font-family: "Space Grotesk", "Inter", sans-serif !important;
}

body.y2k #label,
body.y2k #sublabel,
body.y2k #rec-hud,
body.y2k .made-by {
  font-family: "Chakra Petch", "Space Grotesk", "Inter", sans-serif !important;
}

body.y2k #button {
  border: 0 !important;
  box-shadow: none !important;
}

body.y2k #toast {
  border: 1.5px solid var(--ds-border) !important;
  background: rgba(252, 241, 255, 0.94) !important;
  color: var(--ds-ink) !important;
}

body.y2k #toast.error {
  background: rgba(255, 223, 232, 0.95) !important;
  color: #7f1d34 !important;
}

body.y2k .made-by {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(44, 41, 82, 0.7) !important;
  margin-top: auto;
  padding-top: 16px;
}

body.y2k main {
  min-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  padding-bottom: max(20px, env(safe-area-inset-bottom, 0px));
}

body.y2k .top,
body.y2k .group,
body.y2k .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body.y2k .top {
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 14px;
}

body.y2k .top > button {
  margin-left: auto;
}

body.y2k .brand-row {
  display: flex;
  justify-content: center;
  margin-bottom: 8px;
}

body.y2k .brand-chip {
  display: block;
  color: var(--ds-ink);
  font-family: "Chakra Petch", "Space Grotesk", "Inter", sans-serif;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.1;
  text-transform: uppercase;
}

body.y2k input {
  width: 100%;
  max-width: 100%;
}