/*
MIT License

Copyright (c) 2025 Avimanyu Bandyopadhyay

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
*/

/* AxonOS Theme for noVNC — AxonDAO Official Branding */
/* Deep navy background, BrutalType typeface, AxonDAO cyan/violet/warm accent system */

/*
 * AxonDAO Design Tokens (applied via CSS custom properties in :root):
 * --cyan:    #4ec3d4  — primary accent (teal/cyan)
 * --violet:  #9d6fd9  — secondary accent (purple)
 * --warm:    #e8a85a  — tertiary accent (orange/warm)
 * --green:   #7be0c8  — success / mint
 * --coral:   #f2607a  — error / danger
 * --bg-0:    #07101a  — primary background (darkest)
 * --ink:     #e8edf4  — primary text
 * Font: BrutalType (woff2, 200–900) · Orbitron kept for monospace data labels
 */

/* BrutalType — AxonDAO official typeface (ExtraLight/Light/Bold/ExtraBold/Black) */
@font-face {
  font-family: "Brutal";
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url("../fonts/BrutalType-ExtraLight.woff2") format("woff2");
}
@font-face {
  font-family: "Brutal";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/BrutalType-Light.woff2") format("woff2");
}
@font-face {
  font-family: "Brutal";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/BrutalType-Bold.woff2") format("woff2");
}
@font-face {
  font-family: "Brutal";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/BrutalType-ExtraBold.woff2") format("woff2");
}
@font-face {
  font-family: "Brutal";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../fonts/BrutalType-Black.woff2") format("woff2");
}

/* Orbitron — subset woff2 (Google Fonts v35 latin); kept as monospace data/label font */
@font-face {
  font-family: "Orbitron";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../fonts/orbitron-v35-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ── AxonDAO official design tokens ── */
  --bg-0: #07101a;
  --bg-1: #0a1424;
  --bg-2: #0c1a2e;
  --panel-2: #0f2238;
  --ink: #e8edf4;
  --ink-dim: rgba(200,220,235,.92);
  --ink-mute: rgba(170,210,225,.62);
  --ink-faint: rgba(170,210,225,.40);
  --cyan: #4ec3d4;
  --violet: #9d6fd9;
  --warm: #e8a85a;
  --pink: #e87fa4;
  --coral: #f2607a;
  --green: #7be0c8;
  --mint: #4ec3d4;
  --mint-soft: #6fd4e2;
  --orange: #e8a85a;
  --violet-fg: #b3a3eb;
  --violet-bg: rgba(120,100,200,0.16);
  --rule: rgba(140,200,220,.07);
  --rule-strong: rgba(140,200,220,.16);
  --hair: rgba(140,200,220,.07);
  --hair-2: rgba(140,200,220,.16);
  --hair-mint: rgba(78,195,212,0.35);
  --font-body: 'Brutal', -apple-system, system-ui, sans-serif;
  --font-display: 'Brutal', -apple-system, system-ui, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ── AxonOS operational aliases (map to AxonDAO tokens) ── */
  --axonos-primary: #4ec3d4;
  --axonos-secondary: #9d6fd9;
  --axonos-accent: #4ec3d4;
  --axonos-warm: #e8a85a;
  --axonos-dark: #07101a;
  --axonos-dark-2: #0a1424;
  --axonos-dark-3: #0c1a2e;
  --axonos-light: #e8edf4;
  --axonos-hover: #7be0c8;
  --axonos-shadow: rgba(78,195,212,0.25);

  /* ── Layout ── */
  --axonos-prereq-ticker-strip-h: 44px;
  --axonos-prereq-ticker-sidebar-clear: calc(env(safe-area-inset-left, 0px) + 50px);
  --axonos-prereq-ticker-strip-pad-start: calc(env(safe-area-inset-left, 0px) + max(11px, 0.62rem));
  --axonos-prereq-ticker-body-pad-top: calc(
    env(safe-area-inset-top, 0px) + var(--axonos-prereq-ticker-strip-h)
  );
}

/* Prerequisites ticker — fixed left label + scrolling details */
.axonos-prerequisites-ticker {
  display: none;
  box-sizing: border-box;
  position: fixed;
  top: env(safe-area-inset-top, 0px);
  left: 0;
  right: 0;
  height: var(--axonos-prereq-ticker-strip-h);
  z-index: 60;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  overflow: hidden;
  justify-content: flex-start;
  padding-left: var(--axonos-prereq-ticker-strip-pad-start);
  padding-right: 10px;
  background: rgba(7,16,26,0.97);
  border-bottom: 1px solid var(--hair-mint);
  box-shadow:
    0 4px 22px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

html:not(.noVNC_connected) .axonos-prerequisites-ticker {
  display: flex;
}

html.noVNC_connected .axonos-prerequisites-ticker {
  display: none !important;
}

.axonos-prerequisites-ticker__kick {
  box-sizing: border-box;
  margin: 0;
  flex: 0 0 clamp(10.5rem, 19.25vw, 13.5rem);
  width: clamp(10.5rem, 19.25vw, 13.5rem);
  padding: 0 0.42rem 0 0;
  border-right: 1px solid rgba(78,195,212,0.28);
  font-family: 'Brutal', "Orbitron", system-ui, sans-serif;
  font-size: clamp(0.738rem, 0.63vw + 0.486rem, 0.954rem);
  font-weight: 600;
  letter-spacing: 0.03em;
  align-self: stretch;
  display: flex;
  align-items: center;
}

.axonos-prerequisites-ticker__kick-inner {
  display: inline-block;
  width: 100%;
  white-space: nowrap;
  font: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.96);
  text-align: justify;
  text-align-last: justify;
  text-justify: inter-word;
}

/* Stretch last line so inter-word justification applies to a single line */
.axonos-prerequisites-ticker__kick-inner::after {
  content: "";
  display: inline-block;
  width: 100%;
  height: 0;
}

.axonos-prerequisites-ticker__marquee-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  height: 100%;
}

.axonos-prerequisites-ticker__mask {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  height: 100%;
  display: flex;
  align-items: center;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent,
    #000 0.65rem,
    #000 calc(100% - 1.15rem),
    transparent
  );
  mask-image: linear-gradient(
    90deg,
    transparent,
    #000 0.65rem,
    #000 calc(100% - 1.15rem),
    transparent
  );
}

.axonos-prerequisites-ticker__track {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  width: max-content;
  animation: axonos-prerequisite-ticker-scroll 75s linear infinite;
  will-change: transform;
}

.axonos-prerequisites-ticker__seg {
  display: inline-flex;
  flex-shrink: 0;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  padding-right: 2.75rem;
  font-family: var(--font-body);
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--ink-dim);
  letter-spacing: 0.015em;
  white-space: nowrap;
}

.axonos-prerequisites-ticker__bullet {
  color: rgba(136, 169, 212, 0.55);
  font-weight: 300;
}

.axonos-prerequisites-ticker__chunk strong {
  margin: 0 0.12em;
}

.axonos-prerequisites-ticker__chunk a {
  color: var(--axonos-accent);
  text-decoration: none;
}

.axonos-prerequisites-ticker__chunk a:hover {
  text-decoration: underline;
}

@keyframes axonos-prerequisite-ticker-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .axonos-prerequisites-ticker__track {
    animation: none;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    max-width: 100%;
    white-space: normal;
    row-gap: 4px;
  }

  .axonos-prerequisites-ticker__marquee-wrap .axonos-prerequisites-ticker__mask {
    -webkit-mask-image: none;
    mask-image: none;
  }

  .axonos-prerequisites-ticker__seg {
    flex-wrap: wrap;
    white-space: normal;
    justify-content: center;
    text-align: center;
    padding-right: 0;
    max-width: 100%;
  }

  .axonos-prerequisites-ticker__seg[data-ticker-mirror="1"] {
    display: none;
  }

  .axonos-particles,
  .axonos-dna-animation::before,
  .axonos-dna-animation::after,
  .axonos-main-title,
  .axonos-highlight,
  #noVNC_connect_button,
  html:not(.noVNC_connected) body::before,
  html:not(.noVNC_connected) body::after {
    animation: none;
  }
}

@media (max-width: 520px) {
  .axonos-prerequisites-ticker__kick {
    flex-basis: clamp(9.25rem, 54vw, 11.85rem);
    width: clamp(9.25rem, 54vw, 11.85rem);
    font-size: clamp(0.576rem, 2.16vw + 0.432rem, 0.738rem);
    letter-spacing: 0.04em;
    padding-right: 0.38rem;
  }
}

/* Landing scrollbars — themed; WebKit thumbs hidden until the scrollbar groove is hovered */
html:not(.noVNC_connected) {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

html:not(.noVNC_connected):hover {
  scrollbar-color: rgba(78,195,212,0.45) rgba(7,16,26,0.3);
}

html:not(.noVNC_connected)::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

html:not(.noVNC_connected)::-webkit-scrollbar-corner {
  background: transparent;
}

html:not(.noVNC_connected)::-webkit-scrollbar-track {
  background: transparent;
}

html:not(.noVNC_connected)::-webkit-scrollbar-thumb {
  background-color: transparent;
  border-radius: 5px;
}

html:not(.noVNC_connected)::-webkit-scrollbar:hover::-webkit-scrollbar-thumb {
  background: linear-gradient(
    180deg,
    rgba(78,195,212,0.82) 0%,
    rgba(157,111,217,0.52) 100%
  );
}

html:not(.noVNC_connected)::-webkit-scrollbar-thumb:active {
  background: linear-gradient(
    180deg,
    rgba(78,195,212,0.95) 0%,
    rgba(157,111,217,0.72) 100%
  );
}

html:not(.noVNC_connected)::-webkit-scrollbar:hover {
  background: rgba(7,16,26,0.5);
}

html:not(.noVNC_connected) #noVNC_connect_dlg {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

html:not(.noVNC_connected) #noVNC_connect_dlg:hover {
  scrollbar-color: rgba(78,195,212,0.45) rgba(7,16,26,0.3);
}

html:not(.noVNC_connected) #noVNC_connect_dlg::-webkit-scrollbar {
  width: 8px;
}

html:not(.noVNC_connected) #noVNC_connect_dlg::-webkit-scrollbar-track {
  background: transparent;
}

html:not(.noVNC_connected) #noVNC_connect_dlg::-webkit-scrollbar-thumb {
  background-color: transparent;
  border-radius: 4px;
}

html:not(.noVNC_connected) #noVNC_connect_dlg::-webkit-scrollbar:hover::-webkit-scrollbar-thumb {
  background: linear-gradient(
    180deg,
    rgba(110, 128, 200, 0.88) 0%,
    rgba(52, 150, 100, 0.58) 100%
  );
}

html:not(.noVNC_connected) .noVNC_center:has(#noVNC_connect_dlg) {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

html:not(.noVNC_connected) .noVNC_center:has(#noVNC_connect_dlg):hover {
  scrollbar-color: rgba(78,195,212,0.45) rgba(7,16,26,0.3);
}

html:not(.noVNC_connected) .noVNC_center:has(#noVNC_connect_dlg)::-webkit-scrollbar {
  width: 8px;
}

html:not(.noVNC_connected) .noVNC_center:has(#noVNC_connect_dlg)::-webkit-scrollbar-track {
  background: transparent;
}

html:not(.noVNC_connected) .noVNC_center:has(#noVNC_connect_dlg)::-webkit-scrollbar-thumb {
  background-color: transparent;
  border-radius: 4px;
}

html:not(.noVNC_connected) .noVNC_center:has(#noVNC_connect_dlg)::-webkit-scrollbar:hover::-webkit-scrollbar-thumb {
  background: linear-gradient(
    180deg,
    rgba(110, 128, 200, 0.88) 0%,
    rgba(52, 150, 100, 0.58) 100%
  );
}

@media (hover: none) {
  html:not(.noVNC_connected) {
    scrollbar-color: rgba(78,195,212,0.3) rgba(7,16,26,0.2);
  }

  html:not(.noVNC_connected)::-webkit-scrollbar-thumb {
    background-color: rgba(78,195,212,0.3);
  }

  html:not(.noVNC_connected) #noVNC_connect_dlg {
    scrollbar-color: rgba(78,195,212,0.32) rgba(7,16,26,0.22);
  }

  html:not(.noVNC_connected) #noVNC_connect_dlg::-webkit-scrollbar-thumb {
    background-color: rgba(78,195,212,0.34);
  }

  html:not(.noVNC_connected) .noVNC_center:has(#noVNC_connect_dlg) {
    scrollbar-color: rgba(78,195,212,0.32) rgba(7,16,26,0.22);
  }

  html:not(.noVNC_connected) .noVNC_center:has(#noVNC_connect_dlg)::-webkit-scrollbar-thumb {
    background-color: rgba(78,195,212,0.34);
  }
}

@media (max-width: 480px) {
  .axonos-prerequisites-ticker__seg {
    font-size: 0.71rem;
  }
}

/* Space Background - Only when not connected */
html:not(.noVNC_connected) body {
  /* border-box keeps min-height + padding-top within one viewport (avoids phantom footer scrollbar). */
  box-sizing: border-box;
  margin: 0;
  padding-top: var(--axonos-prereq-ticker-body-pad-top);
  font-family: var(--font-body);
  color: var(--ink);
  /* AxonDAO ambient background — deep navy + subtle cyan/violet radial glows */
  background:
    radial-gradient(ellipse 900px 700px at 85% 18%, rgba(78,195,212,.10), transparent 60%),
    radial-gradient(ellipse 1000px 800px at 12% 82%, rgba(157,111,217,.10), transparent 65%),
    linear-gradient(180deg, #060e1a 0%, #050a14 55%, #03070d 100%) !important;
  overflow-x: hidden;
  position: relative;
  min-height: 100vh;
}

/* Normal background when connected — lock viewport to avoid edge scrollbars
   (slight overflow from video/canvas vs 100% width/height made body scrollable). */
html.noVNC_connected {
  height: 100%;
  overflow: hidden;
}

html.noVNC_connected body {
  background: var(--bg-0) !important;
  margin: 0;
  padding-top: 0 !important;
  height: 100%;
  overflow: hidden;
}

/* Container background - transparent during login, normal when connected */
html:not(.noVNC_connected) #noVNC_container {
  background: transparent !important;
  border-bottom-right-radius: 20px !important;
}

html.noVNC_connected #noVNC_container {
  background-color: var(--bg-0) !important;
  border-bottom-right-radius: 20px !important;
  overflow: hidden !important;
  box-sizing: border-box;
}

/* Control bar styling */
#noVNC_control_bar {
  background: linear-gradient(180deg, rgba(10,20,36,.98) 0%, rgba(7,16,26,.98) 100%) !important;
  border: 1px solid var(--hair-mint);
  box-shadow: 0 6px 22px rgba(0,0,0,0.5), 0 0 0 1px rgba(78,195,212,.08) !important;
}

#noVNC_control_bar.noVNC_open {
  box-shadow: 0 10px 28px rgba(0,0,0,0.55), 0 0 0 1px rgba(78,195,212,.12) !important;
}

/* Control bar handle */
#noVNC_control_bar_handle {
  background: linear-gradient(180deg, rgba(12,26,46,.98) 0%, rgba(9,18,32,.98) 100%) !important;
  border: 1px solid var(--rule-strong);
  box-shadow: 0 4px 14px rgba(0,0,0,0.4) !important;
}

#noVNC_control_bar_handle:hover {
  background: linear-gradient(180deg, rgba(20,38,64,.98) 0%, rgba(14,26,48,.98) 100%) !important;
  border-color: var(--hair-mint) !important;
}

/* Panel headings */
.noVNC_panel .noVNC_heading {
  background: linear-gradient(135deg, rgba(78,195,212,.14), rgba(157,111,217,.10)) !important;
  color: var(--ink) !important;
  border: 1px solid var(--hair-mint) !important;
  border-radius: 8px;
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* Connect button */
#noVNC_connect_button {
  background: linear-gradient(135deg, #1c5a6d 0%, #34397f 100%) !important;
  border: none;
  color: var(--axonos-light) !important;
  box-shadow: 0 4px 15px rgba(42, 68, 120, 0.42) !important;
}

#noVNC_connect_button:hover {
  background: linear-gradient(135deg, #0f2a4d 0%, #1a3b6b 100%) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(20, 44, 84, 0.58) !important;
}

#noVNC_connect_button div {
  border: none !important;
  background: transparent !important;
}

/* Panels */
.noVNC_panel {
  background-color: rgba(10,20,36,0.96) !important;
  border: 1px solid var(--rule-strong) !important;
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.45), 0 0 0 1px rgba(78,195,212,.06);
}

/* Logo customization */
.noVNC_logo {
  color: var(--axonos-accent) !important;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
  font-weight: bold;
}

.noVNC_logo span {
  color: var(--axonos-light) !important;
}

/* Input fields */
input[type="text"], input[type="password"], select {
  background-color: var(--axonos-dark) !important;
  border: 2px solid var(--axonos-secondary) !important;
  color: var(--axonos-light) !important;
  border-radius: 5px;
  padding: 8px;
}

input[type="text"]:focus, input[type="password"]:focus, select:focus {
  border-color: var(--axonos-accent) !important;
  box-shadow: 0 0 10px var(--axonos-shadow);
}

/* Custom AxonOS branding elements */
/* Hide branding when connected */
html.noVNC_connected .axonos-branding,
html.noVNC_connected .axonos-version {
  display: none !important;
}

.axonos-branding {
  position: fixed;
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  right: calc(14px + env(safe-area-inset-right, 0px));
  color: var(--cyan);
  font-size: 11px;
  opacity: 0.85;
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  z-index: 55;
  pointer-events: none;
}

html:not(.noVNC_connected) .axonos-version {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + var(--axonos-prereq-ticker-strip-h) + 6px);
  right: calc(14px + env(safe-area-inset-right, 0px));
  left: auto;
  bottom: auto;
  z-index: 55;
  pointer-events: none;
  color: var(--ink-mute);
  font-size: 10px;
  opacity: 0.72;
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
}

/* Pulse animation for connect button — opacity-only, GPU-composited (box-shadow forces CPU repaint) */
@keyframes pulse {
  0%, 100% { opacity: 0.88; }
  50%       { opacity: 1; }
}

#noVNC_connect_button {
  animation: pulse 2s ease-in-out infinite;
}

/* Force AxonOS logo styling */
.noVNC_logo {
  color: var(--axonos-accent) !important;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.7) !important;
  font-weight: bold !important;
  font-size: 24px !important;
  text-align: center !important;
}

.noVNC_logo span {
  color: var(--axonos-light) !important;
  font-weight: 900 !important;
}

/* Ensure connect dialog logo is styled */
#noVNC_connect_dlg .noVNC_logo {
  font-size: 48px !important;
  margin-bottom: 20px !important;
  
  letter-spacing: 2px !important;
}

/* Override any existing noVNC branding */
.noVNC_logo:before {
  content: "" !important;
}

.noVNC_logo:after {
  content: "" !important;
}

/* Fix password input field visibility */
input[type="password"] {
  background-color: var(--axonos-dark) !important;
  border: 2px solid var(--axonos-secondary) !important;
  color: var(--axonos-light) !important;
  border-radius: 5px;
  padding: 8px;
  font-family: monospace !important;
  font-size: 14px !important;
}

input[type="password"]:focus {
  border-color: var(--axonos-accent) !important;
  box-shadow: 0 0 10px var(--axonos-shadow);
  background-color: rgba(12,24,44,0.96) !important;
}

/* Ensure password dots are visible */
input[type="password"]::-webkit-input-placeholder {
  color: rgba(245, 245, 245, 0.5) !important;
}

input[type="password"]::placeholder {
  color: rgba(245, 245, 245, 0.5) !important;
}

/* AXGT Wallet Gate Styles */
/* Wallet dialog styling (in credentials dialog) */
.axonos-wallet-dialog-header {
    text-align: center;
    margin-bottom: 20px;
}

.axonos-wallet-dialog-header h2 {
    color: var(--cyan);
    font-size: 1.5em;
    margin-bottom: 10px;
    font-family: var(--font-body);
    font-weight: 800;
}

.axonos-wallet-dialog-header .axonos-wallet-description {
    color: var(--axonos-light);
    font-size: 0.9em;
    margin-bottom: 10px;
    word-spacing: 0.25em;
}
.axonos-wallet-dialog-header .axonos-wallet-description strong {
    margin: 0 0.15em;
}

.axonos-wallet-dialog-header .axonos-wallet-contract {
    color: var(--axonos-light);
    font-size: 0.8em;
    margin-top: 10px;
}

.axonos-wallet-dialog-header .axonos-wallet-contract code {
    background: rgba(78,195,212,.12);
    padding: 4px 8px;
    border-radius: 4px;
    font-family: var(--font-mono);
    color: var(--cyan);
}

#noVNC_wallet_block {
    margin: 20px 0;
}

#noVNC_wallet_block label {
    display: block;
    color: var(--axonos-light);
    margin-bottom: 8px;
    font-weight: 500;
}

#noVNC_wallet_input {
    width: 100%;
    padding: 12px;
    background: var(--axonos-dark);
    color: var(--axonos-light);
    border: 2px solid var(--axonos-secondary);
    border-radius: 5px;
    font-family: var(--font-mono);
    font-size: 0.9em;
    box-sizing: border-box;
}

#noVNC_wallet_input:focus {
    outline: none;
    border-color: var(--axonos-primary);
    box-shadow: 0 0 10px var(--axonos-shadow);
}

.axonos-wallet-gate {
    background: rgba(10,20,36,0.96);
    border: 1px solid var(--rule-strong);
    border-radius: 14px;
    padding: 20px;
    margin: 20px 0;
    box-shadow: 0 8px 32px rgba(0,0,0,.4), 0 0 0 1px rgba(78,195,212,.06);
}

.axonos-wallet-header h2 {
    color: var(--axonos-accent);
    margin: 0 0 10px 0;
    font-size: 24px;
}

.axonos-wallet-description {
    color: var(--axonos-light);
    margin: 10px 0;
}

.axonos-wallet-contract {
    color: var(--axonos-light);
    font-size: 12px;
    margin: 10px 0;
}

.axonos-wallet-contract code {
    background: rgba(0, 0, 0, 0.3);
    padding: 2px 6px;
    border-radius: 3px;
    font-family: monospace;
    color: var(--axonos-accent);
}

.axonos-wallet-input-section {
    margin: 20px 0;
}

.axonos-wallet-input-section label {
    display: block;
    color: var(--axonos-light);
    margin-bottom: 8px;
    font-weight: bold;
}

.axonos-wallet-input {
    width: 100%;
    max-width: 500px;
    background-color: var(--axonos-dark);
    border: 2px solid var(--axonos-secondary);
    color: var(--axonos-light);
    border-radius: 5px;
    padding: 10px;
    font-family: monospace;
    font-size: 14px;
    margin-bottom: 10px;
}

.axonos-wallet-input:focus {
    border-color: var(--axonos-accent);
    box-shadow: 0 0 10px var(--axonos-shadow);
    outline: none;
}

.axonos-verify-btn {
    background: rgba(78,195,212,.10);
    border: 1px solid var(--hair-mint);
    color: var(--cyan);
    -webkit-text-fill-color: var(--cyan);
    padding: 10px 20px;
    border-radius: 999px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    font-family: var(--font-body);
    transition: all 0.2s;
}

.axonos-verify-btn:hover:not(:disabled) {
    background: rgba(78,195,212,.18);
    border-color: var(--cyan);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(78,195,212,.2);
}

.axonos-verify-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.axonos-wallet-status {
    margin-top: 15px;
    padding: 10px;
    border-radius: 5px;
    font-weight: bold;
}

.axonos-wallet-status.verified {
    background: rgba(123,224,200,.15);
    border: 1px solid rgba(123,224,200,.4);
    color: var(--green);
    border-radius: 8px;
}

.axonos-wallet-status.not-verified,
.axonos-wallet-status.error {
    background: rgba(242,96,122,.12);
    border: 1px solid rgba(242,96,122,.4);
    color: var(--coral);
    border-radius: 8px;
}

.axonos-wallet-status.verifying {
    background: rgba(232,168,90,.12);
    border: 1px solid rgba(232,168,90,.4);
    color: var(--warm);
    border-radius: 8px;
}

/* AXGT usage overlay (during VNC session: warning or locked) */
/* Session countdown — inline in the footer, left of "Built with ♥ by AxonDAO" */
.axonos-session-timer {
    display: inline;
}

.axonos-session-timer--hidden {
    display: none;
}

.axonos-session-timer__label {
    text-transform: uppercase;
    opacity: 0.7;
}

.axonos-session-timer__value {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: rgba(120, 230, 180, 0.95);
}

/* Amber under the warning threshold */
.axonos-session-timer--warning .axonos-session-timer__value {
    color: rgba(232, 168, 90, 0.98);
}

/* Red + pulse in the final minute */
.axonos-session-timer--critical .axonos-session-timer__value {
    color: rgba(242, 96, 122, 0.98);
    animation: axonos-session-timer-pulse 1s ease-in-out infinite;
}

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

@media (prefers-reduced-motion: reduce) {
    .axonos-session-timer--critical .axonos-session-timer__value {
        animation: none;
    }
}

.axonos-usage-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.75);
    pointer-events: auto;
}
.axonos-usage-overlay--hidden {
    display: none !important;
}
.axonos-usage-overlay__panel {
    max-width: 420px;
    padding: 24px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}
.axonos-usage-overlay--warning .axonos-usage-overlay__panel {
    background: rgba(10,20,36,0.98);
    border: 1px solid var(--hair-mint);
    color: var(--ink);
    box-shadow: 0 0 30px rgba(78,195,212,.15), 0 20px 60px rgba(0,0,0,.6);
}
.axonos-usage-overlay--locked .axonos-usage-overlay__panel {
    background: rgba(10,20,36,0.98);
    border: 1px solid rgba(242,96,122,.45);
    color: var(--ink);
    box-shadow: 0 0 30px rgba(242,96,122,.12), 0 20px 60px rgba(0,0,0,.6);
}
.axonos-usage-overlay__message {
    margin: 0 0 20px 0;
    font-size: 1rem;
    line-height: 1.5;
}
.axonos-usage-overlay__actions {
    margin-top: 8px;
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}
.axonos-usage-overlay__btn {
    margin: 0;
    min-width: 9rem;
}
.axonos-usage-overlay__btn--exit {
    color: var(--coral) !important;
    -webkit-text-fill-color: var(--coral) !important;
    background: rgba(242,96,122,.08) !important;
    border: 1px solid rgba(242,96,122,.45) !important;
    box-shadow: none;
    border-radius: 999px !important;
}
.axonos-usage-overlay__btn--exit:hover:not(:disabled) {
    border-color: var(--coral) !important;
    background: rgba(242,96,122,.15) !important;
}

/* Prerequisites on connect panel (what you need to sign in) */
.axonos-prerequisites {
    max-width: 480px;
    margin: 0 auto 20px auto;
    padding: 14px 18px;
    background: rgba(78,195,212,.04);
    border: 1px solid var(--rule-strong);
    border-radius: 12px;
    text-align: left;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--ink-dim);
}
.axonos-prerequisites__title {
    margin: 0 0 8px 0;
    font-weight: 600;
    font-size: 0.95rem;
}
.axonos-prerequisites__list {
    margin: 0;
    padding-left: 1.2em;
}
.axonos-prerequisites__list li {
    margin: 6px 0;
    word-spacing: 0.25em;
}
.axonos-prerequisites__list strong,
.axonos-prerequisites__list a {
    margin: 0 0.15em;
}
.axonos-prerequisites__list a {
    color: var(--axonos-accent);
    text-decoration: none;
}
.axonos-prerequisites__list a:hover {
    text-decoration: underline;
}

/* Prerequisites in wallet verification dialog */
.axonos-wallet-prereqs {
    margin: 14px 0;
    padding: 12px 14px;
    background: rgba(78,195,212,.05);
    border-radius: 8px;
    color: var(--ink-dim);
    border-left: 3px solid var(--cyan);
}
.axonos-wallet-prereqs__title {
    margin: 0 0 8px 0;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--ink);
}
.axonos-wallet-prereqs__list {
    margin: 0;
    padding-left: 1.2em;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--ink-dim);
}
.axonos-wallet-prereqs__list li {
    margin: 4px 0;
    word-spacing: 0.25em;
    color: var(--ink-dim);
}
.axonos-wallet-prereqs__list strong {
    margin: 0 0.15em;
}
.axonos-wallet-prereqs__list a {
    color: var(--axonos-accent);
    text-decoration: none;
}
.axonos-wallet-prereqs__list a:hover {
    text-decoration: underline;
}

/* AXGT queue overlay (desktop in use, wait or join queue) */
.axonos-queue-overlay {
    position: fixed;
    inset: 0;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.8);
    pointer-events: auto;
}
.axonos-queue-overlay--hidden {
    display: none !important;
}
.axonos-queue-overlay__panel {
    max-width: 420px;
    padding: 24px;
    border-radius: 20px;
    text-align: center;
    background: rgba(10,20,36,0.98);
    border: 1px solid var(--hair-mint);
    color: var(--ink);
    box-shadow: 0 0 30px rgba(78,195,212,.12), 0 20px 60px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.04);
}
.axonos-queue-overlay__title {
    margin: 0 0 12px 0;
    font-size: 1.25rem;
    font-weight: 600;
}
.axonos-queue-overlay__message {
    margin: 0 0 16px 0;
    font-size: 1rem;
    line-height: 1.5;
    opacity: 0.95;
    white-space: pre-line;
}
.axonos-queue-overlay__row {
    margin: 8px 0;
    font-size: 0.95rem;
}
.axonos-queue-overlay__row strong {
    color: var(--cyan);
}
.axonos-queue-overlay__actions {
    margin-top: 20px;
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

/* Queue actions: match modal gold frame, readable on dark (Join + Leave use the same chrome) */
.axonos-queue-overlay__btn {
    margin: 0;
    min-width: 11rem;
    padding: 12px 22px !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em;
    text-transform: none;
    border-radius: 8px !important;
    cursor: pointer;
    color: var(--ink) !important;
    -webkit-text-fill-color: var(--ink) !important;
    background: rgba(78,195,212,.08) !important;
    border: 1px solid var(--hair-mint) !important;
    border-radius: 999px !important;
    font-family: var(--font-body) !important;
    box-shadow:
        0 0 0 1px rgba(78,195,212,.08),
        0 4px 14px rgba(0,0,0,.4),
        inset 0 1px 0 rgba(255,255,255,.04);
    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease,
        border-color 0.15s ease,
        filter 0.15s ease;
}

.axonos-queue-overlay__btn:hover:not(:disabled) {
    border-color: var(--cyan) !important;
    box-shadow:
        0 0 0 1px rgba(78,195,212,.25),
        0 6px 20px rgba(78,195,212,.12),
        0 8px 24px rgba(0,0,0,.45),
        inset 0 1px 0 rgba(255,255,255,.06);
    transform: translateY(-1px);
    filter: brightness(1.05);
}

.axonos-queue-overlay__btn:active:not(:disabled) {
    transform: translateY(0);
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.4),
        inset 0 2px 6px rgba(0, 0, 0, 0.35);
}

.axonos-queue-overlay__btn:focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: 3px;
}

.axonos-queue-overlay__btn:disabled {
    cursor: not-allowed !important;
    opacity: 0.72;
    filter: grayscale(0.15);
    transform: none;
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* Fix all credential form inputs */
#noVNC_credentials_dlg input {
  background-color: var(--axonos-dark) !important;
  border: 2px solid var(--axonos-secondary) !important;
  color: var(--axonos-light) !important;
  border-radius: 5px !important;
  padding: 8px !important;
  margin: 5px 0 !important;
}

#noVNC_credentials_dlg input:focus {
  border-color: var(--axonos-accent) !important;
  box-shadow: 0 0 10px var(--axonos-shadow) !important;
  background-color: rgba(12,24,44,0.96) !important;
  outline: none !important;
}

/* Style the credentials button */
#noVNC_credentials_button {
  background: linear-gradient(135deg, var(--axonos-primary), var(--axonos-secondary)) !important;
  border: 2px solid var(--axonos-accent) !important;
  color: var(--axonos-light) !important;
  padding: 10px 20px !important;
  border-radius: 5px !important;
  cursor: pointer !important;
  font-weight: bold !important;
}

#noVNC_credentials_button:hover {
  background: linear-gradient(135deg, var(--axonos-hover), var(--axonos-primary)) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 15px var(--axonos-shadow) !important;
}

/* Connect Wallet button - primary action in wallet dialog */
.axonos-connect-wallet-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  flex-wrap: wrap;
}

/* Lock label color — override noVNC base.css button text color */
.axonos-connect-wallet-btn,
.axonos-connect-wallet-btn:visited {
  color: var(--cyan) !important;
  -webkit-text-fill-color: var(--cyan) !important;
}

.axonos-connect-wallet-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  white-space: nowrap;
  font-family: var(--font-body) !important;
  letter-spacing: 0.04em;
  background: rgba(78,195,212,.10) !important;
  border: 1px solid var(--hair-mint) !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  color: var(--cyan) !important;
  -webkit-text-fill-color: var(--cyan) !important;
  box-shadow: none !important;
  transition: background .2s, border-color .2s, transform .2s, box-shadow .2s !important;
}

.axonos-connect-wallet-btn::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234ec3d4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cpath d='M2 10h20'/%3E%3Cpath d='M16 14h.01'/%3E%3C/svg%3E") center/contain no-repeat;
  flex-shrink: 0;
}

.axonos-connect-wallet-btn:hover {
  transform: translateY(-2px) !important;
  background: rgba(78,195,212,.18) !important;
  border-color: var(--cyan) !important;
  box-shadow: 0 6px 22px rgba(78,195,212,.22) !important;
}

.axonos-connect-wallet-btn:active {
  transform: translateY(0) !important;
  box-shadow: none !important;
}

.axonos-connected-wallet-hint {
  margin-left: 0;
  opacity: 0.9;
  font-size: 13px;
  color: var(--axonos-accent);
  font-weight: 500;
}

/* Force password field dark theme - override all defaults */
#noVNC_password_input {
  background-color: var(--axonos-dark) !important;
  background: var(--axonos-dark) !important;
  border: 2px solid var(--axonos-secondary) !important;
  color: var(--axonos-light) !important;
  border-radius: 5px !important;
  padding: 8px !important;
  font-family: monospace !important;
  font-size: 14px !important;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.3) !important;
}

#noVNC_password_input:focus {
  background-color: rgba(12,24,44,0.96) !important;
  background: rgba(12,24,44,0.96) !important;
  border-color: var(--axonos-accent) !important;
  box-shadow: 0 0 10px var(--axonos-shadow), inset 0 1px 3px rgba(0,0,0,0.3) !important;
  outline: none !important;
}

/* Also target by attribute selector */
input[type="password"]#noVNC_password_input {
  background-color: var(--axonos-dark) !important;
  background: var(--axonos-dark) !important;
  color: var(--axonos-light) !important;
}

/* Override any webkit autofill styles */
#noVNC_password_input:-webkit-autofill,
#noVNC_password_input:-webkit-autofill:hover,
#noVNC_password_input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0px 1000px var(--axonos-dark) inset !important;
  -webkit-text-fill-color: var(--axonos-light) !important;
  border: 2px solid var(--axonos-secondary) !important;
}

/* Ensure all credentials dialog inputs are dark */
#noVNC_credentials_dlg {
  background-color: rgba(10,20,36,0.97) !important;
  border: 1px solid var(--rule-strong) !important;
  border-radius: 20px !important;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  max-width: min(600px, 90vw);
}
#noVNC_credentials_dlg:has(#axonos_wallet_state_insufficient:not(.axonos-wallet-state--hidden)) {
  max-width: min(860px, 92vw);
}
#noVNC_credentials_dlg:has(#axonos_wallet_state_insufficient:not(.axonos-wallet-state--hidden)) #axonos_wallet_state_insufficient {
  padding-bottom: 0;
}

#noVNC_credentials_dlg label {
  color: var(--axonos-light) !important;
  font-weight: bold !important;
}

/* Wallet card – state-driven connect/verify UI */
.axonos-wallet-card {
  padding: 24px !important;
}
.axonos-wallet-close-btn {
  position: absolute;
  top: 10px;
  right: 12px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
  z-index: 10;
}
.axonos-wallet-close-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}
.axonos-wallet-card__title {
  text-align: center;
  margin-bottom: 12px;
}
.axonos-wallet-card__title h2 {
  color: var(--ink);
  font-size: 1.35rem;
  margin: 0 0 6px 0;
  font-family: var(--font-body);
  font-weight: 800;
  letter-spacing: -0.01em;
}
.axonos-wallet-card__hints {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.85rem;
  margin: 0;
}
.axonos-wallet-card__hints-session {
  display: block;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.8rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.65);
}
.axonos-wallet-card__contract {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-bottom: 20px;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  font-size: 0.85rem;
}
.axonos-wallet-card__contract-label {
  color: var(--cyan);
  font-weight: 600;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.axonos-wallet-card__contract code {
  font-family: ui-monospace, monospace;
  color: var(--axonos-light);
  background: none;
  padding: 0;
}
.axonos-contract-copy-btn {
  padding: 4px 10px !important;
  font-size: 0.78rem !important;
  background: rgba(78,195,212,.10) !important;
  color: var(--cyan) !important;
  border: 1px solid var(--hair-mint) !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  font-family: var(--font-mono) !important;
  letter-spacing: 0.06em !important;
  transition: background .15s, border-color .15s !important;
}
.axonos-contract-copy-btn:hover {
  background: rgba(78,195,212,.18) !important;
  border-color: var(--cyan) !important;
}
.axonos-contract-etherscan {
  color: var(--cyan);
  text-decoration: none;
  margin-left: auto;
  font-size: 0.82rem;
  opacity: 0.85;
  transition: opacity .15s;
}
.axonos-contract-etherscan:hover {
  text-decoration: underline;
  opacity: 1;
}
.axonos-wallet-card__status {
  min-height: 140px;
}
.axonos-wallet-state {
  text-align: center;
  padding: 12px 0;
}
.axonos-wallet-state--hidden {
  display: none !important;
}
.axonos-wallet-state__help,
.axonos-wallet-state__msg {
  color: var(--axonos-light);
  margin: 0 0 14px 0;
  font-size: 0.95rem;
}
.axonos-wallet-state__spinner {
  width: 32px;
  height: 32px;
  margin: 0 auto 12px;
  border: 3px solid rgba(78,195,212,.18);
  border-top-color: var(--cyan);
  border-radius: 50%;
  animation: axonos-spin 0.8s linear infinite;
}
@keyframes axonos-spin {
  to { transform: rotate(360deg); }
}
.axonos-wallet-state__icon {
  width: 40px;
  height: 40px;
  margin: 0 auto 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.axonos-wallet-state__icon--success {
  background: rgba(34, 197, 94, 0.25);
  border: 2px solid #22c55e;
}
.axonos-wallet-state__icon--success::after {
  content: "";
  display: block;
  width: 12px;
  height: 6px;
  margin: 14px 0 0 10px;
  border-left: 2px solid #22c55e;
  border-bottom: 2px solid #22c55e;
  transform: rotate(-45deg);
}
.axonos-wallet-state__icon--warning {
  background: rgba(234, 179, 8, 0.25);
  border: 2px solid #eab308;
}
.axonos-wallet-state__icon--warning::after {
  content: "!";
  display: block;
  text-align: center;
  line-height: 36px;
  font-weight: bold;
  color: #eab308;
  font-size: 1.2rem;
}
.axonos-wallet-state__title {
  font-weight: 600;
  color: var(--axonos-light);
  margin: 0 0 6px 0;
  font-size: 1rem;
}
.axonos-wallet-state__address {
  font-family: ui-monospace, monospace;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 4px 0;
}
.axonos-wallet-state__balance {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.75);
  margin: 0 0 14px 0;
}
.axonos-wallet-picker-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}
.axonos-wallet-picker-list .axonos-connect-wallet-btn {
  width: 100%;
  max-width: 280px;
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
}
.axonos-wallet-state__back {
  margin: 14px 0 0 0;
}

/* AXGT discount tier card — Gradio-safe light text on dark panel */
.axonos-discount-panel {
  color: rgba(255, 255, 255, 0.92) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.92) !important;
}
.axonos-discount-panel strong {
  color: rgba(255, 255, 255, 0.95) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.95) !important;
}
.axonos-discount-panel #axonos_discount_percent {
  color: #7adf8a !important;
  -webkit-text-fill-color: #7adf8a !important;
}
.axonos-discount-panel #axonos_discount_min_eth {
  color: #ffd166 !important;
  -webkit-text-fill-color: #ffd166 !important;
}
.axonos-discount-preview {
  border-top: 1px dashed rgba(255, 255, 255, 0.18);
  padding-top: 0.35rem;
}
.axonos-discount-panel #axonos_discount_preview_minutes {
  color: #7adf8a !important;
  -webkit-text-fill-color: #7adf8a !important;
}
.axonos-pay-eth-hint {
  margin: 0.25rem auto 0;
  max-width: 28rem;
  font-size: 0.8rem;
  line-height: 1.35;
  min-height: 1.1rem;
  opacity: 0.88;
  text-align: center;
}
.axonos-pay-eth-hint--ok {
  color: #7adf8a !important;
  -webkit-text-fill-color: #7adf8a !important;
}
.axonos-pay-eth-hint--error {
  color: #f08080 !important;
  -webkit-text-fill-color: #f08080 !important;
}

/* Prepaid deposit rows: label + amount + [Min | Send] stays aligned; Gradio-safe text color */
.axonos-pay-deposit-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.45rem;
  width: 100%;
}
.axonos-pay-deposit-row:last-child {
  margin-bottom: 0;
}
.axonos-pay-row-label {
  flex: 0 0 2.75rem;
  font-size: 0.85em;
  font-weight: 600;
  color: #f5f5f5 !important;
  -webkit-text-fill-color: #f5f5f5 !important;
  text-align: left;
}
.axonos-pay-amount-input {
  flex: 1 1 5.5rem;
  min-width: 4.5rem;
  max-width: 9.5rem;
  box-sizing: border-box;
  padding: 0.4rem 0.5rem;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(0, 0, 0, 0.35);
  color: #f5f5f5 !important;
  -webkit-text-fill-color: #f5f5f5 !important;
  font-size: 0.88rem;
}
.axonos-pay-deposit-actions {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0.4rem;
  align-items: center;
  flex-shrink: 0;
}
.axonos-pay-min-btn {
  margin: 0 !important;
  padding: 0.35rem 0.55rem !important;
  font-size: 0.8rem !important;
  opacity: 0.95;
}
.axonos-pay-send-btn {
  margin: 0 !important;
  padding: 0.4rem 0.7rem !important;
  font-size: 0.8rem !important;
  opacity: 0.98;
}
.axonos-wallet-picker-back {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.9rem;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}
.axonos-wallet-picker-back:hover {
  color: #fff;
}
.axonos-continue-btn {
  display: inline-block;
  padding: 12px 28px !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  color: var(--green) !important;
  -webkit-text-fill-color: var(--green) !important;
  background: rgba(123,224,200,.12) !important;
  border: 1px solid rgba(123,224,200,.35) !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  font-family: var(--font-body) !important;
  transition: transform 0.15s ease, background .15s, border-color .15s !important;
}
.axonos-continue-btn:hover {
  transform: translateY(-1px) !important;
  background: rgba(123,224,200,.20) !important;
  border-color: var(--green) !important;
}
.axonos-get-axgt-btn,
.axonos-install-metamask-btn {
  display: inline-block;
  padding: 10px 20px !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  color: var(--violet-fg) !important;
  -webkit-text-fill-color: var(--violet-fg) !important;
  background: var(--violet-bg) !important;
  border: 1px solid rgba(169,139,255,.30) !important;
  border-radius: 999px !important;
  text-decoration: none !important;
  cursor: pointer !important;
  font-family: var(--font-body) !important;
  transition: transform 0.15s ease, background .15s !important;
}
.axonos-get-axgt-btn:hover,
.axonos-install-metamask-btn:hover {
  transform: translateY(-1px) !important;
  background: rgba(120,100,200,.25) !important;
}
.axonos-switch-network-btn {
  display: inline-block;
  padding: 10px 20px !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  color: var(--warm) !important;
  -webkit-text-fill-color: var(--warm) !important;
  background: rgba(232,168,90,.12) !important;
  border: 1px solid rgba(232,168,90,.35) !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  font-family: var(--font-body) !important;
  transition: transform 0.15s ease, background .15s !important;
}
.axonos-switch-network-btn:hover {
  transform: translateY(-1px) !important;
  background: rgba(232,168,90,.20) !important;
}

/* Settings panel dark theme styling */
#noVNC_settings {
  background-color: rgba(10,20,36,0.97) !important;
  border: 1px solid var(--rule-strong) !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.45), 0 0 0 1px rgba(78,195,212,.06) !important;
}

/* Settings panel inputs */
#noVNC_settings input[type="text"],
#noVNC_settings input[type="number"],
#noVNC_settings input[type="range"],
#noVNC_settings select {
  background-color: rgba(7,16,26,0.92) !important;
  border: 1px solid var(--rule-strong) !important;
  color: var(--ink) !important;
  border-radius: 8px !important;
  padding: 6px 8px !important;
  margin: 2px 0 !important;
  font-family: var(--font-mono) !important;
}

#noVNC_settings input[type="text"]:focus,
#noVNC_settings input[type="number"]:focus,
#noVNC_settings select:focus {
  border-color: var(--cyan) !important;
  box-shadow: 0 0 0 2px rgba(78,195,212,.15) !important;
  background-color: rgba(10,20,36,0.96) !important;
  outline: none !important;
}

/* Range sliders */
#noVNC_settings input[type="range"] {
  background: rgba(7,16,26,0.92) !important;
  border: 1px solid var(--rule) !important;
  border-radius: 999px !important;
  height: 8px !important;
}

#noVNC_settings input[type="range"]::-webkit-slider-thumb {
  background: var(--cyan) !important;
  border: 2px solid rgba(78,195,212,.5) !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  height: 18px !important;
  width: 18px !important;
}

#noVNC_settings input[type="range"]::-moz-range-thumb {
  background: var(--cyan) !important;
  border: 2px solid rgba(78,195,212,.5) !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  height: 18px !important;
  width: 18px !important;
}

/* Checkboxes */
#noVNC_settings input[type="checkbox"] {
  accent-color: var(--cyan) !important;
  transform: scale(1.2) !important;
  margin-right: 8px !important;
}

/* Labels */
#noVNC_settings label {
  color: var(--axonos-light) !important;
  font-weight: normal !important;
  font-size: 14px !important;
}

/* Settings headings */
#noVNC_settings .noVNC_heading {
  background: linear-gradient(135deg, rgba(78,195,212,.12), rgba(157,111,217,.08)) !important;
  color: var(--ink) !important;
  border: 1px solid var(--hair-mint) !important;
  border-radius: 8px !important;
  padding: 8px !important;
  margin-bottom: 10px !important;
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
}

/* Expander sections */
#noVNC_settings .noVNC_expander {
  background-color: rgba(78,195,212,.08) !important;
  color: var(--cyan) !important;
  border: 1px solid var(--hair-mint) !important;
  border-radius: 8px !important;
  padding: 6px 10px !important;
  cursor: pointer !important;
  font-weight: 600 !important;
  font-family: var(--font-mono) !important;
  letter-spacing: 0.06em !important;
}

#noVNC_settings .noVNC_expander:hover {
  background-color: rgba(78,195,212,.14) !important;
  border-color: var(--cyan) !important;
}

/* Version info */
#noVNC_settings .noVNC_version {
  color: var(--ink-mute) !important;
  font-weight: 400 !important;
  font-family: var(--font-mono) !important;
  font-size: 0.82rem !important;
}

/* Specific input field targeting */
#noVNC_setting_host,
#noVNC_setting_port,
#noVNC_setting_path,
#noVNC_setting_repeaterID,
#noVNC_setting_reconnect_delay {
  background-color: var(--axonos-dark) !important;
  color: var(--axonos-light) !important;
  border: 2px solid var(--axonos-secondary) !important;
}

/* Select dropdowns */
#noVNC_setting_resize,
#noVNC_setting_logging {
  background-color: var(--axonos-dark) !important;
  color: var(--axonos-light) !important;
  border: 2px solid var(--axonos-secondary) !important;
}

/* Quality and compression sliders */
#noVNC_setting_quality,
#noVNC_setting_compression {
  background: linear-gradient(to right, var(--axonos-primary), var(--axonos-secondary)) !important;
  border-radius: 5px !important;
}

/* Force specific select dropdowns to dark theme */
select#noVNC_setting_resize,
select#noVNC_setting_reconnect_delay,
select#noVNC_setting_logging {
  background-color: var(--axonos-dark) !important;
  background: var(--axonos-dark) !important;
  color: var(--axonos-light) !important;
  border: 2px solid var(--axonos-secondary) !important;
  border-radius: 5px !important;
  padding: 6px 8px !important;
  font-family: monospace !important;
  font-size: 14px !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
}

select#noVNC_setting_resize:focus,
select#noVNC_setting_reconnect_delay:focus,
select#noVNC_setting_logging:focus {
  border-color: var(--axonos-accent) !important;
  box-shadow: 0 0 8px var(--axonos-shadow) !important;
  background-color: rgba(12,24,44,0.96) !important;
  outline: none !important;
}

/* Override webkit select styling */
select#noVNC_setting_resize option,
select#noVNC_setting_reconnect_delay option,
select#noVNC_setting_logging option {
  background-color: var(--axonos-dark) !important;
  color: var(--axonos-light) !important;
}

/* Force all select elements in settings */
#noVNC_settings select {
  background-color: var(--axonos-dark) !important;
  background: var(--axonos-dark) !important;
  color: var(--axonos-light) !important;
  border: 2px solid var(--axonos-secondary) !important;
  border-radius: 5px !important;
  padding: 6px 8px !important;
  font-family: monospace !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
}

/* Add custom dropdown arrow */
#noVNC_settings select {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234ec3d4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 8px center !important;
  background-size: 16px !important;
  padding-right: 32px !important;
}

/* Reconnect delay input field */
input#noVNC_setting_reconnect_delay {
  background-color: var(--axonos-dark) !important;
  background: var(--axonos-dark) !important;
  color: var(--axonos-light) !important;
  border: 2px solid var(--axonos-secondary) !important;
  border-radius: 5px !important;
  padding: 6px 8px !important;
  font-family: monospace !important;
}

/* Force specific text input fields to dark theme */
input#noVNC_setting_repeaterID,
input#noVNC_setting_host,
input#noVNC_setting_port,
input#noVNC_setting_path {
  background-color: var(--axonos-dark) !important;
  background: var(--axonos-dark) !important;
  color: var(--axonos-light) !important;
  border: 2px solid var(--axonos-secondary) !important;
  border-radius: 5px !important;
  padding: 6px 8px !important;
  font-family: monospace !important;
  font-size: 14px !important;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.3) !important;
}

input#noVNC_setting_repeaterID:focus,
input#noVNC_setting_host:focus,
input#noVNC_setting_port:focus,
input#noVNC_setting_path:focus {
  background-color: rgba(12,24,44,0.96) !important;
  background: rgba(12,24,44,0.96) !important;
  border-color: var(--axonos-accent) !important;
  box-shadow: 0 0 8px var(--axonos-shadow), inset 0 1px 3px rgba(0,0,0,0.3) !important;
  outline: none !important;
}

/* Override webkit autofill for these specific fields */
input#noVNC_setting_repeaterID:-webkit-autofill,
input#noVNC_setting_host:-webkit-autofill,
input#noVNC_setting_port:-webkit-autofill,
input#noVNC_setting_path:-webkit-autofill,
input#noVNC_setting_repeaterID:-webkit-autofill:hover,
input#noVNC_setting_host:-webkit-autofill:hover,
input#noVNC_setting_port:-webkit-autofill:hover,
input#noVNC_setting_path:-webkit-autofill:hover,
input#noVNC_setting_repeaterID:-webkit-autofill:focus,
input#noVNC_setting_host:-webkit-autofill:focus,
input#noVNC_setting_port:-webkit-autofill:focus,
input#noVNC_setting_path:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0px 1000px var(--axonos-dark) inset !important;
  -webkit-text-fill-color: var(--axonos-light) !important;
  border: 2px solid var(--axonos-secondary) !important;
  transition: background-color 5000s ease-in-out 0s !important;
}

/* Force all WebSocket section inputs */
.noVNC_expander + * input[type="text"],
.noVNC_expander + * input[type="number"] {
  background-color: var(--axonos-dark) !important;
  background: var(--axonos-dark) !important;
  color: var(--axonos-light) !important;
  border: 2px solid var(--axonos-secondary) !important;
}

/* Additional broad targeting for stubborn inputs */
#noVNC_settings input[type="text"],
#noVNC_settings input[type="number"] {
  background-color: var(--axonos-dark) !important;
  background: var(--axonos-dark) !important;
  color: var(--axonos-light) !important;
  border: 2px solid var(--axonos-secondary) !important;
  border-radius: 5px !important;
  padding: 6px 8px !important;
  font-family: monospace !important;
}

/* Improve control bar layout and icon positioning */
#noVNC_control_bar {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding: 10px 8px !important;
}

/* Position the logo at the top */
.noVNC_logo {
  order: 1 !important;
  margin-bottom: 8px !important;
  text-align: center !important;
  line-height: 1.2 !important;
}

/* Position icons directly below the logo */
#noVNC_fullscreen_button,
#noVNC_settings_button {
  order: 2 !important;
  margin: 3px 0 !important;
  width: 32px !important;
  height: 32px !important;
}

/* Ensure other control elements come after */
#noVNC_view_drag_button,
#noVNC_mobile_buttons,
#noVNC_modifiers,
#noVNC_power_button,
#noVNC_clipboard_button,
#noVNC_disconnect_button {
  order: 3 !important;
}

.axonos-clipboard-panel__help {
  margin: 0.35rem 0 0.55rem;
  font-size: 0.82em;
  line-height: 1.35;
  color: var(--axonos-light);
  opacity: 0.85;
}

/* Adjust control bar width for better icon spacing */
#noVNC_control_bar {
  min-width: 60px !important;
  width: auto !important;
}

/* Stack icons vertically below logo */
#noVNC_control_bar .noVNC_button {
  display: block !important;
  margin: 2px auto !important;
  width: 32px !important;
  height: 32px !important;
}

/* Improve logo spacing */
.noVNC_logo span {
  display: inline !important;
}

/* Specific positioning for fullscreen and settings */
#noVNC_fullscreen_button {
  margin-top: 5px !important;
}

#noVNC_settings_button {
  margin-top: 2px !important;
  margin-bottom: 8px !important;
}

/* Restart desktop services (settings panel) */
#noVNC_restart_session_button {
  display: block !important;
  width: calc(100% - 8px) !important;
  margin: 4px 0 !important;
  padding: 8px 10px !important;
  border: 1px solid var(--rule-strong) !important;
  border-radius: 999px !important;
  background: rgba(78,195,212,.08) !important;
  color: var(--cyan) !important;
  -webkit-text-fill-color: var(--cyan) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-align: center !important;
  cursor: pointer !important;
  font-family: var(--font-mono) !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease !important;
}

#noVNC_restart_session_button:hover {
  border-color: var(--cyan) !important;
  background: rgba(78,195,212,.15) !important;
  transform: translateY(-1px);
}

#noVNC_restart_session_button:focus-visible {
  outline: 2px solid var(--axonos-accent) !important;
  outline-offset: 2px !important;
}

/* AxonOS Enhanced Login UI Styles */

/* Vision Header Styling */
.axonos-vision-header {
  position: relative;
  text-align: center;
  margin-bottom: 30px;
  padding: 30px 20px;
  background: linear-gradient(135deg, rgba(78,195,212,.11) 0%, rgba(157,111,217,.09) 100%);
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--rule-strong);
  box-shadow: 0 8px 32px rgba(0,0,0,0.35), 0 0 0 1px rgba(78,195,212,.06);
}

.axonos-main-title {
  font-size: 4rem !important;
  font-weight: 900 !important;
  color: var(--ink) !important;
  text-shadow:
    0 0 30px rgba(78,195,212,.45),
    0 0 60px rgba(78,195,212,.20),
    2px 2px 8px rgba(0,0,0,0.8) !important;
  margin: 0 0 15px 0 !important;
  font-family: 'Brutal', "Orbitron", "Arial", sans-serif !important;
  letter-spacing: 4px;
  animation: title-glow 3s ease-in-out infinite alternate;
}

.axonos-highlight {
  color: var(--axonos-accent) !important;
  text-shadow: 
    0 0 40px var(--axonos-accent),
    0 0 80px var(--axonos-accent) !important;
  animation: accent-pulse 2s ease-in-out infinite alternate;
}

.axonos-tagline {
  font-size: 1.1rem;
  color: var(--ink-mute);
  font-weight: 300;
  margin: 0 0 15px 0;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-family: var(--font-mono);
  min-height: 1.6em;
}

/* Network environment (mainnet vs testnet) — driven by /api/config axgt_chain_id; see vnc.html applyAxonosNetworkEnvironmentUi */
.axonos-network-banner {
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  margin: 0 auto 12px;
  max-width: 36rem;
  padding: 0.45rem 0.75rem;
  border-radius: 999px;
  line-height: 1.35;
  font-family: var(--font-mono);
  text-transform: uppercase;
}

.axonos-network-banner--hidden {
  visibility: hidden;
  pointer-events: none;
}

.axonos-network-banner--mainnet {
  color: var(--green);
  background: rgba(123,224,200,.12);
  border: 1px solid rgba(123,224,200,.35);
}

.axonos-network-banner--testnet {
  color: var(--warm);
  background: rgba(232,168,90,.12);
  border: 1px solid rgba(232,168,90,.40);
  box-shadow: 0 0 18px rgba(232,168,90,.10);
}

.axonos-network-banner--other {
  color: var(--pink);
  background: rgba(232,127,164,.12);
  border: 1px solid rgba(232,127,164,.35);
}

.axonos-wallet-network-line {
  font-size: 0.82rem;
  margin: 0.5rem 0 0;
  line-height: 1.35;
  font-weight: 500;
}

.axonos-wallet-network-line--hidden {
  display: none !important;
}

.axonos-wallet-network-line--mainnet {
  color: var(--green);
}

.axonos-wallet-network-line--testnet {
  color: var(--warm);
}

.axonos-wallet-network-line--other {
  color: var(--pink);
}

/* Particle Animation Background */
.axonos-particles {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    radial-gradient(2px 2px at 20px 30px, var(--cyan), transparent),
    radial-gradient(2px 2px at 40px 70px, var(--violet), transparent),
    radial-gradient(1px 1px at 90px 40px, var(--warm), transparent),
    radial-gradient(1px 1px at 130px 80px, var(--green), transparent),
    radial-gradient(2px 2px at 160px 30px, var(--coral), transparent);
  background-size: 200px 100px;
  animation: particles-float 20s infinite linear;
  opacity: 0.28;
  pointer-events: none;
  will-change: transform;
}

@keyframes particles-float {
  0% { transform: translateX(0) translateY(0); }
  33% { transform: translateX(-20px) translateY(-10px); }
  66% { transform: translateX(20px) translateY(10px); }
  100% { transform: translateX(0) translateY(0); }
}

/* DNA Animation */
.axonos-dna-animation {
  position: absolute;
  top: 10px;
  right: 15px;
  width: 40px;
  height: 60px;
  opacity: 0.6;
}

.axonos-dna-animation::before,
.axonos-dna-animation::after {
  content: '';
  position: absolute;
  width: 2px;
  height: 100%;
  background: linear-gradient(to bottom, var(--cyan) 0%, transparent 50%, var(--cyan) 100%);
  animation: dna-twist 3s infinite ease-in-out;
  will-change: transform;
}

.axonos-dna-animation::before {
  left: 10px;
  animation-delay: 0s;
}

.axonos-dna-animation::after {
  right: 10px;
  animation-delay: 1.5s;
}

@keyframes dna-twist {
  0%, 100% { transform: scaleX(1) rotateY(0deg); }
  50% { transform: scaleX(0.3) rotateY(180deg); }
}

/* Mission Section */
.axonos-mission {
  text-align: center;
  margin: 25px 0;
  padding: 20px;
  background: rgba(78,195,212,.05);
  border: 1px solid var(--rule-strong);
  border-radius: 14px;
}

.axonos-mission-text {
  font-size: 1.1rem;
  color: var(--axonos-light);
  margin: 0 0 10px 0;
  font-weight: 500;
  word-spacing: 0.25em;
}
.axonos-mission-text strong {
  margin: 0 0.15em;
}

.axonos-subtitle {
  font-size: 0.95rem;
  color: var(--ink-mute);
  margin: 0;
  font-style: italic;
  font-weight: 300;
  opacity: 0.9;
}

/* Connect wrapper: profile + launch (prerequisites headline is the fixed header ticker) */
.axonos-connect-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.axonos-resume-panel {
  max-width: min(100%, 480px);
  width: 100%;
  margin: 0.35rem 0 0.85rem;
  padding: 0.85rem 1.15rem;
  box-sizing: border-box;
  text-align: center;
  background: linear-gradient(135deg, rgba(78,195,212,.10) 0%, rgba(12,26,46,0.55) 100%);
  border: 1px solid var(--hair-mint);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 8px 28px rgba(0, 0, 0, 0.28);
}

.axonos-resume-panel--hidden {
  display: none !important;
}

.axonos-resume-panel__title {
  margin: 0 0 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green);
}

.axonos-resume-panel__detail,
.axonos-resume-panel__ttl {
  margin: 0.25rem 0 0;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--axonos-light);
  opacity: 0.92;
}

.axonos-resume-panel__ttl {
  font-size: 0.82rem;
  opacity: 0.75;
}

/* GPU profile row — glass strip + readable label (avoids dark-on-dark inherit bugs) */
.axonos-profile-picker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.55rem 1rem;
  margin: 0.35rem 0 0.85rem;
  max-width: min(100%, 440px);
  width: 100%;
  padding: 0.62rem 1.15rem;
  box-sizing: border-box;
  background: linear-gradient(
    135deg,
    rgba(78,195,212,.08) 0%,
    rgba(10,20,36,0.55) 100%
  );
  border: 1px solid var(--rule-strong);
  border-radius: 14px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 8px 28px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(8px);
}

.axonos-profile-picker__label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  text-shadow: 0 0 14px rgba(78,195,212,.3), 0 1px 2px rgba(0,0,0,0.85);
  opacity: 0.98;
  flex: 0 0 auto;
}

.axonos-profile-picker__select {
  flex: 1 1 auto;
  min-width: min(100%, 230px);
  max-width: 100%;
  appearance: none;
  -webkit-appearance: none;
  color-scheme: dark;
  font-family: system-ui, "Segoe UI", Roboto, sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  padding: 0.5rem 2.35rem 0.5rem 0.85rem;
  border-radius: 10px;
  cursor: pointer;
  color: var(--axonos-light) !important;
  background-color: rgba(12, 18, 28, 0.92) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234ec3d4' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.65rem center !important;
  border: 1px solid var(--hair-mint) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 4px 14px rgba(0, 0, 0, 0.35) !important;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.15s ease;
}

.axonos-profile-picker__select:hover {
  border-color: var(--cyan) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 4px 18px rgba(42, 68, 120, 0.4) !important;
}

.axonos-profile-picker__select:focus {
  outline: none !important;
  border-color: var(--cyan) !important;
  box-shadow:
    0 0 0 2px rgba(78,195,212,.25),
    0 0 18px rgba(78,195,212,.18),
    inset 0 1px 0 rgba(255,255,255,0.06) !important;
}

.axonos-profile-picker__select:focus-visible {
  outline: 2px solid var(--axonos-accent);
  outline-offset: 2px;
}

/* Option list chrome (best-effort; native menu is OS-controlled) */
.axonos-profile-picker__hint {
  margin: 0.45rem 0 0;
  font-size: 0.82rem;
  line-height: 1.35;
  color: rgba(245, 245, 245, 0.78);
  text-align: center;
  max-width: 28rem;
}

.axonos-profile-picker__select option {
  background: #141a24;
  color: var(--axonos-light);
  font-weight: 500;
  padding: 0.35rem;
}

@media (max-width: 420px) {
  .axonos-profile-picker {
    flex-direction: column;
    text-align: center;
  }

  .axonos-profile-picker__select {
    width: 100%;
    min-width: 0;
  }
}

.axonos-connect-wrapper--busy > #noVNC_connect_button {
  opacity: 0.72;
  pointer-events: none;
  cursor: wait;
}

.axonos-connect-wrapper--busy .axonos-profile-picker__select {
  pointer-events: none;
  opacity: 0.85;
}

.axonos-detached-session-mode .axonos-profile-picker__select:disabled {
  opacity: 1;
  cursor: not-allowed;
  border-color: rgba(100, 180, 140, 0.45);
}

.axonos-connect-wrapper > #noVNC_connect_button {
  width: 100%;
  max-width: 480px;
  box-sizing: border-box;
}



/* Enhanced Connect Button */
.axonos-enhanced-connect {
  background: linear-gradient(135deg, rgba(10,24,44,0.96) 0%, rgba(7,16,26,0.96) 100%) !important;
  border: 1px solid var(--hair-mint) !important;
  border-radius: 20px !important;
  padding: 18px !important;
  margin: 24px 0 !important;
  cursor: pointer !important;
  transition: all 0.35s cubic-bezier(.2,.7,.2,1) !important;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 12px 40px rgba(0,0,0,0.45),
    0 0 0 1px rgba(78,195,212,.08),
    inset 0 1px 0 rgba(255,255,255,0.06) !important;
  backdrop-filter: blur(10px);
}

.axonos-enhanced-connect::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg, transparent 0%, rgba(78,195,212,0.12) 50%, transparent 100%);
  transition: left 0.55s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.axonos-enhanced-connect:hover::before {
  left: 100%;
}

.axonos-enhanced-connect:hover {
  background: linear-gradient(135deg, rgba(14,30,54,0.98) 0%, rgba(10,22,40,0.98) 100%) !important;
  border-color: var(--cyan) !important;
  transform: translateY(-4px) scale(1.015) !important;
  box-shadow:
    0 20px 60px rgba(0,0,0,0.55),
    0 0 30px rgba(78,195,212,.15),
    0 8px 32px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(255,255,255,0.10) !important;
}

.axonos-connect-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: transparent !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 10px;
  backdrop-filter: none;
}

/* Override base.css connect button div styling - remove all borders */
#noVNC_connect_button div {
  border: none !important;
  border-bottom-width: 0 !important;
  background: transparent !important;
  margin: 0 !important;
  box-shadow: none !important;
}

.axonos-connect-icon {
  font-size: 1.7rem;
  animation: rocket-pulse 2s infinite ease-in-out;
}

@keyframes rocket-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.axonos-connect-text {
  font-size: 1.2rem !important;
  font-weight: 800 !important;
  color: var(--ink) !important;
  text-shadow: 0 0 20px rgba(78,195,212,.3), 2px 2px 4px rgba(0,0,0,0.8);
  font-family: var(--font-body);
  letter-spacing: 0.02em;
}

.axonos-connect-subtext {
  font-size: 0.82rem;
  color: var(--ink-mute);
  font-weight: 300;
  letter-spacing: 0.01em;
}

/* Feature Highlights */
.axonos-features {
  display: flex;
  justify-content: space-around;
  margin: 25px 0;
  padding: 20px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.axonos-feature {
  text-align: center;
  flex: 1;
  padding: 10px;
  transition: transform 0.3s ease;
}

.axonos-feature:hover {
  transform: translateY(-5px);
}

.axonos-feature-icon {
  font-size: 2rem;
  margin-bottom: 10px;
  filter: drop-shadow(0 0 8px rgba(126, 172, 224, 0.45));
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-block;
}

.axonos-feature-text {
  font-size: 0.8rem;
  color: var(--ink-mute);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-family: var(--font-mono);
}

/* Scientific Quote */
.axonos-quote {
  text-align: center;
  margin: 25px 0;
  padding: 20px;
  background: rgba(78,195,212,.04);
  border-left: 3px solid var(--cyan);
  border-radius: 8px;
  font-style: italic;
}

.axonos-quote p {
  color: var(--ink-dim);
  font-size: 1.05rem;
  margin: 0 0 10px 0;
  font-weight: 300;
  line-height: 1.5;
}

.axonos-quote cite {
  color: var(--cyan);
  font-size: 0.88rem;
  font-weight: 600;
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
}

/* Override upstream .noVNC_center flex centering: use align-items:stretch +
   margin:auto on child so the dialog scrolls instead of clipping when it
   exceeds the viewport height (typewriter anim, network banner, etc.). */
.noVNC_center:has(#noVNC_connect_dlg) {
  align-items: stretch;
  overflow-y: auto;
  padding: 20px;
}

/* Connect Dialog Container Enhancement */
#noVNC_connect_dlg {
  background: linear-gradient(145deg, rgba(10,20,36,0.97), rgba(7,16,26,0.96)) !important;
  border: 1px solid var(--rule-strong) !important;
  border-radius: 24px !important;
  padding: 40px !important;
  box-shadow:
    0 22px 70px rgba(0,0,0,0.6),
    0 0 0 1px rgba(78,195,212,.08),
    inset 0 1px 0 rgba(255,255,255,0.05) !important;
  backdrop-filter: blur(14px);
  max-width: 600px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  margin: auto;
  position: relative;
  z-index: 10;
}

html:not(.noVNC_connected) #noVNC_connect_dlg {
  max-height: calc(100vh - var(--axonos-prereq-ticker-body-pad-top) - 40px);
}

/* Desktop landscape landing: hero + CTA columns, full-width features/quote below */
@media (min-width: 993px) {
  html:not(.noVNC_connected) .noVNC_center:has(#noVNC_connect_dlg) {
    overflow-x: hidden;
    padding-left: calc(20px + var(--axonos-prereq-ticker-sidebar-clear));
  }

  #noVNC_connect_dlg {
    display: grid;
    grid-template-columns: minmax(0, 1.22fr) minmax(280px, 400px);
    column-gap: 2rem;
    row-gap: 1rem;
    max-width: min(1120px, 93vw);
    align-items: start;
    padding: 32px 40px !important;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
  }

  /* Grid children shrink instead of forcing horizontal overflow */
  #noVNC_connect_dlg > * {
    min-width: 0;
  }

  #noVNC_connect_dlg > .axonos-mobile-notice {
    grid-column: 1 / -1;
  }

  #noVNC_connect_dlg > .axonos-vision-header {
    grid-column: 1;
    grid-row: 1;
    margin-bottom: 0;
    padding: 22px 18px;
    overflow: hidden;
  }

  /* Keep helix inside hero; avoids crowding the CTA gutter */
  #noVNC_connect_dlg .axonos-dna-animation {
    right: auto;
    left: 12px;
    top: 12px;
    opacity: 0.35;
    transform: scale(0.92);
    transform-origin: top left;
  }

  #noVNC_connect_dlg .axonos-main-title {
    font-size: 3.15rem !important;
    letter-spacing: 3px;
  }

  #noVNC_connect_dlg .axonos-tagline {
    font-size: 1.05rem;
  }

  #noVNC_connect_dlg > .axonos-mission {
    grid-column: 1;
    grid-row: 2;
    margin: 0;
    padding: 16px 18px;
  }

  #noVNC_connect_dlg > .axonos-features {
    grid-column: 1 / -1;
    grid-row: 3;
    margin: 0.35rem 0 0;
    padding: 16px 8px;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 22px;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
  }

  #noVNC_connect_dlg > .axonos-quote {
    grid-column: 1 / -1;
    grid-row: 4;
    margin: 0;
    padding: 16px 20px;
    text-align: center;
    border-left: none;
    border-top: 1px solid var(--rule);
    border-radius: 0 0 10px 10px;
  }

  #noVNC_connect_dlg > .axonos-quote p {
    margin-bottom: 8px;
  }

  #noVNC_connect_dlg > .axonos-connect-wrapper {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: stretch;
    justify-self: stretch;
    justify-content: center;
    box-sizing: border-box;
    overflow-x: hidden;
    padding: 1.25rem 1.1rem;
    margin-left: 0;
    border: 1px solid var(--rule-strong);
    border-radius: 16px;
    background: rgba(8,16,28,0.55);
  }



  /* Full width of launch column without exceeding parent */
  .axonos-connect-wrapper > #noVNC_connect_button {
    max-width: none;
  }

  .axonos-connect-wrapper .axonos-enhanced-connect {
    margin-top: 0 !important;
    margin-bottom: 16px !important;
  }

  #noVNC_connect_dlg .axonos-enhanced-connect:hover {
    transform: translateY(-4px) scale(1.02) !important;
  }

  /* Picker stretches in the narrower column */
  .axonos-profile-picker {
    max-width: none;
  }
}

/* Mobile notice: hidden on desktop, shown on small viewports */
.axonos-mobile-notice {
  display: none;
}

.axonos-mobile-notice__title {
  margin: 0 0 0.5em;
  font-size: 1rem;
  font-weight: 700;
  color: var(--cyan);
}

.axonos-mobile-notice__text {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--axonos-light);
  opacity: 0.95;
}

.axonos-fallback-hint {
  margin-top: 1rem;
  font-size: 0.9rem;
  color: var(--axonos-light);
  opacity: 0.9;
}

.axonos-fallback-card {
  position: relative;
}

.axonos-fallback-dismiss {
  position: absolute;
  top: -0.5rem;
  right: -0.5rem;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  color: var(--axonos-light);
  border-radius: 50%;
  width: 2rem;
  height: 2rem;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}

.axonos-fallback-dismiss:hover {
  background: rgba(255,255,255,0.2);
}

/* Cancel (×) button in top-right corner of the connection loader */
.axonos-loader-cancel {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background: transparent;
  border: 1px solid rgba(140,200,220,0.2);
  color: rgba(140,200,220,0.5);
  border-radius: 50%;
  width: 1.75rem;
  height: 1.75rem;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.axonos-loader-cancel:hover {
  color: rgba(140,200,220,0.9);
  border-color: rgba(140,200,220,0.5);
  background: rgba(140,200,220,0.08);
}

/* Timeout message shown after 90 s of waiting */
.axonos-loader-timeout-msg {
  margin-top: 1rem;
  font-size: 0.78rem;
  color: rgba(232,168,90,0.85);
  text-align: center;
}

.axonos-loader-timeout-msg a {
  color: var(--cyan);
  text-decoration: underline;
  cursor: pointer;
}

/* Responsive: show mobile notice (992px = tablets + phones) */
@media (max-width: 992px) {
  .axonos-mobile-notice {
    display: block;
    margin-bottom: 1.25rem;
    padding: 1rem 1.25rem;
    background: rgba(78,195,212,.07);
    border: 1px solid var(--hair-mint);
    border-radius: 8px;
    text-align: center;
  }
  html:not(.noVNC_connected) #noVNC_connect_dlg {
    max-height: calc(100vh - env(safe-area-inset-bottom, 0px) - var(--axonos-prereq-ticker-body-pad-top) - 6rem);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 768px) {
  .axonos-mobile-notice {
    margin-bottom: 1.25rem;
  }

  .axonos-main-title {
    font-size: 2.5rem !important;
  }
  
  .axonos-features {
    flex-direction: column;
    gap: 15px;
  }
  
  .axonos-feature {
    padding: 15px;
  }
  
  #noVNC_connect_dlg {
    padding: 25px !important;
    margin: 10px;
  }
}

/* Loading Animation Enhancement */
.noVNC_loading #noVNC_connect_dlg {
  animation: loading-glow 2s infinite ease-in-out;
}

/* opacity-only: GPU-composited (box-shadow animation forces CPU repaint) */
@keyframes loading-glow {
  0%, 100% { opacity: 0.88; }
  50%       { opacity: 1; }
}

/* AxonOS Connection Loading Animation */
.axonos-connection-loader {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(10,20,36,0.97);
  border-radius: 20px;
  padding: 40px;
  border: 1px solid var(--hair-mint);
  box-shadow:
    0 0 40px rgba(78,195,212,.18),
    0 20px 60px rgba(0,0,0,.6),
    inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter: blur(14px);
}

.axonos-connection-loader.active {
  display: flex;
  animation: loader-appear 0.5s ease-out;
}

@keyframes loader-appear {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

/* Connection loader: rotating rings behind a non-rotating breathing X (matches landing connect icon). */
.axonos-loader-visual {
  position: relative;
  width: 80px;
  height: 80px;
  margin-bottom: 20px;
}

.axonos-loader-visual .axonos-spinner {
  margin-bottom: 0;
}

.axonos-loader-x-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  line-height: 0;
}

.axonos-loader-x-img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  animation: rocket-pulse 2s infinite ease-in-out;
}

/* Circular loading rings (rotate; center logo is layered above in markup) */
.axonos-spinner {
  width: 80px;
  height: 80px;
  border: 4px solid rgba(78,195,212,.15);
  border-top: 4px solid var(--cyan);
  border-radius: 50%;
  animation: axonos-spin 1s linear infinite;
  position: relative;
  margin-bottom: 20px;
}

.axonos-spinner::before {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  border: 2px solid transparent;
  border-top: 2px solid var(--violet);
  border-radius: 50%;
  animation: axonos-spin-reverse 0.8s linear infinite;
}

@keyframes axonos-spin-reverse {
  0% { transform: rotate(360deg); }
  100% { transform: rotate(0deg); }
}

/* Loading Text */
.axonos-loading-text {
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 800;
  text-align: center;
  margin-bottom: 10px;
  text-shadow: 0 0 14px rgba(78,195,212,.45);
  animation: text-pulse 2s ease-in-out infinite;
  letter-spacing: -0.01em;
}

.axonos-loading-subtext {
  color: var(--ink-mute);
  font-family: var(--font-mono);
  font-size: 11px;
  text-align: center;
  opacity: 0.8;
  letter-spacing: 0.06em;
}

@keyframes text-pulse {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 1; }
}

@keyframes dots-animation {
  0%, 20% { content: 'Establishing connection'; }
  25%, 45% { content: 'Establishing connection.'; }
  50%, 70% { content: 'Establishing connection..'; }
  75%, 95% { content: 'Establishing connection...'; }
}

/* Progress Ring Animation */
.axonos-progress-ring {
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  border: 3px solid transparent;
  border-radius: 50%;
  border-top: 3px solid var(--violet);
  animation: progress-ring 3s ease-in-out infinite;
}

/* transform-only: removed border-top-color changes which force CPU repaints */
@keyframes progress-ring {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* AxonDAO subtle grid overlay — Only when not connected */
html:not(.noVNC_connected) body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    linear-gradient(rgba(140,200,220,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(140,200,220,.025) 1px, transparent 1px);
  background-size: 78px 78px;
  -webkit-mask-image: radial-gradient(ellipse 95% 75% at 50% 25%, #000, transparent 95%);
  mask-image: radial-gradient(ellipse 95% 75% at 50% 25%, #000, transparent 95%);
  animation: grid-drift 28s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
  opacity: 0.85;
  will-change: transform;
}

/* Pure-transform keyframes — opacity removed so only compositor properties animate */
@keyframes grid-drift {
  0%, 100% { transform: translate(0, 0); }
  50%       { transform: translate(6px, 4px); }
}

/* Fade in up animation */
@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in-up {
  animation: fade-in-up 0.6s ease-out forwards;
  opacity: 0;
}

/* AxonDAO ambient dot-scatter overlay — Only when not connected */
html:not(.noVNC_connected) body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    radial-gradient(circle at 50% 50%, rgba(180,200,240,0.30) 0.6px, transparent 1.2px);
  background-size: 220px 220px;
  animation: dot-float 28s ease-in-out infinite;
  pointer-events: none;
  z-index: -4;
  opacity: 0.45;
  will-change: transform;
}

/* Pure-transform keyframes — opacity removed so only compositor properties animate */
@keyframes dot-float {
  0%, 100% { transform: translate(0, 0); }
  50%       { transform: translate(5px, -4px); }
}

/* Title glow animation — AxonDAO cyan (opacity-only: GPU-composited, avoids text-shadow repaint) */
@keyframes title-glow {
  0%   { opacity: 0.82; }
  100% { opacity: 1; }
}

/* Accent pulse animation — AxonDAO cyan (opacity-only: GPU-composited) */
@keyframes accent-pulse {
  0%   { opacity: 0.65; }
  100% { opacity: 1; }
}

/* Enhanced feature hover effects */
.axonos-feature:hover .axonos-feature-icon {
  transform: scale(1.2) rotate(5deg);
  filter: drop-shadow(0 0 12px rgba(78,195,212,.55)) brightness(1.2);
}


/* Enhanced connect button active state */
.axonos-enhanced-connect:active {
  transform: translateY(-2px) scale(1.01) !important;
  transition: all 0.1s ease !important;
}

/* Space elements — not part of AxonDAO branding; suppress entirely */
.space-elements,
.rocket,
.spaceship,
.planet,
.comet,
.satellite {
  display: none !important;
}

/* Rocket Animations */
.rocket-1 {
  top: 20%;
  left: -5%;
  animation: rocket-fly-1 25s linear infinite;
}

.rocket-2 {
  top: 70%;
  right: -5%;
  animation: rocket-fly-2 30s linear infinite;
  animation-delay: -10s;
}

@keyframes rocket-fly-1 {
  0% { transform: translateX(0) translateY(0) rotate(15deg); }
  50% { transform: translateX(50vw) translateY(-10vh) rotate(15deg); }
  100% { transform: translateX(110vw) translateY(-20vh) rotate(15deg); }
}

@keyframes rocket-fly-2 {
  0% { transform: translateX(0) translateY(0) rotate(135deg); }
  50% { transform: translateX(-50vw) translateY(10vh) rotate(135deg); }
  100% { transform: translateX(-110vw) translateY(20vh) rotate(135deg); }
}

/* Spaceship Animations */
.spaceship-1 {
  top: 40%;
  left: -10%;
  animation: spaceship-cruise-1 40s linear infinite;
}

.spaceship-2 {
  top: 60%;
  right: -10%;
  animation: spaceship-cruise-2 35s linear infinite;
  animation-delay: -15s;
}

@keyframes spaceship-cruise-1 {
  0% { transform: translateX(0) translateY(0) rotate(0deg); }
  25% { transform: translateX(30vw) translateY(-5vh) rotate(10deg); }
  50% { transform: translateX(60vw) translateY(5vh) rotate(-5deg); }
  75% { transform: translateX(90vw) translateY(-3vh) rotate(5deg); }
  100% { transform: translateX(120vw) translateY(0) rotate(0deg); }
}

@keyframes spaceship-cruise-2 {
  0% { transform: translateX(0) translateY(0) rotate(180deg); }
  25% { transform: translateX(-30vw) translateY(5vh) rotate(170deg); }
  50% { transform: translateX(-60vw) translateY(-5vh) rotate(185deg); }
  75% { transform: translateX(-90vw) translateY(3vh) rotate(175deg); }
  100% { transform: translateX(-120vw) translateY(0) rotate(180deg); }
}

/* Planet Animations */
.planet-1 {
  top: 10%;
  left: 80%;
  animation: planet-float-1 50s ease-in-out infinite;
}

.planet-2 {
  top: 80%;
  left: 10%;
  animation: planet-float-2 45s ease-in-out infinite;
  animation-delay: -20s;
}

@keyframes planet-float-1 {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(180deg); }
}

@keyframes planet-float-2 {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(20px) rotate(-180deg); }
}

/* Comet Animation */
.comet-1 {
  top: 5%;
  left: -10%;
  animation: comet-streak 20s linear infinite;
  animation-delay: -5s;
}

@keyframes comet-streak {
  0% { 
    transform: translateX(0) translateY(0) rotate(-30deg); 
    opacity: 0;
  }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { 
    transform: translateX(120vw) translateY(80vh) rotate(-30deg); 
    opacity: 0;
  }
}

/* Satellite Animation */
.satellite-1 {
  top: 30%;
  left: 70%;
  animation: satellite-orbit 60s linear infinite;
}

@keyframes satellite-orbit {
  0% { transform: rotate(0deg) translateX(100px) rotate(0deg); }
  100% { transform: rotate(360deg) translateX(100px) rotate(-360deg); }
}