.spinner-dot {
  display: inline-block !important;
  width: 12px !important;
  height: 12px !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
  border-radius: 50% !important;
  border: 2px solid var(--line) !important;
  border-top-color: var(--pink) !important;
  animation: spin 0.8s linear infinite !important;
  vertical-align: middle !important;
}
.spinner-dot[hidden] { display: none !important; }
@keyframes spin {
  to { transform: rotate(360deg); }
}
body { font-family: Plex, Arial, sans-serif; font-weight: 400; }
.site-shell { padding: 0; max-width: none; }
.header { position: fixed; z-index: 100; left: 50%; top: 18px; transform: translateX(-50%); width: calc(100% - 64px); max-width: 1120px; min-height: 66px; height: auto; padding: 12px 18px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 8px 28px #1018200c; gap: 20px; flex-wrap: nowrap; }
.brand { gap: 10px; flex-shrink: 0; }
.brand-icon { background: transparent; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; }
.brand-icon img { display: block; width: 34px; height: 34px; }
.brand strong { font-size: 14px; font-weight: 500; text-transform: uppercase; letter-spacing: 1.5px; }
.brand small { display: none; }
.header-nav { display: flex; justify-content: center; align-items: center; gap: 25px; margin-left: auto; }
.header-nav a { font-size: 11px; color: var(--muted); text-decoration: none; white-space: nowrap; }
.header-nav a:hover, .header-nav a.active, .header-nav a[aria-current='page'] { color: var(--ink); font-weight: 500; }
.header-actions { margin-left: auto; gap: 8px; }
.header .button { padding: 9px 13px; min-height: 34px; font-size: 11px; border-radius: 9px; }
.header .button.primary > span { font-size: 14px; }
.icon-button { width: 34px; height: 34px; border-radius: 10px; background: transparent; }
.icon-button svg { width: 16px; height: 16px; }
.user-profile-pill { min-height: 34px; border-radius: 9px; padding: 8px 12px; max-width: 195px; font-size: 11px; }
.account-dropdown-menu { top: calc(100% + 20px); }
.workspace { display: block; max-width: 1344px; padding: 140px 48px 70px; margin: auto; }
.sidebar { display: none; }
html[data-account='guest'] .workspace { padding: 0; max-width: none; }
html[data-account='guest'] .guide-view { max-width: 1040px; padding: 148px 40px 80px; margin: auto; }
.landing-hero { position: relative; overflow: hidden; min-height: 900px; padding: 345px max(48px, calc((100vw - 1250px)/2)) 65px; background: var(--bg); }
.hero-art { position: absolute; width: min(88vw,1200px); height: auto; top: -90px; right: -45px; pointer-events: none; }
.landing-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg,var(--bg) 7%,transparent 47%),linear-gradient(90deg,var(--bg),transparent 55%); pointer-events: none; }
.landing-hero-content { position: relative; z-index: 1; }
.section-kicker { font-size: 9px; color: var(--muted); font-weight: 400; letter-spacing: 2px; }
.landing-hero h1 { font-size: clamp(64px,7vw,100px); line-height: 1.02; letter-spacing: -3.5px; font-weight: 300; margin: 21px 0 23px; }
.landing-hero-content > p { font-size: 14px; line-height: 1.8; color: var(--muted); margin: 0 0 26px; max-width: 480px; }
.hero-buttons { display: flex; gap: 10px; }
.hero-buttons .button { min-height: 45px; font-size: 12px; border-radius: 9px; min-width: 116px; padding: 12px 20px; }
.hero-buttons .primary { gap: 25px; }
.hero-runtimes { display: flex; gap: 45px; margin-top: 42px; }
.hero-runtimes > div { display: flex; flex-direction: column; gap: 5px; }
.hero-runtimes strong { font-size: 29px; font-weight: 300; letter-spacing: -.8px; }
.hero-runtimes span { font-size: 9px; letter-spacing: 1.3px; color: var(--muted); }
html[data-theme='dark'] .hero-art { opacity: .45; }
.welcome-section { max-width: 1250px; margin: 0 auto; padding: 70px 0 100px; display: grid; grid-template-columns: .85fr 1.15fr; gap: 100px; border-top: 1px solid var(--line); }
.welcome-heading h2 { font-size: 49px; line-height: 1.12; font-weight: 300; letter-spacing: -1.7px; margin: 20px 0 28px; }
.welcome-heading .guide-shortcut { width: max-content; gap: 40px; padding: 0; font-size: 12px; }
.welcome-features { display: grid; gap: 27px; }
.welcome-features article { border-bottom: 1px solid var(--line); padding: 0 0 25px; }
.feature-number { font-size: 9px; letter-spacing: 1.5px; color: var(--muted); }
.welcome-features h3 { font-size: 23px; font-weight: 400; letter-spacing: -.5px; margin: 12px 0 8px; }
.welcome-features p { font-size: 13px; color: var(--muted); max-width: 480px; line-height: 1.8; margin: 0; }
.hero h1 { font-size: clamp(40px,5.2vw,68px); font-weight: 300; line-height: 1.08; letter-spacing: -2px; }
.hero { margin-bottom: 40px; }
.hero .eyebrow { font-size: 9px; font-weight: 400; }
.creator-grid { grid-template-columns: minmax(0,1.6fr) minmax(270px,1fr); gap: 28px; }
.card { border-radius: 14px; box-shadow: none; }
.card-body { padding: 30px; }
.card-body h2 { font-size: 27px; font-weight: 400; letter-spacing: -.7px; }
.panel-heading { padding: 18px 30px; font-size: 9px; font-weight: 400; }
.node-chip-avatar { border: 1px solid var(--line); background: var(--field); border-radius: 14px; }
.node-chip-avatar svg { width: 35px; height: 35px; }
.node-chip-avatar img { display: block; width: 56px; height: 56px; }
.pink-note { background: var(--field); font-size: 11px; }
.dropzone-box { background: var(--field); border-color: var(--line); border-radius: 10px; }
input:not([type=checkbox]), textarea { border-radius: 8px; }
.button { border-radius: 9px; font-weight: 400; }
.button:hover { opacity: 1; }
.button.primary:hover { filter: brightness(.9); }
.instance-item:hover { border-color: var(--line); }
.instance-badge { background: var(--field); }
.cf-modal { border-radius: 16px; }
.cf-modal-backdrop { background: #0c0d1080; }
.modal-top h2 { font-family: Plex,Arial,sans-serif; font-weight: 300; font-size: 31px; }
.auth-tab-btn { font-weight: 400; }
.session-state { min-height: 60vh; }
footer { max-width: 1250px; margin: auto; padding: 25px 0 30px; font-size: 10px; }
@media(max-width:1350px) { .welcome-section, footer { margin-left: 48px; margin-right: 48px; } .welcome-section { gap: 70px; } }
@media(max-width:1000px) {
  .header { width: calc(100% - 40px); gap: 12px; }
  .header-nav { gap: 16px; }
  .brand strong { font-size: 12px; letter-spacing: 1px; }
  .landing-hero { min-height: 820px; padding-top: 330px; }
  .hero-art { width: 1050px; right: -230px; top: -35px; }
  .welcome-section { gap: 45px; }
  .welcome-heading h2 { font-size: 40px; }
  .creator-grid { grid-template-columns: minmax(0,1.5fr) minmax(240px,1fr); }
}
@media(max-width:760px) {
  .header { width: calc(100% - 24px); top: 12px; padding: 10px 12px; gap: 10px; min-height: 58px; }
  .header-nav { display: none; }
  html[data-account='member'] .header-nav { display: flex; position: absolute; top: calc(100% + 7px); left: 0; width: 100%; padding: 12px; margin: 0; gap: 28px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
  html[data-account='member'] .workspace { padding-top: 150px; }
  .header-actions { flex-shrink: 1; }
  .workspace { padding: 108px 24px 45px; }
  .hero-art { top: 0; width: 860px; right: -200px; opacity: .9; }
  .landing-hero { padding: 350px 28px 52px; min-height: auto; }
  .landing-hero h1 { font-size: 68px; letter-spacing: -2.5px; }
  .landing-hero::after { background: linear-gradient(0deg,var(--bg) 12%,transparent 65%),linear-gradient(90deg,var(--bg),transparent 80%); }
  .welcome-section { margin: 0 28px; padding: 50px 0; grid-template-columns: 1fr; gap: 40px; }
  .welcome-heading h2 { font-size: 44px; }
  .welcome-features { gap: 23px; }
  .creator-grid { display: flex; flex-direction: column; }
  .creator-grid > * { width: 100%; }
  .hero h1 { font-size: 48px; }
  .card-body { padding: 25px; }
  footer { margin: 0 28px; flex-direction: column; gap: 12px; }
  html[data-account='guest'] .guide-view { padding: 110px 28px 50px; }
}
@media(max-width:460px) {
  .header { flex-wrap: nowrap; }
  .header-actions:has(.nav-auth-actions:not([hidden])) { width: auto; margin-left: auto; }
  .nav-auth-actions { flex: initial; gap: 6px; }
  .header .button, #btn-open-login { font-size: 10px; padding: 8px 9px; min-height: 32px; }
  .brand { gap: 7px; }
  .brand strong { font-size: 11px; letter-spacing: .7px; }
  .brand-icon, .brand-icon img { width: 27px; height: 27px; }
  .icon-button { width: 29px; height: 29px; flex-shrink: 0; }
  .header-actions { gap: 6px; }
  .hero-art { width: 670px; top: 28px; right: -168px; }
  .landing-hero { padding: 335px 24px 45px; }
  .landing-hero h1 { font-size: clamp(43px,12.7vw,57px); letter-spacing: -1.8px; }
  .landing-hero-content > p { font-size: 13px; }
  .desktop-break { display: none; }
  .hero-runtimes { gap: 29px; margin-top: 35px; }
  .hero-runtimes strong { font-size: 26px; }
  .hero-runtimes span { font-size: 8px; letter-spacing: .8px; }
  .hero h1 { font-size: 42px; }
  .section-kicker { font-size: 8px; letter-spacing: 1.5px; }
  .session-placeholder { min-width: 95px; font-size: 10px; }
  .welcome-section { margin: 0 24px; }
}
@media(max-width:360px) { .brand strong { display: none; } .hero-buttons .button { padding: 12px 16px; } }

/* Terminal Stdin input visibility in light & dark modes */
#term-stdin-input,
.term-stdin-input,
input#term-stdin-input,
input.term-stdin-input {
  flex: 1 !important;
  background: transparent !important;
  border: none !important;
  color: #f8f9fa !important;
  -webkit-text-fill-color: #f8f9fa !important;
  caret-color: #f8f9fa !important;
  font-family: Consolas, monospace !important;
  font-size: 13px !important;
  height: auto !important;
  min-height: 32px !important;
  padding: 4px 8px !important;
  outline: none !important;
  box-shadow: none !important;
  opacity: 1 !important;
}
#term-stdin-input:focus,
.term-stdin-input:focus,
input#term-stdin-input:focus,
input.term-stdin-input:focus {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
#term-stdin-input::placeholder,
.term-stdin-input::placeholder {
  color: #8c929c !important;
  -webkit-text-fill-color: #8c929c !important;
  opacity: 1 !important;
}

/* Remove neon glow in My applications */
.apps-section,
.apps-section *,
.instance-item,
.instance-item * {
  box-shadow: none !important;
  text-shadow: none !important;
}
.instance-item {
  border: 1px solid var(--line) !important;
  background: var(--field) !important;
}
.instance-item:hover {
  border-color: var(--line) !important;
}
.instance-badge {
  background: var(--field) !important;
  color: var(--muted) !important;
  border: 1px solid var(--line) !important;
}
.instance-badge.badge-port,
.instance-badge.badge-worker {
  background: var(--field) !important;
  color: var(--muted) !important;
  border-color: var(--line) !important;
}
.status-pill {
  border: 1px solid var(--line) !important;
}
.status-pill.dependency_error,
.status-pill.error {
  background: var(--field) !important;
  color: #dc2626 !important;
  border-color: var(--line) !important;
}
html[data-theme='dark'] .status-pill.dependency_error,
html.dark .status-pill.dependency_error,
html[data-theme='dark'] .status-pill.error,
html.dark .status-pill.error {
  background: var(--field) !important;
  color: #f87171 !important;
  border-color: var(--line) !important;
}
.dep-error-box {
  background: var(--field) !important;
  border: 1px solid var(--line) !important;
  color: var(--ink) !important;
}
.dep-error-msg strong {
  color: #dc2626 !important;
}
html[data-theme='dark'] .dep-error-msg strong,
html.dark .dep-error-msg strong {
  color: #f87171 !important;
}
.btn-dep-install {
  background: var(--button) !important;
  color: var(--on-button) !important;
  border: 1px solid var(--button) !important;
}
.btn-action.btn-danger {
  color: var(--ink) !important;
  border-color: var(--line) !important;
  background: var(--card) !important;
}
.btn-action.btn-danger:hover {
  background: var(--field) !important;
  color: #dc2626 !important;
  border-color: var(--line) !important;
}

/* OTP delay notice */
.otp-delivery-notice {
  font-size: 11px;
  color: var(--muted);
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 12px;
  margin: 10px 0 14px;
  line-height: 1.45;
  text-align: center;
}

/* Refinements to the existing layout and interaction states. */
.header-nav a { font-weight: 500; transition: color 160ms ease; }
.header-nav a[aria-current='page'] { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.header-actions, .user-profile-wrap { min-width: 0; }
.user-profile-pill { width: 100%; }
.pill-chevron { transition: transform 180ms var(--ease-ui); }
[aria-expanded='true'] .pill-chevron { transform: rotate(180deg); }
.account-dropdown-menu { top: calc(100% + 12px); max-width: calc(100vw - 40px); max-height: calc(100dvh - 100px); overflow-y: auto; overscroll-behavior: contain; }
.hero-art { transition: opacity 200ms ease; }
.dropzone-box { transition: background-color 160ms ease, border-color 160ms ease; }
.dropzone-box:focus-visible, .dropzone-box.dragover { background: var(--pink-bg); border-color: var(--pink); }
.instance-meta, .dep-error-msg, .staged-file-list { overflow-wrap: anywhere; }
.dep-error-msg strong { display: inline-flex; align-items: center; gap: 6px; }
.dep-error-msg > div { color: var(--muted); margin-top: 5px; }
.cf-icon { display: inline-block; width: 14px; height: 14px; vertical-align: -.15em; }
.dep-repair-row .dep-repair-input { flex: 1 1 160px; min-width: 120px; }
.dep-repair-row .btn-action, .btn-dep-install { min-height: 36px; justify-content: center; }
.btn-dep-install { gap: 7px; }
.btn-upload-reqs { margin-bottom: 0; min-height: 32px; }
.cf-modal { overscroll-behavior: contain; max-height: calc(100dvh - 40px); }
.cf-modal:focus { outline: none; }
.cf-modal > .modal-close-btn + .modal-top { padding-right: 36px; }
.modal-top h2 { overflow-wrap: anywhere; line-height: 1.2; }
.auth-tabs-bar { align-items: center; }
.auth-tab-btn { white-space: nowrap; }
.cf-modal form > .button.primary:not(:disabled):not(:has(span))::after,
#btn-deploy-submit:not(:disabled):not(:has(span))::after { content: '↗'; margin-left: auto; }
.term-header-actions { flex-shrink: 0; }
.term-stream-title { min-width: 0; }
.terminal-stdin-bar:focus-within { outline: 2px solid var(--pink); outline-offset: 2px; }
.terminal-body, .files-container { overscroll-behavior: contain; }
.file-name-part { column-gap: 8px; row-gap: 4px; }
.file-name-part > span:nth-child(2) { min-width: 0; flex: 1 1 100px; }
#apps { scroll-margin-top: 110px; }
.app-notice { bottom: max(24px, env(safe-area-inset-bottom)); }

/* Short entrances; no looping decoration or motion during list polling. */
@keyframes cf-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes cf-fade { from { opacity: 0; } to { opacity: 1; } }
.landing-hero-content { animation: cf-enter 420ms var(--ease-ui) both; }
.guide-view:not([hidden]), #dashboard-workspace-view:not([hidden]) { animation: cf-enter 240ms var(--ease-ui); }
.cf-modal-backdrop:not([hidden]) { animation: cf-fade 160ms ease; }
.cf-modal-backdrop:not([hidden]) > .cf-modal { animation: cf-enter 200ms var(--ease-ui); }
.account-dropdown-menu:not([hidden]) { animation: cf-enter 160ms var(--ease-ui); }
.app-notice:not([hidden]) { animation: cf-fade 160ms ease; }

@media (hover: hover) {
  .button.secondary:hover { background: var(--field); border-color: var(--pink); }
  .icon-button:hover { background: var(--field); border-color: var(--line) !important; }
  .dropzone-box:hover { border-color: var(--pink); background: var(--pink-bg); }
}
@media (max-width: 760px) {
  #apps { scroll-margin-top: 145px; }
  .header-nav a { padding: 5px 4px; }
  html[data-account='member'] .header-nav { padding: 7px 12px; }
}
@media (max-width: 600px) {
  .cf-modal { max-height: calc(100dvh - 24px); }
  .modal-top h2 { font-size: 27px; }
  .dep-repair-row .dep-repair-input, .dep-repair-row .btn-action, .dep-repair-row .btn-dep-install { flex: 1 1 100%; width: 100%; min-height: 40px; }
  input:not([type='checkbox']), textarea, .dep-repair-row .dep-repair-input { font-size: 16px !important; }
  .otp-input-styled { font-size: 25px !important; }
  .term-stdin-send-btn { min-height: 36px; }
  .modal-close-btn { width: 34px; height: 34px; }
}
@media (max-width: 460px) {
  .header .button, #btn-open-login { min-height: 36px; }
  .theme-toggle.icon-button { width: 34px; height: 36px; }
  .workspace { padding-left: 20px; padding-right: 20px; }
  .card-body { padding: 22px; }
  .panel-heading { padding-left: 22px; padding-right: 22px; }
}
@media (max-width: 360px) {
  .auth-tab-btn { padding: 9px 7px; font-size: 11px; }
  .card-body { padding: 18px; }
  .panel-heading { padding-left: 18px; padding-right: 18px; }
  .instance-item { padding: 12px; }
  .confirm-modal-actions { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .spinner-dot, .animate-spin { animation: none !important; }
}

/* Eliminate all stroke/outline/border changes on theme toggle and user email pill */
.icon-button,
#theme-toggle,
.theme-toggle,
.user-profile-pill,
#btn-user-dropdown {
  outline: none !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

.icon-button:focus,
.icon-button:focus-visible,
.icon-button:hover,
.icon-button:active,
#theme-toggle:focus,
#theme-toggle:focus-visible,
#theme-toggle:hover,
#theme-toggle:active,
.theme-toggle:focus,
.theme-toggle:focus-visible,
.theme-toggle:hover,
.theme-toggle:active {
  outline: none !important;
  box-shadow: none !important;
  border-color: var(--line) !important;
}

.user-profile-pill:focus,
.user-profile-pill:focus-visible,
.user-profile-pill:hover,
.user-profile-pill:active,
#btn-user-dropdown:focus,
#btn-user-dropdown:focus-visible,
#btn-user-dropdown:hover,
#btn-user-dropdown:active {
  outline: none !important;
  box-shadow: none !important;
  border-color: var(--line) !important;
}