/* Nexora.AI Unified Visual System v4
   Single brand, surface, card, spacing, typography and motion grammar across
   landing, authentication, chat, templates, editor, preview and agent runtime. */
@font-face{font-family:Figtree;src:url('/assets/fonts/figtree-latin.woff2') format('woff2');font-style:normal;font-weight:300 900;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('/assets/fonts/jetbrains-mono-latin.woff2') format('woff2');font-style:normal;font-weight:300 800;font-display:swap}
:root,
html[data-theme],html[data-nx-accent]{
  --nx:#ff6410;--nx-rgb:255 100 16;
  --nx2:#ffbf23;--nx2-rgb:255 191 35;
  --nx3:#ff3f12;--nx3-rgb:255 63 18;
  --nx-primary:#ff6410;--nx-primary-rgb:255 100 16;
  --nx-primary-deep:#f04d00;--nx-primary-deep-rgb:240 77 0;
  --nx-primary-dark:#c83c00;--nx-primary-dark-rgb:200 60 0;
  --nx-primary-darker:#802600;--nx-primary-darker-rgb:128 38 0;
  --nx-primary-hover:#ff7a22;--nx-primary-light:#ff9a3c;--nx-primary-light-rgb:255 154 60;
  --nx-primary-pale:#ffc06a;--nx-primary-pale-rgb:255 192 106;
  --nx-secondary:#ffbf23;--nx-secondary-rgb:255 191 35;--nx-secondary-light:#ffd75f;
  --nx-secondary-deep:#f59e0b;--nx-secondary-dark:#b86a00;--nx-secondary-darker:#714100;
  --nx-tertiary:#ff3f12;--nx-tertiary-rgb:255 63 18;--nx-tertiary-deep:#9f260d;
  --nx-black:#000;--nx-bg:#000;--nx-s0:#030303;--nx-s1:#070707;--nx-s2:#0b0b0c;--nx-s3:#111112;--nx-s4:#171719;
  --nx-text:#f7f7f8;--nx-text2:#cbcbcF;--nx-muted:#919197;--nx-faint:#626268;
  --nx-line:rgba(255,255,255,.085);--nx-line2:rgba(255,255,255,.15);--nx-line-hot:rgba(255,125,34,.34);
  --nx-card:linear-gradient(180deg,rgba(18,16,14,.88),rgba(6,6,7,.96));
  --nx-card-hover:linear-gradient(180deg,rgba(24,19,15,.92),rgba(8,8,9,.98));
  --nx-glass:rgba(5,5,6,.86);--nx-shadow:0 24px 70px rgba(0,0,0,.48);--nx-shadow-small:0 12px 34px rgba(0,0,0,.34);
  --nx-radius:12px;--nx-radius-sm:9px;--nx-radius-xs:7px;--nx-header:60px;
  --nx-ease:cubic-bezier(.16,1,.3,1);--nx-ease-soft:cubic-bezier(.2,.7,.2,1);
  --paper:#000;--ink:var(--nx-text);--muted:var(--nx-muted);--line:var(--nx-line);
  --orange:var(--nx);--orange-strong:var(--nx-primary-deep);--orange-light:rgb(var(--nx-rgb)/.18);--accent-ink:var(--nx2);
  color-scheme:dark;
}
html,body{background:#000!important;color:var(--nx-text)!important;font-family:Figtree,Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{position:relative}
body::before{content:""!important;position:fixed!important;inset:0!important;z-index:-4!important;pointer-events:none!important;background-color:#000000!important;background-image:radial-gradient(ellipse 1000px 750px at 0% 0%,rgba(255,115,24,.33),rgba(255,85,0,.14) 42%,rgba(255,60,0,.04) 65%,transparent 78%),radial-gradient(850px circle at 100% 75%,rgba(255,115,24,.26),rgba(255,85,0,.10) 42%,rgba(255,60,0,.03) 65%,transparent 78%)!important;background-repeat:no-repeat!important;background-attachment:fixed!important}
::selection{background:rgb(var(--nx-rgb)/.36)!important;color:#fff!important}
:focus-visible{outline:2px solid var(--nx2)!important;outline-offset:3px!important}

/* Canonical logo asset. No alternate generated marks. */
.nx-logo-img{display:block!important;width:30px!important;height:28px!important;object-fit:contain;object-position:center;flex:0 0 auto;filter:drop-shadow(0 7px 18px rgba(255,93,0,.16));transition:transform .3s var(--nx-ease),filter .3s ease}
.brand:hover .nx-logo-img,.auth-brand:hover .nx-logo-img,.logo-wrapper:hover .nx-logo-img,.editor-brand:hover .nx-logo-img,.runtime-brand:hover .nx-logo-img{transform:translateY(-1px) scale(1.025);filter:drop-shadow(0 9px 24px rgba(255,93,0,.22))}
.brand-symbol,.nx-brand-symbol,.editor-brand-mark,.brand-mark{display:none!important}
.brand,.auth-brand,.logo-wrapper,.editor-brand,.runtime-brand{align-items:center!important;gap:10px!important}
.brand>span,.auth-brand>span:last-child,.logo-text,.editor-brand>span:last-child{font-weight:720!important;letter-spacing:-.045em!important}
.brand-ai,.logo-text span,.editor-brand strong,.auth-brand>span:last-child>span,.brand strong span{color:var(--nx)!important;-webkit-text-fill-color:var(--nx)!important;background:none!important;-webkit-background-clip:border-box!important}
.theme-switcher{display:none!important}

/* One header language everywhere. */
.site-header,.chat-page .top-header,.template-page .top-header,.editor-page #topbar,.agent-runtime-page .topbar,.template-preview-page .preview-header{
  background:rgba(3,3,4,.91)!important;border-color:var(--nx-line)!important;box-shadow:none!important;backdrop-filter:blur(22px) saturate(128%)!important;-webkit-backdrop-filter:blur(22px) saturate(128%)!important;
}
.site-header{height:60px!important;min-height:60px!important;max-height:60px!important;padding-inline:clamp(16px,3.5vw,44px)!important}
.chat-page .top-header,.template-page .top-header,.editor-page #topbar,.agent-runtime-page .topbar,.template-preview-page .preview-header{height:var(--nx-header)!important;min-height:var(--nx-header)!important}
.header-login,.nx-home-link,.auth-home,.template-preview-page .back,.topbar-btn.bordered,.ghost,.btn-sign-out,.btn-collapse,.btn-menu-toggle,.btn-notification,.btn-pro-plan{
  border:1px solid var(--nx-line)!important;background:rgba(255,255,255,.025)!important;color:var(--nx-text2)!important;border-radius:var(--nx-radius-xs)!important;box-shadow:none!important;transition:transform .2s var(--nx-ease),background .2s ease,border-color .2s ease,color .2s ease!important;
}
.header-login:hover,.nx-home-link:hover,.auth-home:hover,.template-preview-page .back:hover,.topbar-btn.bordered:hover,.ghost:hover,.btn-sign-out:hover,.btn-collapse:hover,.btn-menu-toggle:hover,.btn-notification:hover,.btn-pro-plan:hover{background:rgba(255,255,255,.05)!important;border-color:var(--nx-line2)!important;color:#fff!important;transform:translateY(-1px)}

/* Primary controls share the logo gradient. */
.button-orange,.button-dark,.auth-primary,.btn-send,.btn-primary,.primary,.topbar-btn.primary,.create-btn,.template-use-btn,.btn-claim-pro,[data-primary-action]{
  background:linear-gradient(135deg,#ff3f12 0%,#ff6410 48%,#ffb51b 100%)!important;border:1px solid rgba(255,151,44,.42)!important;color:#fff!important;border-radius:var(--nx-radius-sm)!important;box-shadow:0 12px 34px rgba(255,79,0,.15)!important;text-shadow:0 1px 1px rgba(70,20,0,.22)!important;transition:transform .22s var(--nx-ease),filter .22s ease,box-shadow .22s ease!important;
}
.button-orange:hover,.button-dark:hover,.auth-primary:hover,.btn-send:hover,.btn-primary:hover,.primary:hover,.topbar-btn.primary:hover,.create-btn:hover,.template-use-btn:hover,.btn-claim-pro:hover,[data-primary-action]:hover{transform:translateY(-2px)!important;filter:brightness(1.055)!important;box-shadow:0 16px 42px rgba(255,86,0,.21)!important}
.button-orange:active,.button-dark:active,.auth-primary:active,.btn-send:active,.btn-primary:active,.primary:active,.topbar-btn.primary:active{transform:translateY(0) scale(.986)!important}

/* One surface/card grammar across the whole product. */
.concept-card,.hero-browser,.brief-note,.token-note,.commit-note,.studio-shell,.workflow-scene,.faq-list details,.concept-dialog,
.auth-card,.art-card,.chat-input-container,.composer-plan-tracker,.message-assistant,.chat-message.assistant,.quick-card,.setting-card,.project-card,
.template-card,.stat-card,.template-filter-panel,.panel,.provider-card,.mini-section,.quota-box,.device-box,.settings-card,.codex-account-panel,.preview-panel,
.canvas-info-bar,.prop-section,.el-item,.page-item.active,.device-group,.template-preview-page .preview-header .preview-meta{
  border:1px solid var(--nx-line)!important;border-radius:var(--nx-radius)!important;background:var(--nx-card)!important;box-shadow:inset 0 1px rgba(255,255,255,.035),var(--nx-shadow-small)!important;
}
.concept-card:hover,.template-card:hover,.stat-card:hover,.quick-card:hover,.setting-card:hover,.project-card:hover,.provider-card:hover,.mini-section:hover,.settings-card:hover,.el-item:hover{
  background:var(--nx-card-hover)!important;border-color:var(--nx-line-hot)!important;box-shadow:inset 0 1px rgba(255,255,255,.05),0 18px 48px rgba(0,0,0,.42),0 0 0 1px rgba(255,116,22,.03)!important;
}
/* Layout-neutral cards keep a shared internal rhythm. */
.template-card,.stat-card,.quick-card,.setting-card,.project-card,.provider-card,.mini-section,.settings-card{transition:transform .24s var(--nx-ease),background .24s ease,border-color .24s ease,box-shadow .24s ease!important}
.template-card:hover,.quick-card:hover,.setting-card:hover,.project-card:hover,.provider-card:hover,.mini-section:hover,.settings-card:hover{transform:translateY(-2px)!important}

/* Shared control geometry. */
button,.button,.btn,input,textarea,select,.field,.search-input,.prop-input,.prop-select,.prop-mini-input{border-radius:var(--nx-radius-sm)!important}
input,textarea,select,.search-input,.prop-input,.prop-select,.prop-mini-input,.field{background:rgba(255,255,255,.033)!important;border:1px solid var(--nx-line)!important;color:var(--nx-text)!important;box-shadow:inset 0 1px rgba(255,255,255,.018)!important}
input:hover,textarea:hover,select:hover,.search-input:hover,.prop-input:hover,.prop-select:hover,.prop-mini-input:hover{border-color:rgba(255,255,255,.14)!important}
input:focus,textarea:focus,select:focus,.search-input:focus,.prop-input:focus,.prop-select:focus,.prop-mini-input:focus{border-color:rgba(255,119,22,.5)!important;box-shadow:0 0 0 3px rgba(255,99,16,.09)!important}
input::placeholder,textarea::placeholder{color:#66666d!important}
.eyebrow,.visual-kicker,.welcome-logo-text,.template-eyebrow,.panel-heading .eyebrow,.field-label,.section-title{font-family:'JetBrains Mono',monospace!important;text-transform:uppercase!important;letter-spacing:.105em!important}
.eyebrow,.visual-kicker,.welcome-logo-text,.template-eyebrow{color:var(--nx2)!important}

/* Landing page: refined typography scale, compacted element geometry, zoom lock, and plain black background with localized subtle orange accents. */
html:has(body.landing-page),
body.landing-page {
  background-color: #000000 !important;
  background: #000000 !important;
  touch-action: pan-x pan-y;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body.landing-page::after {
  display: none !important;
  opacity: 0 !important;
}
body.landing-page .workspace-section,
body.landing-page .workflow-section,
body.landing-page .possibilities-section,
body.landing-page .principles-section,
body.landing-page .faq-section,
body.landing-page .closing-section,
body.landing-page .site-footer {
  background: #000000 !important;
}

/* Localized subtle orange glows in specific areas only — top-left (flush to screen edge), other-side (mid-right), and bottom-right */
body.landing-page::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 820px !important;
  pointer-events: none !important;
  z-index: 0 !important;
  opacity: 1 !important;
  background: radial-gradient(ellipse 750px 580px at 0% 0%, rgba(255, 100, 16, 0.22), rgba(255, 75, 0, 0.07) 48%, transparent 72%) !important;
  filter: blur(24px) !important;
}

body.landing-page .site-header {
  position: relative !important;
  z-index: 10 !important;
}
body.landing-page .hero {
  position: relative !important;
  z-index: 2 !important;
}
body.landing-page .hero::after {
  display: none !important;
}

body.landing-page .possibilities-section {
  position: relative !important;
  overflow: clip !important;
}
body.landing-page .possibilities-section::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 1 !important;
  background: radial-gradient(550px circle at 100% 50%, rgba(255, 100, 16, 0.14), rgba(255, 75, 0, 0.04) 45%, transparent 70%) !important;
  filter: blur(32px) !important;
}
body.landing-page .possibilities-section > * {
  position: relative !important;
  z-index: 2 !important;
}

body.landing-page .closing-section {
  position: relative !important;
  overflow: clip !important;
}
body.landing-page .closing-section::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 1 !important;
  background: radial-gradient(700px circle at 100% 65%, rgba(255, 100, 16, 0.22), rgba(255, 75, 0, 0.065) 48%, transparent 72%) !important;
  filter: blur(30px) !important;
}
body.landing-page .closing-section > * {
  position: relative !important;
  z-index: 2 !important;
}
body.landing-page .site-header,
body.landing-page .site-header.is-scrolled {
  height: 60px !important;
  min-height: 60px !important;
  max-height: 60px !important;
  padding-inline: clamp(16px, 3.5vw, 44px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: rgba(3, 3, 4, 0.91) !important;
  border-bottom: 1px solid var(--nx-line) !important;
  backdrop-filter: blur(22px) saturate(128%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(128%) !important;
  box-shadow: none !important;
}
body.landing-page .brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  text-decoration: none !important;
  line-height: 1 !important;
}
body.landing-page .brand .nx-logo-img {
  width: 28px !important;
  height: 26px !important;
  display: block !important;
  object-fit: contain !important;
  object-position: center !important;
  flex: 0 0 auto !important;
  filter: drop-shadow(0 7px 18px rgba(255, 93, 0, 0.16)) !important;
  transition: transform 0.3s var(--nx-ease), filter 0.3s ease !important;
}
body.landing-page .brand:hover .nx-logo-img {
  transform: translateY(-1px) scale(1.025) !important;
  filter: drop-shadow(0 9px 24px rgba(255, 93, 0, 0.22)) !important;
}
body.landing-page .brand > span {
  font-family: Figtree, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 17px !important;
  font-weight: 720 !important;
  letter-spacing: -0.045em !important;
  line-height: 1 !important;
  color: #ffffff !important;
  white-space: nowrap !important;
  display: inline !important;
}
body.landing-page .brand-ai {
  font-family: inherit !important;
  font-size: 17px !important;
  font-weight: 720 !important;
  letter-spacing: -0.045em !important;
  line-height: 1 !important;
  color: var(--nx) !important;
  display: inline !important;
  vertical-align: baseline !important;
  border: 0 !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  align-self: auto !important;
}
body.landing-page .mobile-nav {
  top: 60px !important;
}
body.landing-page .desktop-nav {
  font-size: 11.5px !important;
  gap: 24px !important;
}
body.landing-page .header-actions {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}
body.landing-page .header-login {
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 11px !important;
  font-size: 11px !important;
  border-radius: 7px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
body.landing-page .header-actions > .button {
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 13px !important;
  font-size: 11px !important;
  gap: 8px !important;
  border-radius: 7px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
body.landing-page .menu-button {
  height: 32px !important;
  width: 32px !important;
  min-height: 32px !important;
}
body.landing-page .hero {
  min-height: min(600px, calc(100svh - 60px)) !important;
  padding-block: 40px 48px !important;
  gap: 24px !important;
}
body.landing-page .hero-copy {
  padding-top: 4px !important;
  max-width: 500px !important;
}
body.landing-page .hero-copy > .eyebrow {
  font-size: 9.5px !important;
  letter-spacing: 0.12em !important;
  margin-bottom: 18px !important;
}
body.landing-page .hero h1 {
  font-size: clamp(42px, 4.3vw, 58px) !important;
  letter-spacing: -2.8px !important;
  line-height: 1.03 !important;
  max-width: 480px !important;
}
body.landing-page .hero-line-accent {
  letter-spacing: -2.8px !important;
}
body.landing-page .hero-description {
  font-size: 13.5px !important;
  line-height: 1.62 !important;
  margin-top: 18px !important;
  max-width: 460px !important;
  color: #9d9da8 !important;
}
body.landing-page .hero-actions {
  margin-top: 22px !important;
  gap: 14px !important;
}
body.landing-page .hero-actions > .button.button-orange,
body.landing-page .button-orange,
body.landing-page .button-dark {
  min-height: 38px !important;
  height: 38px !important;
  padding: 0 16px !important;
  font-size: 12px !important;
  gap: 9px !important;
  border-radius: 8px !important;
}
body.landing-page .hero-actions > .text-link,
body.landing-page .text-link {
  font-size: 11.5px !important;
  gap: 6px !important;
}
body.landing-page .hero-footnote {
  font-size: 8.5px !important;
  margin-top: 18px !important;
}
body.landing-page .hero-art {
  height: 420px !important;
  max-width: 530px !important;
}
body.landing-page .hero-halo {
  inset: 30px -10px 20px -15px !important;
  opacity: 0.6 !important;
}
body.landing-page .hero-browser {
  top: 72px !important;
  left: 18px !important;
  right: 4px !important;
  border-radius: 12px !important;
  border-color: rgba(255, 255, 255, 0.095) !important;
}
body.landing-page .browser-chrome {
  height: 30px !important;
  font-size: 9px !important;
}
body.landing-page .hero-browser-body {
  height: 248px !important;
  padding: 15px 18px !important;
}
body.landing-page .mini-site-nav b {
  font-size: 13px !important;
}
body.landing-page .mini-site-content h2 {
  font-size: 26px !important;
  line-height: 1.05 !important;
}
body.landing-page .mini-site-content h2 em {
  font-size: 27px !important;
}
body.landing-page .mini-site-content p {
  font-size: 9px !important;
  line-height: 1.45 !important;
}
body.landing-page .sculpture {
  height: 130px !important;
  top: 60px !important;
}
body.landing-page .brief-note {
  top: 18px !important;
  left: -2px !important;
  width: 176px !important;
  padding: 12px 14px !important;
  border-radius: 11px !important;
  border-color: rgba(255, 255, 255, 0.095) !important;
}
body.landing-page .brief-note p {
  font-size: 14.5px !important;
  margin-top: 8px !important;
  line-height: 1.25 !important;
}
body.landing-page .brief-note .note-heading,
body.landing-page .token-note .note-heading {
  font-size: 8px !important;
}
body.landing-page .token-note {
  width: 176px !important;
  right: 0px !important;
  bottom: 20px !important;
  padding: 12px 14px !important;
  border-radius: 11px !important;
  border-color: rgba(255, 255, 255, 0.095) !important;
}
body.landing-page .token-swatches {
  margin: 10px 0 8px !important;
  gap: 5px !important;
}
body.landing-page .token-swatches i {
  width: 22px !important;
  height: 22px !important;
}
body.landing-page .token-note > span:last-child {
  font-size: 8.5px !important;
}
body.landing-page .commit-note {
  left: 20px !important;
  bottom: 34px !important;
  padding: 7px 10px !important;
  font-size: 9px !important;
  border-radius: 8px !important;
  border-color: rgba(255, 255, 255, 0.095) !important;
}
body.landing-page .commit-note small {
  font-size: 7.5px !important;
}
body.landing-page .principle-strip {
  padding: 14px 0 !important;
  margin-bottom: 50px !important;
  font-size: 11px !important;
}
body.landing-page .section-heading {
  margin: 22px 0 30px !important;
}
body.landing-page .section-heading h2,
body.landing-page .principles-copy h2,
body.landing-page .faq-intro h2 {
  font-size: clamp(28px, 3.1vw, 42px) !important;
  letter-spacing: -1.6px !important;
  line-height: 1.08 !important;
}
body.landing-page .section-heading > p {
  font-size: 12.5px !important;
  line-height: 1.55 !important;
}
body.landing-page .workspace-section {
  padding-bottom: 58px !important;
}
body.landing-page .workflow-section {
  padding-block: 34px 64px !important;
}
body.landing-page .principles-section {
  padding-block: 54px 58px !important;
}
body.landing-page .possibilities-section {
  padding-block: 58px 54px !important;
}
body.landing-page .faq-section {
  padding-block: 28px 60px !important;
  gap: 48px !important;
}
body.landing-page .faq-list details {
  padding-inline: 18px !important;
  margin-bottom: 8px !important;
}
body.landing-page .faq-list details + details {
  border-top: 1px solid var(--nx-line) !important;
}
body.landing-page .closing-section {
  padding-block: 48px 52px !important;
}
body.landing-page .closing-layout h2 {
  font-size: clamp(32px, 3.6vw, 48px) !important;
  letter-spacing: -1.8px !important;
}
body.landing-page .closing-mark {
  width: 154px !important;
  height: 154px !important;
}
body.landing-page .closing-layout .button {
  min-height: 38px !important;
  height: 38px !important;
  padding: 0 16px !important;
  font-size: 12px !important;
  margin-top: 20px !important;
}
body.landing-page .studio {
  border-radius: 12px !important;
}
body.landing-page .studio-toolbar {
  height: 52px !important;
  padding-inline: 14px !important;
}
body.landing-page .studio-body {
  grid-template-columns: 190px 1fr !important;
  min-height: 395px !important;
}
body.landing-page .studio-sidebar {
  padding: 13px 11px !important;
}
body.landing-page .studio-tabs button {
  padding: 8px 9px !important;
  font-size: 11px !important;
}
body.landing-page .inspector {
  padding: 18px 4px 0 !important;
}
body.landing-page .inspector h3 {
  font-size: 16px !important;
  margin: 8px 0 6px !important;
}
body.landing-page .inspector p {
  font-size: 10.5px !important;
  line-height: 1.45 !important;
}
body.landing-page .studio-panel {
  padding: 20px !important;
}
body.landing-page .sample-site {
  padding: 18px 22px !important;
}
body.landing-page .sample-copy h3 {
  font-size: 25px !important;
}
body.landing-page .sample-grid {
  align-items: center !important;
  margin: 24px 0 28px !important;
}
body.landing-page .sample-art {
  position: relative !important;
  height: 200px !important;
  isolation: isolate !important;
}
body.landing-page .sample-art-disc {
  position: absolute !important;
  width: 175px !important;
  height: 175px !important;
  aspect-ratio: 1 / 1 !important;
  top: 10px !important;
  left: 20% !important;
  right: auto !important;
  border-radius: 50% !important;
  opacity: 0.35 !important;
  background: radial-gradient(circle at 40% 40%, var(--scene-accent) 0%, color-mix(in srgb, var(--scene-accent) 70%, #000) 100%) !important;
  will-change: transform, opacity;
}
body.landing-page .sample-art-column {
  position: absolute !important;
  left: 40% !important;
  top: 2px !important;
  width: 27% !important;
  height: 88% !important;
  border-radius: 60px 60px 18px 18px !important;
  transform: rotate(26deg) !important;
  transform-origin: 50% 60% !important;
  will-change: transform, opacity;
}
body.landing-page .sample-art-fold {
  position: absolute !important;
  left: 7% !important;
  top: 26% !important;
  width: 86% !important;
  height: 24% !important;
  border-radius: 10px !important;
  transform: rotate(-25deg) !important;
  transform-origin: 40% 50% !important;
  will-change: transform, opacity;
}
body.landing-page .sample-art-dot {
  position: absolute !important;
  bottom: 6% !important;
  left: 14% !important;
  width: 22% !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
  will-change: transform, opacity;
}
body.landing-page .sample-art-label {
  position: absolute !important;
  bottom: 2px !important;
  right: 8px !important;
}

/* Ambient floating motion for interactive sample art when in Motion view */
@media (prefers-reduced-motion: no-preference) {
  html[data-motion=on] body.landing-page .sample-art.is-floating .sample-art-disc {
    animation: nx-sample-disc-float 7s ease-in-out infinite alternate !important;
  }
  html[data-motion=on] body.landing-page .sample-art.is-floating .sample-art-column {
    animation: nx-sample-col-float 6.4s ease-in-out infinite alternate !important;
  }
  html[data-motion=on] body.landing-page .sample-art.is-floating .sample-art-fold {
    animation: nx-sample-fold-float 5.8s ease-in-out infinite alternate !important;
  }
  html[data-motion=on] body.landing-page .sample-art.is-floating .sample-art-dot {
    animation: nx-sample-dot-float 4.8s ease-in-out infinite alternate !important;
  }
}

@keyframes nx-sample-disc-float {
  0% { transform: scale(1); opacity: 0.35; }
  100% { transform: scale(1.03) translate(2px, -3px); opacity: 0.42; }
}
@keyframes nx-sample-col-float {
  0% { transform: rotate(26deg) translate3d(0, 0, 0); }
  100% { transform: rotate(24.5deg) translate3d(2px, -6px, 0); }
}
@keyframes nx-sample-fold-float {
  0% { transform: rotate(-25deg) translate3d(0, 0, 0); }
  100% { transform: rotate(-23.5deg) translate3d(-3px, -4px, 0); }
}
@keyframes nx-sample-dot-float {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(2px, -5px, 0) scale(1.04); }
}

@container (max-width: 350px) {
  body.landing-page .sample-art {
    height: 160px !important;
    width: 190px !important;
    margin: auto !important;
  }
  body.landing-page .sample-art-disc {
    width: 140px !important;
    height: 140px !important;
    top: 8px !important;
    left: 14% !important;
  }
  body.landing-page .sample-art-column {
    height: 84% !important;
  }
}

body.landing-page .product-notes {
  gap: 14px !important;
  margin-top: 24px !important;
}
body.landing-page .product-notes > div {
  padding: 15px 15px 15px 38px !important;
  border-radius: 9px !important;
}
body.landing-page .product-notes > div > span {
  left: 14px !important;
  top: 18px !important;
  font-size: 10px !important;
}
body.landing-page .product-notes h3 {
  font-size: 13.5px !important;
}
body.landing-page .product-notes p {
  font-size: 11px !important;
}
body.landing-page .workflow-layout {
  gap: 40px !important;
}
body.landing-page .workflow-step {
  padding: 15px 0 !important;
  gap: 15px !important;
}
body.landing-page .workflow-step strong {
  font-size: 14.5px !important;
}
body.landing-page .workflow-step small {
  font-size: 10.5px !important;
  margin-top: 4px !important;
}
body.landing-page .workflow-scene {
  height: 260px !important;
}
body.landing-page .concept-card {
  overflow: hidden !important;
}
body.landing-page .concept-info {
  border-top: 1px solid var(--nx-line) !important;
}
body.landing-page .concept-art {
  height: 268px !important;
  padding: 16px 15px !important;
  border-radius: 12px !important;
}
body.landing-page .concept-word {
  top: 162px !important;
  left: 15px !important;
  font-size: 27px !important;
}
body.landing-page .concept-info {
  padding-top: 12px !important;
}
body.landing-page .concept-info strong {
  font-size: 12.5px !important;
}
body.landing-page .concept-info small {
  font-size: 10px !important;
}
body.landing-page .faq-intro h2 {
  font-size: clamp(28px, 3.1vw, 38px) !important;
}
body.landing-page .faq-list summary {
  padding: 14px 0 !important;
  font-size: 12.5px !important;
}
body.landing-page .faq-list details p {
  font-size: 11.5px !important;
  line-height: 1.55 !important;
}
body.landing-page .site-footer {
  padding-block: 28px 16px !important;
}
body.landing-page .footer-top > p,
body.landing-page .footer-bottom {
  font-size: 10.5px !important;
}

/* Authentication: unified 60px header, matching typography scale, and non-overlapping artboard. */
body[data-auth-page] .site-header.auth-site-header{height:60px!important;min-height:60px!important;max-height:60px!important;padding-inline:clamp(16px,3.5vw,44px)!important;background:rgba(3,3,4,.91)!important;border-bottom:1px solid var(--nx-line)!important;backdrop-filter:blur(22px) saturate(128%)!important;-webkit-backdrop-filter:blur(22px) saturate(128%)!important;display:flex!important;align-items:center!important;justify-content:space-between!important}
body[data-auth-page] .auth-brand .nx-logo-img,body[data-auth-page] .site-header .nx-logo-img{width:28px!important;height:26px!important}
body[data-auth-page] .auth-card{padding:26px 28px!important;background:rgba(7,7,10,.6)!important;border:1px solid var(--nx-line)!important;border-radius:14px!important;width:min(420px,100%)!important;box-shadow:0 24px 60px rgba(0,0,0,.55),inset 0 1px rgba(255,255,255,.04)!important;backdrop-filter:blur(20px)!important}
body[data-auth-page] .auth-card-head{margin-bottom:20px!important}
body[data-auth-page] .auth-card-head .eyebrow{font:700 8.5px/1 'JetBrains Mono',monospace!important;letter-spacing:.12em!important;text-transform:uppercase!important;color:#ff9a52!important;display:block!important;margin-bottom:8px!important}
body[data-auth-page] .auth-card-head h2{font-size:clamp(24px,2.2vw,30px)!important;line-height:1.1!important;letter-spacing:-.04em!important;color:#ffffff!important;font-weight:600!important}
body[data-auth-page] .auth-card-head p{font-size:12px!important;line-height:1.5!important;color:rgba(255,255,255,.55)!important;margin:8px 0 0!important}
body[data-auth-page] .visual-kicker{font:700 9px/1.2 'JetBrains Mono',monospace!important;letter-spacing:.12em!important;color:#ff9a52!important}
body[data-auth-page] .visual-copy h1{font-size:clamp(32px,3.4vw,48px)!important;line-height:1.06!important;letter-spacing:-.045em!important;color:#ffffff!important;font-weight:590!important}
body[data-auth-page] .visual-copy h1 em{font-style:normal!important;background:linear-gradient(110deg,#ff4f00,#ff8c2b 55%,#ffb51b)!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important}
body[data-auth-page] .visual-copy>p{font-size:13px!important;line-height:1.6!important;color:rgba(255,255,255,.58)!important;margin:16px 0 0!important}
body[data-auth-page] .artboard{position:relative!important;margin-top:26px!important;width:100%!important;max-width:580px!important;height:290px!important;border:1px solid rgba(255,255,255,.08)!important;border-radius:12px!important;box-shadow:0 28px 74px rgba(0,0,0,.6),inset 0 1px rgba(255,255,255,.05)!important;background:linear-gradient(180deg,rgba(14,14,18,.94),rgba(5,5,7,.98))!important;transform:none!important;animation:none!important;overflow:hidden!important}
body[data-auth-page] .art-card.main{position:absolute!important;left:16px!important;top:50px!important;bottom:16px!important;width:calc(56% - 16px)!important;height:auto!important;border:1px solid rgba(255,255,255,.08)!important;background:rgba(10,10,14,.88)!important;backdrop-filter:blur(12px)!important;border-radius:10px!important;padding:16px 18px!important;display:flex!important;flex-direction:column!important;justify-content:space-between!important;box-shadow:0 14px 36px rgba(0,0,0,.45)!important;z-index:2!important}
body[data-auth-page] .art-card.note{position:absolute!important;left:calc(56% + 14px)!important;right:16px!important;top:50px!important;width:auto!important;height:auto!important;border:1px solid rgba(255,255,255,.08)!important;background:rgba(10,10,14,.88)!important;backdrop-filter:blur(12px)!important;border-radius:9px!important;padding:12px 14px!important;box-shadow:0 10px 28px rgba(0,0,0,.35)!important;z-index:2!important}
body[data-auth-page] .art-card.tokens{position:absolute!important;left:calc(56% + 14px)!important;right:16px!important;bottom:16px!important;top:auto!important;width:auto!important;height:auto!important;border:1px solid rgba(255,255,255,.08)!important;background:rgba(10,10,14,.88)!important;backdrop-filter:blur(12px)!important;border-radius:9px!important;padding:10px 14px!important;box-shadow:0 10px 28px rgba(0,0,0,.35)!important;z-index:2!important}
body[data-auth-page] .art-path{position:absolute!important;left:calc(56% - 2px)!important;top:78px!important;width:18px!important;height:1px!important;border-top:1px dashed rgba(255,115,24,.4)!important;border-right:none!important;border-radius:0!important;z-index:1!important}
body[data-auth-page] .art-node{display:none!important}
body[data-auth-page] .auth-primary{height:44px!important;border-radius:8px!important;font-weight:700!important;font-size:12px!important;background:linear-gradient(135deg,#ff3f12 0%,#ff6410 48%,#ffb51b 100%)!important;border:1px solid rgba(255,151,44,.42)!important;box-shadow:0 12px 34px rgba(255,79,0,.2)!important}
body[data-auth-page] .auth-secondary{height:40px!important;border:1px solid rgba(255,255,255,.08)!important;background:rgba(255,255,255,.025)!important;border-radius:8px!important;font-size:11px!important}
body[data-auth-page] .auth-secondary:hover{border-color:rgba(255,255,255,.16)!important;background:rgba(255,255,255,.045)!important;color:#fff!important}
body[data-auth-page] .field-wrap input{height:44px!important;font-size:13px!important}

/* Workspace shell: identical rail/header geometry for chat + templates. */
.chat-page .sidebar,.template-page .sidebar{background:#030303!important;border-right:1px solid var(--nx-line)!important;box-shadow:none!important}
.chat-page .sidebar-header,.template-page .sidebar-header{height:var(--nx-header)!important;min-height:var(--nx-header)!important;border-bottom:1px solid var(--nx-line)!important;padding:0 13px!important}
.chat-page .logo-wrapper .nx-logo-img,.template-page .logo-wrapper .nx-logo-img{width:28px!important;height:26px!important}
.chat-page .logo-text,.template-page .logo-text{font-size:17px!important}
.chat-page .sidebar-body,.template-page .sidebar-body{padding:12px 10px!important}
.chat-page .sidebar-footer,.template-page .sidebar-footer{padding:10px!important;background:#030303!important;border-top:1px solid var(--nx-line)!important}
.chat-page .btn-new-chat,.template-page .btn-new-chat{height:38px!important;border:1px solid rgba(255,113,22,.25)!important;background:linear-gradient(135deg,rgba(255,76,0,.09),rgba(255,193,35,.025))!important;border-radius:var(--nx-radius-sm)!important}
.chat-page .btn-new-chat:hover,.template-page .btn-new-chat:hover{border-color:var(--nx-line-hot)!important;background:linear-gradient(135deg,rgba(255,76,0,.15),rgba(255,193,35,.04))!important}
.chat-page .search-input,.template-page .search-input{height:36px!important}
.chat-page .nav-link,.chat-page .history-link,.template-page .nav-link,.template-page .history-link{border-radius:var(--nx-radius-xs)!important;min-height:34px!important}
.chat-page .nav-link.active,.chat-page .history-link.active,.template-page .nav-link.active,.template-page .history-link.active{background:linear-gradient(90deg,rgba(255,81,0,.10),rgba(255,187,28,.035))!important;border:1px solid rgba(255,111,18,.18)!important;color:#fff!important}
.chat-page .profile-avatar,.template-page .profile-avatar{background:linear-gradient(135deg,var(--nx3),var(--nx),var(--nx2))!important;color:#fff!important}

/* Chat: compact product hierarchy, same surface language as every other page. */
.chat-page .welcome-screen{padding:clamp(26px,5vh,56px) clamp(20px,5vw,68px) 18px!important;justify-content:center!important;background:transparent!important;overflow:auto!important}
.chat-page .welcome-header{max-width:790px!important;margin:0 auto 18px!important;text-align:left!important;width:100%!important}
.chat-page .welcome-logo-text{font-size:8px!important;margin-bottom:11px!important}
.chat-page .welcome-logo-text>span{background:var(--nx2)!important;box-shadow:0 0 0 4px rgba(255,191,35,.075)!important}
.chat-page .welcome-title{font-size:clamp(34px,3.65vw,49px)!important;line-height:1.01!important;letter-spacing:-.052em!important;font-weight:620!important;max-width:720px!important;color:#fff!important}
.chat-page .welcome-title::after{display:none!important;content:none!important}
.chat-page .welcome-tagline{font-size:clamp(18px,2vw,25px)!important;line-height:1.08!important;margin:7px 0 0!important;font-weight:600!important;letter-spacing:-.035em!important;background:linear-gradient(100deg,var(--nx),var(--nx2));-webkit-background-clip:text;background-clip:text;color:transparent!important}
.chat-page .welcome-subtitle{font-size:12.5px!important;line-height:1.55!important;margin:12px 0 0!important;max-width:650px!important}
.chat-page .builder-steps{margin-top:14px!important;gap:7px!important}.chat-page .builder-steps li{height:25px!important;padding:0 8px!important;font-size:8px!important;border-radius:6px!important;background:rgba(255,255,255,.022)!important}
.chat-page .chat-input-container{width:min(820px,calc(100% - 32px))!important;padding:8px!important;border-radius:14px!important;background:linear-gradient(180deg,rgba(17,15,14,.94),rgba(5,5,6,.98))!important;box-shadow:0 22px 60px rgba(0,0,0,.48),inset 0 1px rgba(255,255,255,.045)!important}
.chat-page .chat-input-box{border-radius:10px!important;background:rgba(255,255,255,.026)!important;border:1px solid rgba(255,255,255,.07)!important;padding:8px!important}
.chat-page .chat-textarea{font-size:13px!important;min-height:30px!important}
.chat-page .btn-pill,.chat-page .btn-model-picker,.chat-page .btn-thinking-mode,.chat-page .btn-reasoning-picker{border:1px solid var(--nx-line)!important;background:rgba(255,255,255,.028)!important;border-radius:7px!important;box-shadow:none!important}
.chat-page .btn-pill:hover,.chat-page .btn-model-picker:hover,.chat-page .btn-thinking-mode:hover,.chat-page .btn-reasoning-picker:hover{border-color:var(--nx-line-hot)!important;background:rgba(255,255,255,.045)!important}
.chat-page .nx-ledger-trigger{border-color:var(--nx-line)!important;background:rgba(5,5,6,.94)!important;border-radius:8px!important}.chat-page .nx-status-dot{background:var(--nx)!important;box-shadow:0 0 0 5px rgba(255,100,16,.08)!important}

/* Templates: same hierarchy and card geometry as chat. */
.template-page .template-hero{padding:30px 30px 18px!important}.template-page .template-hero h2{font-size:clamp(31px,3.1vw,43px)!important;line-height:1.02!important;letter-spacing:-.05em!important}.template-page .template-hero p{font-size:12px!important;line-height:1.55!important}
.template-page .template-stats{gap:8px!important}.template-page .stat-card{min-height:68px!important;padding:12px 14px!important;border-radius:var(--nx-radius)!important}.template-page .stat-card strong{color:var(--nx)!important}
.template-page .template-card{border-radius:var(--nx-radius)!important;overflow:hidden!important}.template-page .template-card img,.template-page .template-card iframe{border-radius:calc(var(--nx-radius) - 2px)!important}.template-page .template-grid,.template-page .templates-grid{gap:14px!important}

/* Editor chrome: generated website canvas remains visually independent. */
.editor-page .editor-brand .nx-logo-img{width:26px!important;height:24px!important}.editor-page #topbar{padding:0 10px!important;gap:7px!important}.editor-page .editor-brand{font-size:11px!important}.editor-page .panel{border-radius:0!important;background:#050506!important;box-shadow:none!important}.editor-page .panel-tabs{background:#070708!important}.editor-page .panel-tab.active{color:var(--nx)!important;border-bottom-color:var(--nx)!important;background:#050506!important}.editor-page .el-item,.editor-page .page-item.active,.editor-page .prop-section,.editor-page .device-group{border-radius:var(--nx-radius-sm)!important;box-shadow:none!important}.editor-page #canvas-area{background-color:#020202!important;background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px)!important;background-size:22px 22px!important}

/* Runtime + preview: same headers, cards and logo, no green/gold island. */
.agent-runtime-page .runtime-brand{display:inline-flex!important}.agent-runtime-page .runtime-brand .nx-logo-img{width:29px!important;height:27px!important}.agent-runtime-page .brand{color:#fff!important}.agent-runtime-page .brand>span{color:var(--nx)!important}.agent-runtime-page .workspace-grid{gap:10px!important;padding:10px!important}.agent-runtime-page .panel{background:#050506!important;border-radius:var(--nx-radius)!important}.agent-runtime-page .provider-state,.agent-runtime-page .pill .dot{color:var(--nx2)!important}.agent-runtime-page .pill .dot{background:var(--nx2)!important}.agent-runtime-page .prompt,.agent-runtime-page .select{border-radius:var(--nx-radius-sm)!important}
.template-preview-page .brand .nx-logo-img{width:26px!important;height:24px!important}.template-preview-page .preview-header{padding:0 14px!important}.template-preview-page .brand strong{font-size:13px!important}.template-preview-page .state{background:#050506!important}.template-preview-page .state span{border-top-color:var(--nx)!important}

/* Unified entrance/hover motion. JS applies these classes to corresponding surfaces. */
.nx-motion-surface{will-change:transform,opacity;transform-origin:50% 50%}
html.nx-motion-ready .nx-motion-surface:not(.nx-inview){opacity:0;transform:translateY(9px) scale(.996)}
html.nx-motion-ready .nx-motion-surface.nx-inview{animation:nx-surface-in .5s var(--nx-ease) both;animation-delay:var(--nx-delay,0ms)}
@keyframes nx-surface-in{from{opacity:0;transform:translateY(9px) scale(.996)}to{opacity:1;transform:none}}
@keyframes nx-soft-pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,100,16,0)}50%{box-shadow:0 0 0 5px rgba(255,100,16,.055)}}

/* Responsive continuity. */
@media(max-width:900px){
  .site-header{height:64px!important;padding-inline:18px!important}.brand>span{font-size:20px!important}.nx-logo-img{width:27px!important;height:25px!important}
  body[data-auth-page] .auth-card{padding:22px!important}.chat-page .welcome-screen{padding:22px 16px 10px!important}.chat-page .welcome-title{font-size:clamp(30px,6.4vw,39px)!important}.chat-page .welcome-tagline{font-size:19px!important}.template-page .template-hero{padding:26px 18px 16px!important}
}
@media(max-width:600px){
  :root{--nx-radius:10px;--nx-radius-sm:8px}.site-header{height:58px!important}.brand>span{font-size:18px!important}.nx-logo-img{width:25px!important;height:23px!important}
  body[data-auth-page] .auth-card{padding:18px 17px!important;border-radius:10px!important}body[data-auth-page] .auth-card-head h2{font-size:25px!important}body[data-auth-page] .auth-card-head p{font-size:10.5px!important}
  .chat-page .welcome-screen{padding:13px 12px 6px!important}.chat-page .welcome-title{font-size:28px!important}.chat-page .welcome-tagline{font-size:17px!important}.chat-page .welcome-subtitle{font-size:10.8px!important}.chat-page .builder-steps{margin-top:9px!important;gap:4px!important}.chat-page .chat-input-container{width:calc(100% - 12px)!important;padding:6px!important;border-radius:11px!important}
  .template-page .template-hero h2{font-size:29px!important}.template-page .template-grid,.template-page .templates-grid{gap:10px!important}
  .agent-runtime-page .workspace-grid{padding:6px!important;gap:7px!important}
}
@media(max-height:740px) and (min-width:861px){body[data-auth-page] .auth-card{padding:18px 20px 16px!important}body[data-auth-page] .auth-card-head{margin-bottom:13px!important}body[data-auth-page] .auth-card-head h2{font-size:28px!important}body[data-auth-page] .auth-card-head p{font-size:10.5px!important}.chat-page .welcome-screen{padding-top:14px!important}.chat-page .welcome-title{font-size:35px!important}.chat-page .welcome-tagline{font-size:19px!important}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.nx-motion-surface{opacity:1!important;transform:none!important}}

/* Runtime variable bridge: remove the legacy green/blue island completely. */
.agent-runtime-page{--bg:#000!important;--panel:#070707!important;--panel2:#0b0b0c!important;--line:var(--nx-line)!important;--line2:var(--nx-line2)!important;--text:var(--nx-text)!important;--muted:var(--nx-muted)!important;--green:var(--nx)!important;--green2:var(--nx2)!important;--amber:var(--nx2)!important;--blue:var(--nx)!important;--radius:var(--nx-radius)!important;background:#000!important}
.agent-runtime-page .app-shell{background:transparent!important;grid-template-rows:var(--nx-header) minmax(0,1fr) 30px!important}
.agent-runtime-page .metrics div,.agent-runtime-page .fixture-row,.agent-runtime-page .tabs,.agent-runtime-page .trace-main,.agent-runtime-page .plan-item,.agent-runtime-page .verify-item,.agent-runtime-page .change,.agent-runtime-page .address,.agent-runtime-page .preview-toolbar,.agent-runtime-page .provider-panel{
  border-color:var(--nx-line)!important;background:rgba(255,255,255,.025)!important;border-radius:var(--nx-radius-sm)!important;color:var(--nx-text2)!important;box-shadow:none!important
}
.agent-runtime-page .eyebrow,.agent-runtime-page .guard-list li::before,.agent-runtime-page .plan-state,.agent-runtime-page .empty-orbit span{color:var(--nx2)!important}
.agent-runtime-page .select:focus,.agent-runtime-page .prompt:focus{border-color:rgba(255,111,18,.48)!important;box-shadow:0 0 0 3px rgba(255,100,16,.08)!important}
.agent-runtime-page .fixture-row input{accent-color:var(--nx)!important}.agent-runtime-page .viewport-btn.active{color:#fff!important;border-color:rgba(255,111,18,.32)!important;background:rgba(255,100,16,.08)!important}.agent-runtime-page .empty-orbit{border-color:rgba(255,111,18,.32)!important}.agent-runtime-page .empty-orbit::after{border-color:rgba(255,191,35,.16)!important}.agent-runtime-page .preview-toolbar{border-radius:0!important}.agent-runtime-page .preview-stage{background:radial-gradient(rgba(255,255,255,.055) 1px,transparent 1px),#020202!important;background-size:24px 24px!important}
.template-preview-page{--bg:#000!important;--surface:#070707!important;--border:var(--nx-line)!important;--text:var(--nx-text)!important;--muted:var(--nx-muted)!important;--accent:var(--nx)!important;background:#000!important}
@media(max-width:900px){
  .agent-runtime-page{overflow:auto!important}
  .agent-runtime-page .app-shell{height:auto!important;min-height:100dvh!important;grid-template-rows:var(--nx-header) auto 30px!important}
  .agent-runtime-page .workspace-grid{display:grid!important;grid-template-columns:minmax(0,1fr)!important;grid-template-rows:auto!important;width:100%!important;max-width:100%!important;min-width:0!important;padding:8px!important;gap:8px!important}
  .agent-runtime-page .panel,.agent-runtime-page .left-panel,.agent-runtime-page .right-panel,.agent-runtime-page .preview-panel{grid-column:1!important;width:100%!important;max-width:100%!important;min-width:0!important;margin:0!important}
  .agent-runtime-page .preview-panel{height:min(620px,72dvh)!important;min-height:440px!important}
  .agent-runtime-page .topbar{padding:0 10px!important;gap:8px!important}.agent-runtime-page .top-actions{min-width:0!important;max-width:58vw!important;overflow:hidden!important}.agent-runtime-page .pill{max-width:220px!important}
}

/* ========================================================================== 
   Nexora chat surface refinement v4.1 — 2026-10-03
   Removes the welcome-region horizontal scrollbar, restores a materially
   opaque composer input surface, adds a restrained translucent conversation
   plane, and hardens responsive containment without changing chat behavior.
   ========================================================================== */
.chat-page .chat-container,
.chat-page .chat-content-wrapper,
.chat-page .welcome-screen,
.chat-page .chat-messages,
.chat-page .chat-input-container,
.chat-page .chat-input-box,
.chat-page .textarea-wrapper {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* The welcome area may scroll vertically on short screens, but it must never
   create the horizontal scrollbar that previously appeared above the composer. */
.chat-page .welcome-screen {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-x: none !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
.chat-page .welcome-screen::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}
.chat-page .welcome-header,
.chat-page .builder-steps {
  max-width: 100% !important;
}

/* Composer: a real input surface, not transparent glass.  The outer shield is
   still allowed to blend into the page; the editable control itself is opaque. */
.chat-page .chat-input-container,
.chat-page .chat-input-container.compact {
  overflow: visible !important;
}
.chat-page .chat-input-box,
.chat-page .chat-input-container.compact .chat-input-box {
  background-color: #0c0b0b !important;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.024), rgba(255,255,255,0)),
    linear-gradient(135deg, rgba(255,87,16,.035), rgba(255,191,35,.012) 46%, rgba(255,255,255,0) 74%) !important;
  border-color: rgba(255,255,255,.12) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 16px 40px rgba(0,0,0,.42) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.chat-page .chat-input-box:focus-within,
.chat-page .chat-input-container.compact .chat-input-box:focus-within {
  background-color: #0d0c0c !important;
  border-color: rgba(255,112,24,.48) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    0 18px 44px rgba(0,0,0,.46),
    0 0 0 3px rgba(255,100,16,.075) !important;
}
.chat-page .chat-textarea {
  background: transparent !important;
  color: #f3f3f4 !important;
  caret-color: var(--nx2) !important;
  width: 100% !important;
  min-width: 0 !important;
  resize: none !important;
}
.chat-page .chat-textarea::placeholder { color: #737379 !important; opacity: 1 !important; }

/* Conversation plane: preserve the atmospheric page backdrop but give prompts
   and model output a readable, subtly opaque product surface. */
.chat-page .chat-messages {
  position: absolute !important;
  top: var(--nx-header) !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  overflow-x: hidden !important;
  background:
    linear-gradient(180deg, rgba(8,8,9,.52), rgba(5,5,6,.64)),
    radial-gradient(560px circle at 72% 8%, rgba(255,100,16,.025), transparent 68%) !important;
  border-top: none !important;
  box-shadow: none !important;
  backdrop-filter: blur(5px) saturate(108%) !important;
  -webkit-backdrop-filter: blur(5px) saturate(108%) !important;
  scrollbar-color: rgba(255,255,255,.12) transparent !important;
  scrollbar-width: thin !important;
}
.chat-page .ambient-canvas,
.chat-page .chat-content-wrapper > .ambient-canvas {
  top: var(--nx-header) !important;
}
.chat-page .top-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.055) !important;
  box-shadow: none !important;
}
.chat-page .chat-messages::-webkit-scrollbar { width: 5px !important; height: 0 !important; }
.chat-page .chat-messages::-webkit-scrollbar-track { background: transparent !important; }
.chat-page .chat-messages::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.12) !important;
  border-radius: 999px !important;
}
.chat-page .chat-messages .message.assistant .message-bubble,
.chat-page .message.assistant .message-bubble {
  background: rgba(18,17,16,.9) !important;
  border: 1px solid rgba(255,255,255,.085) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.025), 0 8px 24px rgba(0,0,0,.18) !important;
}
.chat-page .chat-messages .message.user .message-bubble,
.chat-page .message.user .message-bubble {
  background: linear-gradient(180deg, rgba(39,18,8,.94), rgba(22,12,8,.96)) !important;
  border: 1px solid rgba(255,111,24,.22) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.025), 0 8px 24px rgba(0,0,0,.18) !important;
}

/* Responsive composer containment.  Controls may wrap/scroll internally, but
   the application viewport itself must never overflow horizontally. */
@media (max-width: 900px) {
  .chat-page .chat-content-wrapper { overflow: hidden !important; }
  .chat-page .welcome-screen { padding-inline: clamp(14px, 3.2vw, 22px) !important; }
  .chat-page .chat-input-container,
  .chat-page .chat-input-container.compact,
  .chat-page .welcome-screen:not([style*="display: none"]) ~ .chat-input-container:not(.compact) {
    width: calc(100% - 20px) !important;
    max-width: calc(100% - 20px) !important;
    margin-left: 10px !important;
    margin-right: 10px !important;
  }
  .chat-page .chat-input-box,
  .chat-page .chat-input-container.compact .chat-input-box {
    width: 100% !important;
    max-width: 100% !important;
  }
  .chat-page .controls-row { min-width: 0 !important; max-width: 100% !important; }
  .chat-page .quick-actions-row {
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-inline: contain !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }
  .chat-page .quick-actions-row::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; }
}

@media (max-width: 600px) {
  .chat-page .chat-input-container,
  .chat-page .chat-input-container.compact,
  .chat-page .welcome-screen:not([style*="display: none"]) ~ .chat-input-container:not(.compact) {
    width: calc(100% - 12px) !important;
    max-width: calc(100% - 12px) !important;
    margin-left: 6px !important;
    margin-right: 6px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: max(7px, env(safe-area-inset-bottom)) !important;
  }
  .chat-page .chat-input-box,
  .chat-page .chat-input-container.compact .chat-input-box {
    padding: 8px !important;
    border-radius: 11px !important;
  }
  .chat-page .textarea-wrapper { min-height: 32px !important; }
  .chat-page .chat-textarea {
    min-height: 30px !important;
    max-height: min(150px, 24dvh) !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
    padding: 5px 3px !important;
  }
  .chat-page .controls-row { gap: 5px !important; }
  .chat-page .btn-model-picker { max-width: min(150px, 42vw) !important; }
  .chat-page .chat-messages {
    padding: 14px 10px 12px !important;
    gap: 12px !important;
    backdrop-filter: blur(3px) !important;
    -webkit-backdrop-filter: blur(3px) !important;
  }
  .chat-page .chat-messages .message { max-width: 100% !important; }
  .chat-page .chat-messages .message.user { max-width: 94% !important; }
  .chat-page .chat-messages .message.assistant { max-width: 97% !important; }
  .chat-page .chat-messages .message .message-content { min-width: 0 !important; max-width: 100% !important; }
  .chat-page .chat-messages .message .message-bubble {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }
}

/* Conversation-state placement: v2 styling previously forced the compact
   composer back into normal flow. Keep it docked at the bottom of the workspace. */
.chat-page .chat-input-container.compact {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 30 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 34px 16px 12px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.74) 24%, rgba(0,0,0,.94) 58%, #000 100%) !important;
  box-shadow: none !important;
  pointer-events: none !important;
}
.chat-page .chat-input-container.compact > * { pointer-events: auto !important; }
.chat-page .chat-input-container.compact .chat-input-box,
.chat-page .chat-input-container.compact .composer-plan-tracker,
.chat-page .chat-input-container.compact .input-disclaimer {
  width: min(820px, calc(100% - 20px)) !important;
  max-width: 820px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Keep the decorative welcome glow inside the scroll container's layout box.
   This removes the underlying overflow source instead of only hiding its bar. */
.chat-page .welcome-screen::before {
  right: 0 !important;
  max-width: min(46vw,620px) !important;
}

@media (max-width: 900px) {
  .chat-page .chat-input-container.compact {
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 28px 10px max(9px, env(safe-area-inset-bottom)) !important;
  }
  .chat-page .chat-input-container.compact .chat-input-box,
  .chat-page .chat-input-container.compact .composer-plan-tracker,
  .chat-page .chat-input-container.compact .input-disclaimer {
    width: min(100%, 760px) !important;
    max-width: min(100%, 760px) !important;
  }
}

@media (max-width: 600px) {
  .chat-page .chat-input-container.compact {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 22px 6px max(6px, env(safe-area-inset-bottom)) !important;
  }
  .chat-page .chat-input-container.compact .chat-input-box,
  .chat-page .chat-input-container.compact .composer-plan-tracker,
  .chat-page .chat-input-container.compact .input-disclaimer {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* --------------------------------------------------------------------------
   Chat Workspace Atmosphere Coherence:
   Pure black background with localized subtle orange glows matching the landing page.
   Completely removes legacy multi-color ambient orbs, grid lines, and dots/stars.
   -------------------------------------------------------------------------- */
.chat-page .ambient-canvas,
.chat-page .ambient-orb,
.chat-page .ambient-grid,
.chat-page .ambient-spark-field,
.chat-page .welcome-screen::before,
.chat-page .welcome-screen::after,
.chat-page .chat-container::before,
body.chat-page::before {
  display: none !important;
  background: none !important;
  opacity: 0 !important;
  content: none !important;
}

body.chat-page,
.chat-page .chat-container {
  background-color: #000000 !important;
  background-image:
    radial-gradient(ellipse 1000px 750px at 0% 0%, rgba(255, 115, 24, 0.33), rgba(255, 85, 0, 0.14) 42%, rgba(255, 60, 0, 0.04) 65%, transparent 78%),
    radial-gradient(850px circle at 100% 75%, rgba(255, 115, 24, 0.26), rgba(255, 85, 0, 0.10) 42%, rgba(255, 60, 0, 0.03) 65%, transparent 78%) !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}

.chat-page .welcome-screen {
  background: transparent !important;
}

.chat-page .chat-messages {
  background: transparent !important;
}

.chat-page .templates-screen,
.chat-page .projects-screen,
.chat-page .library-screen,
.chat-page .settings-screen,
.chat-page .archive-screen {
  background: transparent !important;
}

/* --------------------------------------------------------------------------
   Prompt Textarea 1-to-4 Line Auto-Grow & Capped Scrolling:
   Grows line by line up to 4 lines, then scrolls smoothly.
   -------------------------------------------------------------------------- */
.chat-page .chat-textarea {
  height: auto;
  min-height: 28px !important;
  max-height: 92px !important;
  line-height: 1.45 !important;
  font-size: 13.5px !important;
  padding: 4px 2px !important;
  resize: none !important;
  box-sizing: border-box !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(255, 100, 16, 0.4) transparent !important;
}

.chat-page .chat-textarea::-webkit-scrollbar {
  width: 4px !important;
}

.chat-page .chat-textarea::-webkit-scrollbar-track {
  background: transparent !important;
}

.chat-page .chat-textarea::-webkit-scrollbar-thumb {
  background: rgba(255, 100, 16, 0.4) !important;
  border-radius: 4px !important;
}

.chat-page .chat-textarea::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 100, 16, 0.75) !important;
}

/* --------------------------------------------------------------------------
   Think Mode Button & State Coherence:
   Clear, visible distinction between turned ON and turned OFF.
   -------------------------------------------------------------------------- */
.chat-page .btn-thinking-mode {
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  padding: 0 10px !important;
  gap: 6px !important;
  border-radius: 8px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease !important;
  user-select: none !important;
}

/* TURNED ON: Subtly highlighted with soft warm accent, no harsh glow */
.chat-page .btn-thinking-mode.is-active,
.chat-page .btn-thinking-mode[aria-pressed="true"] {
  background: rgba(255, 100, 16, 0.08) !important;
  border: 1px solid rgba(255, 100, 16, 0.28) !important;
  color: #ff9a52 !important;
  box-shadow: none !important;
}

.chat-page .btn-thinking-mode.is-active svg,
.chat-page .btn-thinking-mode[aria-pressed="true"] svg {
  color: #ff9a52 !important;
  stroke: #ff9a52 !important;
  filter: none !important;
}

.chat-page .btn-thinking-mode.is-active:hover,
.chat-page .btn-thinking-mode[aria-pressed="true"]:hover {
  background: rgba(255, 100, 16, 0.13) !important;
  border-color: rgba(255, 100, 16, 0.44) !important;
  color: #ffaa6e !important;
}

/* TURNED OFF: Un-highlighted, clean muted dark state */
.chat-page .btn-thinking-mode:not(.is-active):not([aria-pressed="true"]) {
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.42) !important;
  box-shadow: none !important;
}

.chat-page .btn-thinking-mode:not(.is-active):not([aria-pressed="true"]) svg {
  color: rgba(255, 255, 255, 0.36) !important;
  stroke: rgba(255, 255, 255, 0.36) !important;
  filter: none !important;
}

.chat-page .btn-thinking-mode:not(.is-active):not([aria-pressed="true"]):hover {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  color: rgba(255, 255, 255, 0.65) !important;
}

.chat-page .think-mode-status {
  display: none !important;
}

/* When Think is OFF, dim reasoning picker */
.chat-page .btn-reasoning-picker.disabled,
.chat-page .btn-reasoning-picker:disabled {
  opacity: 0.35 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  border-color: rgba(255, 255, 255, 0.05) !important;
  background: rgba(255, 255, 255, 0.015) !important;
}

/* --------------------------------------------------------------------------
   Toast Notifications:
   Positioned just below the header, horizontally centered, compact pill design.
   -------------------------------------------------------------------------- */
.chat-page .nexora-toast-stack {
  position: absolute !important;
  top: calc(var(--nx-header, 60px) + 8px) !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translateX(-50%) !important;
  z-index: 99999 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
  width: auto !important;
  max-width: min(440px, calc(100% - 24px)) !important;
  pointer-events: none !important;
}

body.chat-page > .nexora-toast-stack {
  position: fixed !important;
  top: calc(var(--nx-header, 60px) + 8px) !important;
  left: calc(var(--sidebar-width, 230px) + (100vw - var(--sidebar-width, 230px)) / 2) !important;
  right: auto !important;
  bottom: auto !important;
  transform: translateX(-50%) !important;
  z-index: 99999 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
  width: auto !important;
  max-width: min(440px, calc(100% - 24px)) !important;
  pointer-events: none !important;
}

body.chat-page .sidebar.collapsed ~ .chat-container ~ .nexora-toast-stack,
body.chat-page:has(.sidebar.collapsed) > .nexora-toast-stack {
  left: calc(52px + (100vw - 52px) / 2) !important;
}

@media (max-width: 900px) {
  body.chat-page > .nexora-toast-stack {
    left: 50% !important;
  }
}

.chat-page .nexora-toast {
  pointer-events: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 5px 12px !important;
  min-height: 28px !important;
  border-radius: 999px !important;
  background: rgba(10, 10, 14, 0.94) !important;
  border: 1px solid rgba(255, 100, 16, 0.28) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6), 0 0 12px rgba(255, 100, 16, 0.08) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  color: #f3f4f6 !important;
  font-size: 11px !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
  animation: nexoraToastSlideDown 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

.chat-page .nexora-toast.leaving {
  opacity: 0 !important;
  transform: translateY(-6px) scale(0.96) !important;
  transition: opacity 0.16s ease, transform 0.16s ease !important;
}

.chat-page .nexora-toast-dot {
  width: 6px !important;
  height: 6px !important;
  margin: 0 !important;
  border-radius: 999px !important;
  flex-shrink: 0 !important;
  background: #ff7a1a !important;
  box-shadow: 0 0 8px rgba(255, 122, 26, 0.6) !important;
}

.chat-page .nexora-toast-success .nexora-toast-dot {
  background: #ff7a1a !important;
  box-shadow: 0 0 8px rgba(255, 122, 26, 0.6) !important;
}

.chat-page .nexora-toast-error .nexora-toast-dot {
  background: #f87171 !important;
  box-shadow: 0 0 8px rgba(248, 113, 113, 0.6) !important;
}

.chat-page .nexora-toast-message {
  font-size: 11px !important;
  font-weight: 550 !important;
  letter-spacing: -0.01em !important;
  color: #f3f4f6 !important;
}

.chat-page .nexora-toast-close {
  display: none !important;
}

@keyframes nexoraToastSlideDown {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}