/*!*************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./app/globals.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************/
/* Theme tokens — light is the default, dark is opt-in via [data-theme="dark"] */
:root,
[data-theme="light"] {
  --color-bg: #f1f5f9;
  --color-bg-soft: #f8fafc;
  --color-card: #ffffff;
  --color-card-elevated: #fafbfc;
  --color-border: #e2e8f0;
  --color-border-strong: #cbd5e1;
  --color-text: #0f172a;
  --color-text-muted: #475569;
  --color-text-dim: #94a3b8;
  --color-accent: #4f46e5;
  --color-success: #059669;
  --color-danger: #dc2626;
  --color-warning: #d97706;
  --color-gold: #ca8a04;
  --color-magenta: #db2777;
  --color-cyan: #0891b2;
  --color-shadow: rgba(15, 23, 42, 0.06);
  --color-shadow-strong: rgba(15, 23, 42, 0.14);
  --color-shadow-hero: rgba(124, 58, 237, 0.25);
  --nav-bg: rgba(248, 250, 252, 0.78);
  --nav-border: rgba(15, 23, 42, 0.08);
  --status-active-bg: #d1fae5;
  --status-active-text: #047857;
  --status-paused-bg: #f1f5f9;
  --status-paused-text: #64748b;
  --input-bg: #ffffff;
  --error-bg: #fef2f2;
  --error-border: #fecaca;
  --grad-card: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  --grad-card-hover: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
  --grad-brand: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #ec4899 100%);
  --grad-hero: linear-gradient(135deg, #4f46e5 0%, #7c3aed 45%, #ec4899 100%);
  --grad-hero-glow: radial-gradient(ellipse 60% 50% at 80% 0%, rgba(255, 255, 255, 0.18), transparent 70%);
  --bg-gradient-1: radial-gradient(ellipse 70% 40% at 50% -10%, rgba(79, 70, 229, 0.08), transparent 60%);
  --bg-gradient-2: radial-gradient(ellipse 50% 40% at 100% 100%, rgba(236, 72, 153, 0.06), transparent 70%);

  color-scheme: light;
}

[data-theme="dark"] {
  --color-bg: #0d1226;
  --color-bg-soft: #14182e;
  --color-card: #1c2240;
  --color-card-elevated: #252b4d;
  --color-border: #2a2f54;
  --color-border-strong: #3d4470;
  --color-text: #f1f5f9;
  --color-text-muted: #a4adcc;
  --color-text-dim: #6b7299;
  --color-accent: #818cf8;
  --color-success: #10b981;
  --color-danger: #f87171;
  --color-warning: #fbbf24;
  --color-gold: #fbbf24;
  --color-magenta: #ec4899;
  --color-cyan: #22d3ee;
  --color-shadow: rgba(0, 0, 0, 0.4);
  --color-shadow-strong: rgba(0, 0, 0, 0.6);
  --color-shadow-hero: rgba(124, 58, 237, 0.5);
  --nav-bg: rgba(13, 18, 38, 0.78);
  --nav-border: rgba(255, 255, 255, 0.06);
  --status-active-bg: rgba(16, 185, 129, 0.16);
  --status-active-text: #34d399;
  --status-paused-bg: rgba(164, 173, 204, 0.12);
  --status-paused-text: #a4adcc;
  --input-bg: #0d1226;
  --error-bg: rgba(248, 113, 113, 0.1);
  --error-border: rgba(248, 113, 113, 0.3);
  --grad-card: linear-gradient(180deg, #1c2240 0%, #181d36 100%);
  --grad-card-hover: linear-gradient(180deg, #252b4d 0%, #1c2240 100%);
  --grad-brand: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #ec4899 100%);
  --grad-hero: linear-gradient(135deg, #4f46e5 0%, #7c3aed 45%, #ec4899 100%);
  --grad-hero-glow: radial-gradient(ellipse 60% 50% at 80% 0%, rgba(255, 255, 255, 0.18), transparent 70%);
  --bg-gradient-1: radial-gradient(ellipse 75% 40% at 50% -5%, rgba(124, 58, 237, 0.18), transparent 60%);
  --bg-gradient-2: radial-gradient(ellipse 60% 40% at 100% 100%, rgba(236, 72, 153, 0.08), transparent 70%);

  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  min-height: 100vh;
  background-image: var(--bg-gradient-1), var(--bg-gradient-2);
  background-attachment: fixed;
  transition: background-color 0.2s ease, color 0.2s ease;
}

a {
  color: inherit;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

input,
textarea,
select,
button {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--color-accent) !important;
  outline: none;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}

textarea {
  resize: vertical;
  font-family: inherit;
}

code,
.mono,
.tabular {
  font-family: "JetBrains Mono", "SF Mono", ui-monospace, SFMono-Regular, Menlo, Consolas,
    monospace;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  font-size: 0.875em;
}

.scroll-thin {
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-strong) transparent;
}

@keyframes pulse-soft {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.dot-active {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-success);
  vertical-align: middle;
  animation: pulse-soft 2.4s ease-in-out infinite;
  box-shadow: 0 0 6px var(--color-success);
}

.dot-paused {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-text-dim);
  vertical-align: middle;
}

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fade-in 0.25s ease-out;
}

@keyframes chatDot {
  0%, 60%, 100% {
    opacity: 0.25;
    transform: translateY(0);
  }
  30% {
    opacity: 1;
    transform: translateY(-2px);
  }
}

.hero-card {
  position: relative;
  border-radius: 20px;
  color: #ffffff;
  padding: 1.75rem 2rem;
  overflow: hidden;
  /* Three stacked layers: subtle grid lines (top), then radial highlight, then the brand gradient */
  background:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 32px 32px,
    var(--grad-hero-glow),
    var(--grad-hero);
  box-shadow: 0 16px 48px -12px var(--color-shadow-hero), 0 1px 0 rgba(255, 255, 255, 0.06) inset;
}

.hero-card > * {
  position: relative;
  z-index: 1;
}

/* Legacy class kept as a no-op so existing `className="hero-card hero-grid"` keeps working */
.hero-grid {
}