:root {
  --background: 228 63% 5%;
  --foreground: 228 100% 98%;
  --primary: 219 100% 62%;
  --primary-foreground: 0 0% 100%;
  --secondary: 272 91% 65%;
  --secondary-foreground: 0 0% 100%;
  --muted: 225 34% 16%;
  --muted-foreground: 226 35% 75%;
  --destructive: 0 78% 60%;
  --destructive-foreground: 0 0% 100%;
  --border: 224 44% 22%;
  --card: 224 52% 10%;
  --shadow-sm: 0 8px 30px hsl(219 100% 62% / 0.08);
  --shadow-md: 0 18px 60px hsl(228 80% 2% / 0.38);
  --shadow-lg: 0 32px 110px hsl(219 100% 62% / 0.14), 0 16px 70px hsl(272 91% 65% / 0.12);
  --transition-fast: 160ms cubic-bezier(.2,.8,.2,1);
  --transition-smooth: 420ms cubic-bezier(.16,1,.3,1);
  --radius-sm: 0.75rem;
  --radius-md: 1.25rem;
  --radius-lg: 2rem;
}

.dark {
  --background: 228 63% 5%;
  --foreground: 228 100% 98%;
  --primary: 219 100% 62%;
  --primary-foreground: 0 0% 100%;
  --secondary: 272 91% 65%;
  --secondary-foreground: 0 0% 100%;
  --muted: 225 34% 16%;
  --muted-foreground: 226 35% 75%;
  --destructive: 0 78% 60%;
  --border: 224 44% 22%;
  --card: 224 52% 10%;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 50% -20%, rgba(59,130,255,0.18), transparent 34%),
    radial-gradient(circle at 92% 12%, rgba(168,85,247,0.14), transparent 28%),
    linear-gradient(135deg, #050816 0%, #081020 52%, #0A0F1F 100%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

textarea, input, button { font: inherit; }
textarea, input { font-size: max(16px, 1rem); }
button, a { -webkit-tap-highlight-color: transparent; }

.grid-noise {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 0;
  opacity: 0.35;
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(circle at center, black, transparent 78%);
}

.orb {
  pointer-events: none;
  position: fixed;
  z-index: 0;
  width: 360px;
  height: 360px;
  border-radius: 999px;
  filter: blur(70px);
  opacity: 0.32;
  animation: floatOrb 10s ease-in-out infinite alternate;
}
.orb-blue { top: 8%; left: 34%; background: #2563FF; }
.orb-purple { right: -90px; bottom: 12%; background: #9333EA; animation-delay: -3s; }

@keyframes floatOrb {
  from { transform: translate3d(0,0,0) scale(1); }
  to { transform: translate3d(22px,-28px,0) scale(1.08); }
}

.sidebar-glass {
  background: linear-gradient(180deg, rgba(8,16,32,0.88), rgba(5,8,22,0.72));
  backdrop-filter: blur(24px);
  box-shadow: inset -1px 0 0 rgba(59,130,255,0.10), 20px 0 80px rgba(37,99,255,0.06);
}

.nexus-logo { width: 52px; height: 52px; filter: drop-shadow(0 0 22px rgba(59,130,255,0.42)); }
.nexus-logo svg { width: 100%; height: 100%; display: block; }

.glow-button {
  background: linear-gradient(135deg, #2563FF, #3B82FF 44%, #A855F7 100%);
  box-shadow: 0 16px 42px rgba(59,130,255,0.26), inset 0 1px 0 rgba(255,255,255,0.22);
}
.glow-button:hover { transform: translateY(-1px); box-shadow: 0 20px 58px rgba(168,85,247,0.28), 0 14px 44px rgba(59,130,255,0.22); }

.nav-link {
  display: flex;
  min-height: 48px;
  align-items: center;
  gap: 0.75rem;
  border-radius: 1rem;
  padding: 0 0.9rem;
  color: hsl(var(--muted-foreground));
  transition: var(--transition-fast);
}
.nav-link:hover, .nav-link-active {
  color: hsl(var(--foreground));
  background: hsl(var(--card) / 0.72);
  box-shadow: inset 0 0 0 1px hsl(var(--primary) / 0.18), 0 0 28px hsl(var(--primary) / 0.08);
}

.history-item:hover {
  border-color: hsl(var(--primary) / 0.20);
  background: hsl(var(--card) / 0.56);
  box-shadow: 0 0 30px hsl(var(--primary) / 0.08);
}
.history-action {
  display: inline-flex;
  min-height: 30px;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  border: 1px solid hsl(var(--border));
  border-radius: 0.85rem;
  background: hsl(var(--muted) / 0.26);
  padding: 0 0.55rem;
  color: hsl(var(--muted-foreground));
  font-size: 0.68rem;
  font-weight: 700;
  transition: var(--transition-fast);
}
.history-action:hover {
  border-color: hsl(var(--primary) / 0.28);
  background: hsl(var(--primary) / 0.11);
  color: hsl(var(--foreground));
}

.premium-card, .workspace-card, .agent-card, .architecture-card, .master-card, .models-hero, .account-card, .plan-card, .model-detail-card, .upgrade-hero, .upgrade-visual {
  border: 1px solid hsl(var(--border));
  background: linear-gradient(180deg, hsl(var(--card) / 0.72), hsl(var(--card) / 0.42));
  backdrop-filter: blur(22px);
  box-shadow: var(--shadow-md);
}
.premium-card, .account-card, .model-detail-card, .upgrade-hero { box-shadow: var(--shadow-lg); }
.plan-card { transition: var(--transition-smooth); }
.plan-card:hover {
  transform: translateY(-4px);
  border-color: hsl(var(--primary) / 0.34);
  box-shadow: var(--shadow-lg);
}
.plan-active {
  border-color: hsl(var(--primary) / 0.48);
  box-shadow: 0 0 0 1px hsl(var(--primary) / 0.18), 0 26px 90px hsl(219 100% 62% / 0.16), 0 10px 42px hsl(272 91% 65% / 0.10);
}
.plan-active::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(120deg, transparent, rgba(59,130,255,0.72), rgba(168,85,247,0.62), transparent);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: activeBorder 4.6s linear infinite;
  pointer-events: none;
}
@keyframes activeBorder { from { filter: hue-rotate(0deg); opacity: .45; } 50% { opacity: .95; } to { filter: hue-rotate(40deg); opacity: .45; } }
.plan-featured {
  border-color: hsl(var(--secondary) / 0.42);
  box-shadow: 0 32px 110px hsl(272 91% 65% / 0.16), 0 14px 54px hsl(219 100% 62% / 0.10);
}
.plan-ultra {
  border-color: hsl(var(--primary) / 0.42);
  background:
    radial-gradient(circle at 88% 0%, hsl(var(--secondary) / 0.20), transparent 44%),
    linear-gradient(180deg, hsl(var(--card) / 0.86), hsl(var(--primary) / 0.08));
  box-shadow: 0 32px 120px hsl(219 100% 62% / 0.16), 0 16px 70px hsl(272 91% 65% / 0.14);
}
.plan-capability {
  transition: var(--transition-smooth);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.035);
}
.plan-card:hover .plan-capability {
  border-color: hsl(var(--primary) / 0.28);
  background: hsl(var(--card) / 0.48);
}
.plan-node-visual {
  position: relative;
  height: 30px;
  overflow: hidden;
  border-radius: 0.9rem;
  background:
    radial-gradient(circle at 20% 50%, hsl(var(--primary) / 0.24), transparent 12%),
    radial-gradient(circle at 54% 50%, hsl(var(--secondary) / 0.20), transparent 13%),
    radial-gradient(circle at 82% 50%, hsl(var(--primary) / 0.20), transparent 12%),
    linear-gradient(90deg, transparent, hsl(var(--primary) / 0.12), hsl(var(--secondary) / 0.10), transparent);
}
.plan-node-visual::before, .plan-node-visual::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 16%;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, hsl(var(--primary) / 0.18), hsl(var(--primary) / 0.70), hsl(var(--secondary) / 0.62), hsl(var(--primary) / 0.18));
  box-shadow: 0 0 14px hsl(var(--primary) / 0.30);
  animation: planFlow 4.6s ease-in-out infinite;
}
.plan-node-visual::after { opacity: .35; transform: translateY(6px); animation-delay: -2s; }
.plan-node-visual span {
  position: absolute;
  top: 50%;
  height: 5px;
  width: 5px;
  border-radius: 999px;
  background: #3B82FF;
  box-shadow: 0 0 14px rgba(59,130,255,0.85), 0 0 22px rgba(168,85,247,0.34);
  transform: translateY(-50%);
  animation: nodePulse 2.7s ease-in-out infinite;
}
.plan-node-visual span:nth-child(1) { left: 20%; }
.plan-node-visual span:nth-child(2) { left: 53%; background: #A855F7; animation-delay: -.8s; }
.plan-node-visual span:nth-child(3) { left: 81%; animation-delay: -1.6s; }
.plan-node-plus, .plan-node-pro, .plan-node-max, .plan-node-ultra { filter: brightness(1.08); }
.plan-node-pro::after, .plan-node-max::after, .plan-node-ultra::after { transform: translateY(-7px) rotate(-5deg); opacity: .48; }
.plan-node-max, .plan-node-ultra { background-size: 100% 100%, 100% 100%, 100% 100%, 180% 100%; animation: capabilityGlow 5.8s ease-in-out infinite; }
.plan-node-ultra span { height: 6px; width: 6px; box-shadow: 0 0 18px rgba(59,130,255,0.95), 0 0 34px rgba(168,85,247,0.58); }
@keyframes planFlow { 0%,100% { opacity: .38; transform: scaleX(.72); } 50% { opacity: .95; transform: scaleX(1); } }
@keyframes nodePulse { 0%,100% { opacity: .45; transform: translateY(-50%) scale(.82); } 50% { opacity: 1; transform: translateY(-50%) scale(1.25); } }
@keyframes capabilityGlow { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.28); } }
.upgrade-hero {
  background:
    radial-gradient(circle at 50% -20%, rgba(59,130,255,0.22), transparent 42%),
    radial-gradient(circle at 80% 20%, rgba(168,85,247,0.16), transparent 34%),
    linear-gradient(180deg, hsl(var(--card) / 0.78), hsl(var(--card) / 0.40));
}
.upgrade-visual { box-shadow: 0 18px 60px hsl(219 100% 62% / 0.08); }
.neural-line {
  position: absolute;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(59,130,255,0.75), rgba(168,85,247,0.62), transparent);
  box-shadow: 0 0 18px rgba(59,130,255,0.45);
  animation: neuralFlow 5.2s ease-in-out infinite;
}
.neural-line-a { top: 26px; transform: rotate(-2deg); }
.neural-line-b { top: 42px; transform: rotate(2deg); animation-delay: -2s; }
.neural-particle {
  position: absolute;
  top: 30px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #3B82FF;
  box-shadow: 0 0 18px #3B82FF, 0 0 28px rgba(168,85,247,0.5);
  animation: particleDrift 4.8s ease-in-out infinite;
}
.neural-particle-a { left: 28%; }
.neural-particle-b { left: 50%; animation-delay: -1.6s; background: #A855F7; }
.neural-particle-c { left: 70%; animation-delay: -3s; }
@keyframes neuralFlow { 0%,100% { opacity: .35; transform: translateY(0) scaleX(.88); } 50% { opacity: 1; transform: translateY(-4px) scaleX(1); } }
@keyframes particleDrift { 0%,100% { transform: translate3d(-18px, 5px, 0); opacity: .35; } 50% { transform: translate3d(18px, -6px, 0); opacity: 1; } }
.flow-node {
  border: 1px solid hsl(var(--primary) / 0.28);
  background: linear-gradient(180deg, hsl(var(--primary) / 0.13), hsl(var(--card) / 0.36));
  box-shadow: 0 0 28px hsl(var(--primary) / 0.11), inset 0 1px 0 rgba(255,255,255,0.06);
}

.gradient-text {
  background: linear-gradient(90deg, #F5F7FF 0%, #3B82FF 38%, #A855F7 72%, #F5F7FF 100%);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 45px rgba(59,130,255,0.28);
  animation: shimmer 6s ease-in-out infinite;
}
@keyframes shimmer { 0%,100% { background-position: 0% center; } 50% { background-position: 100% center; } }

.input-shell {
  border: 1px solid hsl(var(--primary) / 0.25);
  background: linear-gradient(180deg, rgba(10,15,31,0.78), rgba(8,16,32,0.58));
  box-shadow: 0 0 0 1px rgba(168,85,247,0.08), 0 24px 90px rgba(37,99,255,0.14), inset 0 1px 0 rgba(255,255,255,0.06);
  backdrop-filter: blur(26px);
  transition: var(--transition-smooth);
}
.input-shell:focus-within {
  border-color: hsl(var(--primary) / 0.58);
  box-shadow: 0 0 0 1px rgba(168,85,247,0.16), 0 32px 120px rgba(59,130,255,0.22), 0 0 54px rgba(168,85,247,0.10);
  transform: translateY(-2px);
}

.icon-button, .send-button {
  display: inline-flex;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 1rem;
  transition: var(--transition-fast);
}
.icon-button {
  color: hsl(var(--muted-foreground));
  background: hsl(var(--muted) / 0.42);
  border: 1px solid hsl(var(--border));
}
.icon-button:hover { color: hsl(var(--foreground)); background: hsl(var(--muted) / 0.72); }
.send-button {
  color: white;
  background: linear-gradient(135deg, #2563FF, #A855F7);
  box-shadow: 0 12px 34px rgba(59,130,255,0.28);
}
.send-button:disabled { opacity: 0.76; cursor: not-allowed; }

.pulse-dot { animation: pulseDot 1.8s ease-in-out infinite; }
@keyframes pulseDot { 0%,100% { box-shadow: 0 0 0 0 rgba(59,130,255,0.0); } 50% { box-shadow: 0 0 0 8px rgba(59,130,255,0.12); } }

.skeleton {
  background: linear-gradient(90deg, hsl(var(--muted) / 0.38), hsl(var(--primary) / 0.16), hsl(var(--muted) / 0.38));
  background-size: 220% 100%;
  animation: skeleton 1.4s ease-in-out infinite;
}
@keyframes skeleton { from { background-position: 0% 0; } to { background-position: 220% 0; } }

.route-step {
  border: 1px solid hsl(var(--border));
  background: hsl(var(--muted) / 0.18);
}
.agent-card { transition: var(--transition-smooth); overflow: hidden; }
.agent-card:hover {
  transform: translateY(-2px);
  border-color: hsl(var(--primary) / 0.28);
  box-shadow: var(--shadow-lg);
}
.agent-card-active {
  border-color: hsl(var(--primary) / 0.34);
  background: linear-gradient(180deg, hsl(var(--card) / 0.8), hsl(var(--primary) / 0.1));
  box-shadow: 0 0 0 1px hsl(var(--primary) / 0.14), var(--shadow-lg);
}
.model-detail-backdrop {
  background: radial-gradient(circle at center, hsl(var(--primary) / 0.12), transparent 46%), rgba(5,8,22,0.70);
  backdrop-filter: blur(14px);
}
.model-detail-card {
  border-color: hsl(var(--primary) / 0.26);
  animation: detailIn 220ms cubic-bezier(.16,1,.3,1);
}
@keyframes detailIn { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }

.mobile-nav {
  background: rgba(5,8,22,0.82);
  backdrop-filter: blur(24px);
}
.mobile-nav-item {
  display: flex;
  min-height: 58px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  border-radius: 1rem;
  color: hsl(var(--muted-foreground));
  font-size: 0.78rem;
  transition: var(--transition-fast);
}
.mobile-nav-item:hover, .mobile-active {
  color: hsl(var(--primary));
  background: hsl(var(--primary) / 0.10);
}

.custom-scroll { scrollbar-width: thin; scrollbar-color: hsl(var(--primary) / 0.35) transparent; }
.custom-scroll::-webkit-scrollbar { width: 6px; }
.custom-scroll::-webkit-scrollbar-thumb { background: hsl(var(--primary) / 0.28); border-radius: 999px; }

.focus-ring:focus-visible, button:focus-visible, a:focus-visible, textarea:focus-visible, input:focus-visible {
  outline: 2px solid hsl(var(--primary));
  outline-offset: 3px;
}

@media (max-width: 1279px) {
  .models-page {
    grid-template-rows: auto 1fr;
  }
}

@media (max-width: 900px) {
  .models-agent-grid .agent-card p,
  .models-agent-grid .agent-card > div:last-child {
    display: none;
  }
}

@media (max-width: 640px) {
  .orb { width: 260px; height: 260px; filter: blur(58px); }
  .orb-blue { left: 18%; top: 4%; }
}