:root {
  --background: 220 30% 98%;
  --foreground: 222 28% 9%;
  --primary: 42 89% 58%;
  --primary-foreground: 222 30% 8%;
  --secondary: 218 18% 91%;
  --secondary-foreground: 222 25% 12%;
  --muted: 219 14% 62%;
  --muted-foreground: 220 10% 38%;
  --destructive: 0 72% 58%;
  --destructive-foreground: 0 0% 100%;
  --border: 220 16% 84%;
  --card: 0 0% 100%;
  --card-foreground: 222 28% 9%;
  --shadow-sm: 0 8px 24px hsl(222 30% 8% / 0.08);
  --shadow-md: 0 18px 50px hsl(222 30% 8% / 0.14);
  --shadow-lg: 0 30px 90px hsl(222 30% 8% / 0.24);
  --transition-fast: 160ms ease;
  --transition-smooth: 280ms cubic-bezier(.2,.8,.2,1);
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 28px;
}

.dark {
  --background: 222 32% 5%;
  --foreground: 44 38% 92%;
  --primary: 42 89% 62%;
  --primary-foreground: 222 32% 6%;
  --secondary: 222 22% 12%;
  --secondary-foreground: 44 36% 90%;
  --muted: 222 16% 20%;
  --muted-foreground: 220 12% 66%;
  --destructive: 0 70% 55%;
  --destructive-foreground: 0 0% 100%;
  --border: 220 18% 18%;
  --card: 222 26% 8%;
  --card-foreground: 44 38% 92%;
  --shadow-sm: 0 8px 26px hsl(0 0% 0% / 0.26);
  --shadow-md: 0 18px 60px hsl(0 0% 0% / 0.38);
  --shadow-lg: 0 36px 120px hsl(0 0% 0% / 0.55);
}

* { box-sizing: border-box; }
html, body, #root { min-height: 100%; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  overflow-x: hidden;
}
button, input, textarea { font: inherit; }
button { cursor: pointer; }
::selection { background: hsl(var(--primary) / 0.35); }

.app-shell::before {
  content: "";
  position: fixed;
  inset: -20%;
  z-index: -3;
  background:
    radial-gradient(circle at 18% 18%, hsl(42 89% 62% / 0.18), transparent 26%),
    radial-gradient(circle at 82% 8%, hsl(190 84% 55% / 0.11), transparent 24%),
    radial-gradient(circle at 70% 78%, hsl(271 76% 60% / 0.12), transparent 30%),
    linear-gradient(135deg, hsl(222 34% 4%), hsl(220 32% 7%) 45%, hsl(228 28% 4%));
}
.app-shell::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  opacity: 0.34;
  background-image:
    linear-gradient(hsl(var(--foreground) / 0.06) 1px, transparent 1px),
    linear-gradient(90deg, hsl(var(--foreground) / 0.05) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: radial-gradient(circle at center, black, transparent 78%);
}
.orb {
  position: fixed;
  width: 420px;
  height: 420px;
  right: -120px;
  top: 95px;
  border-radius: 999px;
  z-index: -1;
  background: linear-gradient(135deg, hsl(42 89% 62% / .22), hsl(190 84% 55% / .08), hsl(0 0% 100% / .04));
  filter: blur(1px);
  box-shadow: inset 0 0 70px hsl(0 0% 100% / .08), 0 40px 110px hsl(42 89% 50% / .08);
  animation: floatOrb 9s ease-in-out infinite;
}
@keyframes floatOrb { 0%, 100% { transform: translate3d(0,0,0) rotate(0deg); } 50% { transform: translate3d(-24px,28px,0) rotate(8deg); } }
.glass {
  background: linear-gradient(180deg, hsl(var(--card) / .84), hsl(var(--card) / .62));
  border: 1px solid hsl(var(--border) / .78);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(24px);
}
.soft-card {
  background: hsl(var(--card) / .72);
  border: 1px solid hsl(var(--border) / .72);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(18px);
}
.nav-link { transition: var(--transition-smooth); }
.nav-link:hover { transform: translateX(3px); }
.message-enter { animation: rise .28s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.pulse-ring { animation: pulseRing 1.35s infinite; }
@keyframes pulseRing { 0% { box-shadow: 0 0 0 0 hsl(var(--primary) / .34); } 70% { box-shadow: 0 0 0 14px hsl(var(--primary) / 0); } 100% { box-shadow: 0 0 0 0 hsl(var(--primary) / 0); } }
.scroll-thin::-webkit-scrollbar { width: 7px; height: 7px; }
.scroll-thin::-webkit-scrollbar-thumb { background: hsl(var(--border)); border-radius: 999px; }
.focus-ring:focus { outline: 2px solid hsl(var(--primary) / .55); outline-offset: 2px; }