/* The page an app answers with until its first deploy: VibeStack Dev's colours and spacing, in the
   panel's own two themes (Catppuccin Latte, Tokyo Night in dark mode). It is copied next to the
   placeholder page of every app (see HelperCli::placeholder), so the page loads nothing but this file. */
:root {
  color-scheme: light dark;
  --bg: #eff1f5;
  --surface: #ffffff;
  --text: #4c4f69;
  --muted: #5c5f77;
  --border: #ccd0da;
  --accent: #8839ef;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1a1b26;
    --surface: #1f2335;
    --text: #c0caf5;
    --muted: #959dcb;
    --border: #2f3549;
    --accent: #7aa2f7;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.55;
}

main {
  max-width: 32rem;
  margin: 4rem auto;
  padding: 22px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 6px 18px rgba(0, 0, 0, 0.06);
}

h1 {
  margin: 0 0 8px;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

h1::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 10px;
  border-radius: 3px;
  background: var(--accent);
  transform: rotate(45deg);
}

p {
  margin: 0;
  color: var(--muted);
}