/* Vortex Studio — Blueprint Light & Dark Dual Theme */
:root {
  --vx-blue: #3478F6;
  --vx-electric: #4C9AFF;
  --vx-deep: #155EEF;
  --vx-light: #DCEBFF;
  --vx-pale: #F2F7FF;
  --vx-ink: #101828;
  --vx-ink-2: #344054;
  --vx-muted: #667085;
  --vx-line: #E4EAF2;
  --vx-dark: #0B1220;
}

/* ==========================================================================
   LIGHT MODE (When html does NOT have class="dark")
   ========================================================================== */
html:not(.dark) {
  color-scheme: light;
  --bg-main: #ffffff;
  --bg-surface: #ffffff;
  --bg-elevated: #F7FAFF;
  --bg-glass: rgba(255, 255, 255, 0.85);
  --text-main: var(--vx-ink);
  --text-muted: var(--vx-muted);
  --text-subtle: #98A2B3;
  --primary: var(--vx-blue);
  --primary-hover: var(--vx-deep);
  --accent: var(--vx-blue);
  --border-color: var(--vx-line);
  --border-hover: var(--vx-electric);
  --card-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 8px 24px -12px rgba(21, 94, 239, 0.14);
  --code-bg: #0B1220;
  --code-text: #DCEBFF;
}

html:not(.dark) body {
  background:
    radial-gradient(1200px 500px at 85% -10%, rgba(76, 154, 255, 0.14), transparent 60%),
    radial-gradient(900px 500px at -10% 10%, rgba(220, 235, 255, 0.8), transparent 60%),
    #ffffff;
  color: var(--vx-ink);
}

html:not(.dark) #vx-app-root .text-white,
html:not(.dark) #vx-app-root .text-slate-100,
html:not(.dark) #vx-app-root .text-slate-200 { color: var(--vx-ink); }
html:not(.dark) #vx-app-root .text-slate-300 { color: var(--vx-ink-2); }
html:not(.dark) #vx-app-root .text-slate-400,
html:not(.dark) #vx-app-root .text-slate-500 { color: var(--vx-muted); }
html:not(.dark) #vx-app-root .text-blue-400,
html:not(.dark) #vx-app-root .text-blue-300 { color: var(--vx-blue); }
html:not(.dark) #vx-app-root .text-emerald-400 { color: #079455; }
html:not(.dark) #vx-app-root .text-rose-400 { color: #D92D20; }
html:not(.dark) #vx-app-root .text-amber-400 { color: #B54708; }
html:not(.dark) #vx-app-root .hover\\:text-blue-400:hover { color: var(--vx-deep); }

html:not(.dark) #vx-app-root [class*="border-slate-"] { border-color: var(--vx-line); }
html:not(.dark) #vx-app-root .bg-slate-900,
html:not(.dark) #vx-app-root .bg-slate-800,
html:not(.dark) #vx-app-root .bg-slate-900\\/40,
html:not(.dark) #vx-app-root .bg-blue-950\\/20 { background-color: var(--vx-pale); }
html:not(.dark) #vx-app-root .bg-blue-500\\/5 { background-color: rgba(52, 120, 246, 0.04); }
html:not(.dark) #vx-app-root .bg-blue-500\\/10,
html:not(.dark) #vx-app-root .bg-blue-500\\/15 { background-color: rgba(52, 120, 246, 0.09); }
html:not(.dark) #vx-app-root .bg-blue-500\\/20 { background-color: rgba(52, 120, 246, 0.14); }
html:not(.dark) #vx-app-root .bg-emerald-500\\/15 { background-color: #ECFDF3; }
html:not(.dark) #vx-app-root .bg-rose-500\\/10,
html:not(.dark) #vx-app-root .bg-rose-500\\/15 { background-color: #FEF3F2; }
html:not(.dark) #vx-app-root .bg-amber-500\\/10,
html:not(.dark) #vx-app-root .bg-amber-500\\/15 { background-color: #FFFAEB; }
html:not(.dark) #vx-app-root .hover\\:bg-blue-500\\/15:hover { background-color: var(--vx-pale); }
html:not(.dark) #vx-app-root .hover\\:bg-rose-500\\/10:hover { background-color: #FEF3F2; }
html:not(.dark) #vx-app-root .border-blue-500\\/30,
html:not(.dark) #vx-app-root .border-blue-500\\/40 { border-color: rgba(52, 120, 246, 0.25); }

html:not(.dark) .vx-surface {
  background: #fff;
  border: 1px solid var(--vx-line);
  box-shadow: var(--card-shadow);
}
html:not(.dark) .vx-elevated { background: var(--bg-elevated); border: 1px solid var(--vx-line); }
html:not(.dark) .vx-mc-slot { background: var(--vx-pale); border: 1px solid var(--vx-line); box-shadow: inset 0 1px 2px rgba(16,24,40,.05); }
html:not(.dark) .vx-mc-tooltip { background: #fff; border: 1px solid var(--vx-line); color: var(--vx-ink-2); }
html:not(.dark) footer.vx-glass { border-top: 1px solid var(--vx-line); border-bottom: 0; background: var(--vx-pale); }

html:not(.dark) .vx-hero-bg {
  position: relative;
  background:
    radial-gradient(700px 360px at 80% 30%, rgba(76, 154, 255, 0.18), transparent 70%),
    linear-gradient(180deg, #F7FAFF 0%, #ffffff 100%);
  border-bottom: 1px solid var(--vx-line);
}

html:not(.dark) .vx-btn-secondary {
  background: #fff;
  color: var(--vx-ink);
  border: 1px solid var(--vx-line);
  box-shadow: 0 1px 2px rgba(16,24,40,.05);
}
html:not(.dark) .vx-btn-secondary:hover { border-color: rgba(52,120,246,.5); color: var(--vx-deep); background: var(--vx-pale); }

html:not(.dark) #vx-app-root input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color]):not([type=range]),
html:not(.dark) #vx-app-root select,
html:not(.dark) #vx-app-root textarea {
  background-color: #fff !important;
  color: var(--vx-ink) !important;
  border-color: var(--vx-line) !important;
}

html:not(.dark) #vx-modal-root .text-white,
html:not(.dark) #vx-toast-container .text-white { color: var(--vx-ink); }
html:not(.dark) #vx-modal-root .text-slate-400,
html:not(.dark) #vx-toast-container .text-slate-400 { color: var(--vx-muted); }
html:not(.dark) #vx-modal-root .text-slate-300 { color: var(--vx-ink-2); }
html:not(.dark) #vx-toast-container > * { background: #fff !important; box-shadow: 0 12px 30px -12px rgba(16,24,40,.25); }
html:not(.dark) ::-webkit-scrollbar-track { background: var(--vx-pale); }
html:not(.dark) ::-webkit-scrollbar-thumb { background: #C9D7EC; border-radius: 4px; }

/* ==========================================================================
   DARK MODE (When html has class="dark")
   ========================================================================== */
html.dark {
  color-scheme: dark;
  --bg-main: #070b14;
  --bg-surface: #0d1526;
  --bg-elevated: #131e35;
  --bg-glass: rgba(10, 16, 30, 0.88);
  --text-main: #e8f0fe;
  --text-muted: #94a3b8;
  --text-subtle: #64748b;
  --primary: #3478F6;
  --primary-hover: #1d4ed8;
  --accent: #60a5fa;
  --border-color: #1e2d4a;
  --border-hover: #4C9AFF;
  --card-shadow: 0 12px 28px -8px rgba(2, 6, 16, 0.78);
  --code-bg: #050912;
  --code-text: #dbeafe;
}

html.dark body {
  background:
    radial-gradient(1200px 500px at 85% -10%, rgba(52, 120, 246, 0.16), transparent 60%),
    radial-gradient(900px 500px at -10% 10%, rgba(21, 94, 239, 0.14), transparent 60%),
    #070b14;
  color: #e8f0fe;
}

html.dark .vx-hero-bg {
  position: relative;
  background:
    radial-gradient(700px 360px at 80% 30%, rgba(52, 120, 246, 0.16), transparent 70%),
    linear-gradient(180deg, #0a1224 0%, #070b14 100%);
  border-bottom: 1px solid #1e2d4a;
}

html.dark .vx-svg-node {
  fill: #131e35 !important;
  stroke: #243556 !important;
}

html.dark .vx-svg-node-text {
  fill: #e8f0fe !important;
}

html.dark .vx-nav-link {
  color: #94a3b8;
}
html.dark .vx-nav-link:hover,
html.dark .vx-nav-link.is-active {
  color: #ffffff;
}

html.dark #vx-app-root input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color]):not([type=range]),
html.dark #vx-app-root select,
html.dark #vx-app-root textarea {
  background-color: #09101f !important;
  color: #e8f0fe !important;
  border-color: #1e2d4a !important;
}

/* ==========================================================================
   SHARED BLUEPRINT TYPOGRAPHY, BUTTONS & ANIMATIONS (Both Modes)
   ========================================================================== */
body {
  font-family: 'Geist', 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

#vx-app-root { --tw-ring-color: var(--vx-blue); }
#vx-app-root ::selection { background: var(--vx-light); color: var(--vx-deep); }

#vx-app-root h1, #vx-app-root h2, #vx-app-root h3 { letter-spacing: -0.025em; }
#vx-app-root h1 { font-weight: 700; }
#vx-app-root .font-pixel {
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
}
#vx-app-root .font-mono, #vx-app-root code, #vx-app-root pre { font-family: 'JetBrains Mono', monospace; }

.vx-gradient-text {
  background: linear-gradient(100deg, #3478F6 0%, #4C9AFF 55%, #60a5fa 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Keep white text on primary blue buttons */
#vx-app-root .vx-btn-primary,
#vx-app-root .vx-btn-primary .text-white,
#vx-app-root .vx-btn-primary * { color: #fff; }

.vx-surface-hover:hover {
  transform: translateY(-3px);
  border-color: rgba(52, 120, 246, 0.55);
  box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 20px 40px -18px rgba(21, 94, 239, 0.35);
}

.vx-glass {
  background: var(--bg-glass);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--border-color);
}

.vx-hero-bg::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(52,120,246,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(52,120,246,.08) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse at 60% 40%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at 60% 40%, #000 30%, transparent 75%);
  pointer-events: none;
}
.vx-hero-bg > * { position: relative; }
.vx-hero-bg h1 { font-size: clamp(2.2rem, 5vw, 4.1rem); }

.vx-flow { stroke-dasharray: 4 6; animation: vxFlow 2.4s linear infinite; }
@keyframes vxFlow { to { stroke-dashoffset: -40; } }

.vx-btn-primary {
  background: linear-gradient(180deg, var(--vx-electric) -40%, var(--vx-blue) 45%, var(--vx-deep) 120%);
  color: #fff;
  border: 1px solid var(--vx-deep);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 6px 16px -6px rgba(21, 94, 239, .55);
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
.vx-btn-primary:hover { filter: brightness(1.06); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 10px 22px -8px rgba(21, 94, 239, .6); }
.vx-btn-primary:active { transform: translateY(0); }

/* Navigation links with animated underline */
.vx-nav-link {
  position: relative;
  padding: .5rem .85rem;
  font-size: .875rem;
  font-weight: 600;
  color: var(--vx-muted);
  border-radius: .5rem;
  transition: color .2s;
}
.vx-nav-link::after {
  content: "";
  position: absolute; left: .85rem; right: .85rem; bottom: .2rem;
  height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--vx-blue), var(--vx-electric));
  transform: scaleX(0); transform-origin: left;
  transition: transform .25s cubic-bezier(.2,.7,.2,1);
}
.vx-nav-link:hover { color: var(--text-main); }
.vx-nav-link:hover::after, .vx-nav-link.is-active::after { transform: scaleX(1); }
.vx-nav-link.is-active { color: var(--text-main); }

#vx-account-dropdown:not(.hidden),
#vx-tools-dropdown:not(.hidden),
#vx-mobile-menu:not(.hidden) { animation: vxDrop .18s ease-out; }
@keyframes vxDrop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

#vx-app-root input:focus, #vx-app-root select:focus, #vx-app-root textarea:focus {
  border-color: var(--vx-blue) !important;
  box-shadow: 0 0 0 4px rgba(52,120,246,.14);
  outline: none;
}

#vx-app-root pre { border-radius: 12px; }
#vx-app-root pre, #vx-app-root pre * { color: var(--code-text); }

.vx-pixelated {
  image-rendering: -moz-crisp-edges;
  image-rendering: -webkit-crisp-edges;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}