:root {
  --bg: #f4f3fa;
  --panel: rgba(255, 255, 255, 0.82);
  --panel-strong: rgba(255, 255, 255, 0.92);
  --ink: #171920;
  --muted: rgba(23, 25, 32, 0.64);
  --brand: #1b1d24;
  --brand-2: #2b2f39;
  --line: rgba(20, 24, 34, 0.08);
  --line-strong: rgba(20, 24, 34, 0.12);
  --ok: #0f766e;
  --err: #b91c1c;
  --warn: #a16207;
  --ready: #0f766e;
  --status-queue-text: #6b7280;
  --status-queue-bg: #f3f4f6;
  --status-building-text: #2563eb;
  --status-building-bg: #eff6ff;
  --status-done-text: #059669;
  --status-done-bg: #ecfdf5;
  --status-fail-text: #dc2626;
  --status-fail-bg: #fef2f2;
  --action-fill: #1b1d24;
  --action-fill-hover: #2b2f39;
  --action-text: #f8fafc;
  --shell-shadow: 0 22px 68px rgba(24, 28, 38, 0.08);
  --panel-shadow: 0 18px 54px rgba(24, 28, 38, 0.08);
  --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
  --nav-pill-height: 56px;
  --nav-pill-padding-x: 28px;
  --nav-pill-font-size: 16px;
}

html {
  height: 100%;
  overflow-x: hidden;
}

html.workspace-root {
  overflow: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

html.workspace-root::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100%;
  font-family: "Noto Sans SC", sans-serif;
  color: var(--ink);
  background: var(--bg);
}

body:not(.landing-mode)::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 12%, rgba(141, 120, 247, 0.14), transparent 22%),
    radial-gradient(circle at 82% 10%, rgba(255, 187, 114, 0.14), transparent 22%),
    radial-gradient(circle at 46% 34%, rgba(171, 198, 255, 0.1), transparent 20%),
    radial-gradient(circle at 16% 84%, rgba(140, 224, 154, 0.08), transparent 20%);
}

body.workspace-mode {
  height: 100dvh;
  min-height: 100dvh;
  background: var(--bg);
  scrollbar-width: none;
  -ms-overflow-style: none;
  overflow: hidden;
  overscroll-behavior: none;
}

body.workspace-mode::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

a {
  color: var(--brand);
}