/*
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 */
/* Transforms the default noVNC UI into a scientific computing environment theme */

/* 
 * AxonOS Color Palette:
 * Primary: #2E8B57 (Sea Green) - Scientific/research green
 * Secondary: #4682B4 (Steel Blue) - Data visualization blue  
 * Accent: #FFD700 (Gold) - Highlight color for important elements
 * Dark: #1C1C1C (Dark Gray) - Background
 * Light: #F5F5F5 (Off White) - Text on dark backgrounds
 */

/* Orbitron — subset woff2 (Google Fonts v35 latin); aligns with preload in vnc.html */
@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 {
  --axonos-primary: #2E8B57;
  --axonos-secondary: #4682B4;
  --axonos-accent: #FFD700;
  --axonos-dark: #1C1C1C;
  --axonos-light: #F5F5F5;
  --axonos-hover: #32CD32;
  --axonos-shadow: rgba(46, 139, 87, 0.3);
  --axonos-prereq-ticker-strip-h: 44px;
  /* Gutter below the prerequisites strip — keeps hero/dialog clear of floating control rail */
  --axonos-prereq-ticker-sidebar-clear: calc(env(safe-area-inset-left, 0px) + 50px);
  /* Prerequisites strip spans the full viewport header; tighter pad than sidebar-clear */
  --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(24, 32, 48, 0.96);
  border-bottom: 1px solid rgba(70, 130, 180, 0.48);
  box-shadow:
    0 4px 22px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

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(104, 120, 196, 0.35);
  font-family: "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: system-ui, "Segoe UI", Roboto, sans-serif;
  font-size: 0.78rem;
  line-height: 1.35;
  color: rgba(245, 245, 245, 0.95);
  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;
  }
}

@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(96, 128, 192, 0.5) rgba(10, 16, 28, 0.28);
}

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(110, 128, 200, 0.88) 0%,
    rgba(52, 150, 100, 0.58) 100%
  );
}

html:not(.noVNC_connected)::-webkit-scrollbar-thumb:active {
  background: linear-gradient(
    180deg,
    rgba(130, 150, 220, 0.95) 0%,
    rgba(62, 170, 115, 0.72) 100%
  );
}

html:not(.noVNC_connected)::-webkit-scrollbar:hover {
  background: rgba(6, 10, 20, 0.42);
}

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(96, 128, 192, 0.52) rgba(10, 16, 28, 0.32);
}

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(96, 128, 192, 0.52) rgba(10, 16, 28, 0.32);
}

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(96, 128, 192, 0.32) rgba(10, 16, 28, 0.18);
  }

  html:not(.noVNC_connected)::-webkit-scrollbar-thumb {
    background-color: rgba(88, 118, 170, 0.32);
  }

  html:not(.noVNC_connected) #noVNC_connect_dlg {
    scrollbar-color: rgba(96, 128, 192, 0.36) rgba(10, 16, 28, 0.22);
  }

  html:not(.noVNC_connected) #noVNC_connect_dlg::-webkit-scrollbar-thumb {
    background-color: rgba(88, 118, 170, 0.38);
  }

  html:not(.noVNC_connected) .noVNC_center:has(#noVNC_connect_dlg) {
    scrollbar-color: rgba(96, 128, 192, 0.36) rgba(10, 16, 28, 0.22);
  }

  html:not(.noVNC_connected) .noVNC_center:has(#noVNC_connect_dlg)::-webkit-scrollbar-thumb {
    background-color: rgba(88, 118, 170, 0.38);
  }
}

@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);
  background: 
    radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%),
    radial-gradient(circle at 20% 20%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(255, 119, 198, 0.2) 0%, transparent 50%),
    radial-gradient(circle at 40% 40%, rgba(120, 219, 255, 0.15) 0%, transparent 50%) !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(--axonos-dark) !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(--axonos-dark) !important;
  border-bottom-right-radius: 20px !important;
  overflow: hidden !important;
  box-sizing: border-box;
}

/* Control bar styling */
#noVNC_control_bar {
  background: linear-gradient(180deg, #0f4f63 0%, #2d2f6f 100%) !important;
  border: 2px solid rgba(104, 120, 196, 0.68);
  box-shadow: 0 6px 22px rgba(42, 58, 122, 0.42) !important;
}

#noVNC_control_bar.noVNC_open {
  box-shadow: 0 10px 28px rgba(54, 74, 148, 0.5) !important;
}

/* Control bar handle */
#noVNC_control_bar_handle {
  background: linear-gradient(180deg, #166a82 0%, #3f428f 100%) !important;
  border: 1px solid rgba(128, 141, 212, 0.72);
  box-shadow: 0 4px 14px rgba(52, 73, 152, 0.45) !important;
}

#noVNC_control_bar_handle:hover {
  background: linear-gradient(180deg, #1f7d98 0%, #5359ad 100%) !important;
}

/* Panel headings */
.noVNC_panel .noVNC_heading {
  background: linear-gradient(135deg, var(--axonos-primary), var(--axonos-secondary)) !important;
  color: var(--axonos-light) !important;
  border: 1px solid var(--axonos-accent);
  text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

/* 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(28, 28, 28, 0.95) !important;
  border: 2px solid var(--axonos-primary);
  border-radius: 10px;
  box-shadow: 0 8px 25px var(--axonos-shadow);
}

/* 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(--axonos-accent);
  font-size: 12px;
  opacity: 0.92;
  font-family: "Orbitron", monospace;
  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(--axonos-light);
  font-size: 10px;
  opacity: 0.72;
  font-family: "Orbitron", monospace;
}

/* Animation for scientific feel */
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 var(--axonos-shadow); }
  70% { box-shadow: 0 0 0 10px rgba(46, 139, 87, 0); }
  100% { box-shadow: 0 0 0 0 rgba(46, 139, 87, 0); }
}

#noVNC_connect_button {
  animation: pulse 2s 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: #2C2C2C !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(--axonos-accent);
    font-size: 1.5em;
    margin-bottom: 10px;
    font-family: 'Orbitron', sans-serif;
}

.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(46, 139, 87, 0.2);
    padding: 4px 8px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    color: var(--axonos-accent);
}

#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: 'Courier New', monospace;
    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(28, 28, 28, 0.95);
    border: 2px solid var(--axonos-primary);
    border-radius: 10px;
    padding: 20px;
    margin: 20px 0;
    box-shadow: 0 8px 25px var(--axonos-shadow);
}

.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: linear-gradient(135deg, var(--axonos-primary), var(--axonos-secondary));
    border: 2px solid var(--axonos-accent);
    color: var(--axonos-light);
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    transition: all 0.3s;
}

.axonos-verify-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--axonos-hover), var(--axonos-primary));
    transform: translateY(-2px);
    box-shadow: 0 6px 20px var(--axonos-shadow);
}

.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(46, 139, 87, 0.2);
    border: 2px solid #2e8b57;
    color: #90ee90;
}

.axonos-wallet-status.not-verified,
.axonos-wallet-status.error {
    background: rgba(220, 20, 60, 0.2);
    border: 2px solid #dc143c;
    color: #ff6b6b;
}

.axonos-wallet-status.verifying {
    background: rgba(255, 215, 0, 0.2);
    border: 2px solid #ffd700;
    color: #ffd700;
}

/* AXGT usage overlay (during VNC session: warning or locked) */
.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(30, 30, 30, 0.98);
    border: 2px solid var(--axonos-accent);
    color: var(--axonos-light);
}
.axonos-usage-overlay--locked .axonos-usage-overlay__panel {
    background: rgba(30, 30, 30, 0.98);
    border: 2px solid #dc143c;
    color: var(--axonos-light);
}
.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(--axonos-light) !important;
    background: transparent !important;
    border: 2px solid rgba(220, 20, 60, 0.85) !important;
    box-shadow: none;
}
.axonos-usage-overlay__btn--exit:hover:not(:disabled) {
    border-color: #ff6b6b !important;
    background: rgba(220, 20, 60, 0.12) !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(28, 28, 28, 0.6);
    border: 1px solid rgba(70, 130, 180, 0.4);
    border-radius: 8px;
    text-align: left;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--axonos-light);
}
.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(0, 0, 0, 0.25);
    border-radius: 6px;
    color: #F5F5F5;
    border-left: 3px solid var(--axonos-accent);
}
.axonos-wallet-prereqs__title {
    margin: 0 0 8px 0;
    font-weight: 600;
    font-size: 0.9rem;
    color: #F5F5F5;
}
.axonos-wallet-prereqs__list {
    margin: 0;
    padding-left: 1.2em;
    font-size: 0.9rem;
    line-height: 1.5;
    color: #F5F5F5;
}
.axonos-wallet-prereqs__list li {
    margin: 4px 0;
    word-spacing: 0.25em;
    color: #F5F5F5;
}
.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: 8px;
    text-align: center;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
    background: rgba(30, 30, 30, 0.98);
    border: 2px solid var(--axonos-accent);
    color: var(--axonos-light);
}
.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(--axonos-accent);
}
.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(--axonos-light) !important;
    background: linear-gradient(145deg, rgba(46, 139, 87, 0.35) 0%, rgba(28, 28, 28, 0.95) 45%, #141414 100%) !important;
    border: 2px solid var(--axonos-accent) !important;
    box-shadow:
        0 0 0 1px rgba(255, 215, 0, 0.15),
        0 4px 14px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    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: #ffe066 !important;
    box-shadow:
        0 0 0 1px rgba(255, 215, 0, 0.35),
        0 6px 20px rgba(255, 215, 0, 0.12),
        0 8px 24px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    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(--axonos-accent);
    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: #2C2C2C !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: generic `button` rules elsewhere in the page (e.g. noVNC/base CSS) can
   override our gradient buttons; !important keeps copy readable on the purple background. */
.axonos-connect-wallet-btn,
.axonos-connect-wallet-btn:visited {
  color: #f8fafc !important;
  -webkit-text-fill-color: #f8fafc !important;
}

.axonos-connect-wallet-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  white-space: nowrap;
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 50%, #4338ca 100%) !important;
  border: 2px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.4) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease !important;
}

.axonos-connect-wallet-btn::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F5F5F5' 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;
  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.5) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
  background: linear-gradient(135deg, #818cf8 0%, #6366f1 50%, #4f46e5 100%) !important;
}

.axonos-connect-wallet-btn:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 10px rgba(99, 102, 241, 0.4) !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: #2C2C2C !important;
  background: #2C2C2C !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(28, 28, 28, 0.95) !important;
  border: 2px solid var(--axonos-primary) !important;
  border-radius: 10px !important;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  max-width: min(600px, 90vw);
}

#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-card__title {
  text-align: center;
  margin-bottom: 12px;
}
.axonos-wallet-card__title h2 {
  color: var(--axonos-accent);
  font-size: 1.35rem;
  margin: 0 0 6px 0;
  font-family: 'Orbitron', sans-serif;
}
.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(--axonos-accent);
  font-weight: 600;
}
.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.8rem !important;
  background: var(--axonos-secondary) !important;
  color: var(--axonos-light) !important;
  border: 1px solid var(--axonos-accent) !important;
  border-radius: 6px !important;
  cursor: pointer !important;
}
.axonos-contract-copy-btn:hover {
  background: var(--axonos-primary) !important;
}
.axonos-contract-etherscan {
  color: var(--axonos-accent);
  text-decoration: none;
  margin-left: auto;
}
.axonos-contract-etherscan:hover {
  text-decoration: underline;
}
.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(255, 255, 255, 0.2);
  border-top-color: var(--axonos-accent);
  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%;
  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: 1rem !important;
  font-weight: 600 !important;
  color: #fff !important;
  background: linear-gradient(135deg, #16a34a 0%, #15803d 100%) !important;
  border: 2px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}
.axonos-continue-btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 14px rgba(34, 197, 94, 0.4) !important;
}
.axonos-get-axgt-btn,
.axonos-install-metamask-btn {
  display: inline-block;
  padding: 10px 20px !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  color: var(--axonos-light) !important;
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
  border: 2px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: transform 0.15s ease !important;
}
.axonos-get-axgt-btn:hover,
.axonos-install-metamask-btn:hover {
  transform: translateY(-1px) !important;
}
.axonos-switch-network-btn {
  display: inline-block;
  padding: 10px 20px !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  color: var(--axonos-light) !important;
  background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%) !important;
  border: 2px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: transform 0.15s ease !important;
}
.axonos-switch-network-btn:hover {
  transform: translateY(-1px) !important;
}

/* Settings panel dark theme styling */
#noVNC_settings {
  background-color: rgba(28, 28, 28, 0.95) !important;
  border: 2px solid var(--axonos-primary) !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 25px var(--axonos-shadow) !important;
}

/* Settings panel inputs */
#noVNC_settings input[type="text"],
#noVNC_settings input[type="number"],
#noVNC_settings input[type="range"],
#noVNC_settings select {
  background-color: var(--axonos-dark) !important;
  border: 2px solid var(--axonos-secondary) !important;
  color: var(--axonos-light) !important;
  border-radius: 5px !important;
  padding: 6px 8px !important;
  margin: 2px 0 !important;
  font-family: monospace !important;
}

#noVNC_settings input[type="text"]:focus,
#noVNC_settings input[type="number"]:focus,
#noVNC_settings select:focus {
  border-color: var(--axonos-accent) !important;
  box-shadow: 0 0 8px var(--axonos-shadow) !important;
  background-color: #2C2C2C !important;
  outline: none !important;
}

/* Range sliders */
#noVNC_settings input[type="range"] {
  background: var(--axonos-dark) !important;
  border: 1px solid var(--axonos-secondary) !important;
  border-radius: 5px !important;
  height: 8px !important;
}

#noVNC_settings input[type="range"]::-webkit-slider-thumb {
  background: var(--axonos-accent) !important;
  border: 2px solid var(--axonos-primary) !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  height: 18px !important;
  width: 18px !important;
}

#noVNC_settings input[type="range"]::-moz-range-thumb {
  background: var(--axonos-accent) !important;
  border: 2px solid var(--axonos-primary) !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  height: 18px !important;
  width: 18px !important;
}

/* Checkboxes */
#noVNC_settings input[type="checkbox"] {
  accent-color: var(--axonos-accent) !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, var(--axonos-primary), var(--axonos-secondary)) !important;
  color: var(--axonos-light) !important;
  border: 1px solid var(--axonos-accent) !important;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.5) !important;
  border-radius: 5px !important;
  padding: 8px !important;
  margin-bottom: 10px !important;
}

/* Expander sections */
#noVNC_settings .noVNC_expander {
  background-color: var(--axonos-secondary) !important;
  color: var(--axonos-light) !important;
  border: 1px solid var(--axonos-primary) !important;
  border-radius: 5px !important;
  padding: 6px 10px !important;
  cursor: pointer !important;
  font-weight: bold !important;
}

#noVNC_settings .noVNC_expander:hover {
  background-color: var(--axonos-hover) !important;
}

/* Version info */
#noVNC_settings .noVNC_version {
  color: var(--axonos-accent) !important;
  font-weight: bold !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: #2C2C2C !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='%23FFD700' 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: #2C2C2C !important;
  background: #2C2C2C !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(--axonos-secondary) !important;
  border-radius: 8px !important;
  background: linear-gradient(135deg, rgba(46, 139, 87, 0.25), rgba(70, 130, 180, 0.25)) !important;
  color: var(--axonos-light) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-align: center !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease !important;
}

#noVNC_restart_session_button:hover {
  border-color: var(--axonos-accent) !important;
  background: linear-gradient(135deg, rgba(50, 205, 50, 0.28), rgba(70, 130, 180, 0.35)) !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(46, 139, 87, 0.15), rgba(70, 130, 180, 0.15));
  border-radius: 20px;
  overflow: hidden;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.axonos-main-title {
  font-size: 4rem !important;
  font-weight: 900 !important;
  color: var(--axonos-light) !important;
  text-shadow: 
    0 0 30px var(--axonos-primary), 
    0 0 60px var(--axonos-primary),
    2px 2px 8px rgba(0,0,0,0.8) !important;
  margin: 0 0 15px 0 !important;
  font-family: "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.2rem;
  color: var(--axonos-secondary);
  font-weight: 300;
  margin: 0 0 15px 0;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-family: "Orbitron", monospace;
  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.04em;
  margin: 0 auto 12px;
  max-width: 36rem;
  padding: 0.45rem 0.75rem;
  border-radius: 999px;
  line-height: 1.35;
  font-family: "Orbitron", system-ui, sans-serif;
}

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

.axonos-network-banner--mainnet {
  color: rgba(180, 255, 210, 0.92);
  background: rgba(46, 139, 87, 0.2);
  border: 1px solid rgba(100, 200, 140, 0.35);
}

.axonos-network-banner--testnet {
  color: rgba(255, 220, 160, 0.98);
  background: rgba(180, 100, 20, 0.25);
  border: 1px solid rgba(255, 180, 80, 0.45);
  box-shadow: 0 0 20px rgba(255, 160, 60, 0.12);
}

.axonos-network-banner--other {
  color: rgba(255, 200, 160, 0.95);
  background: rgba(120, 60, 30, 0.3);
  border: 1px solid rgba(255, 140, 80, 0.4);
}

.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: rgba(160, 220, 180, 0.95);
}

.axonos-wallet-network-line--testnet {
  color: rgba(255, 200, 120, 0.98);
}

.axonos-wallet-network-line--other {
  color: rgba(255, 180, 130, 0.95);
}

/* 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(--axonos-accent), transparent),
    radial-gradient(2px 2px at 40px 70px, var(--axonos-primary), transparent),
    radial-gradient(1px 1px at 90px 40px, var(--axonos-secondary), transparent),
    radial-gradient(1px 1px at 130px 80px, var(--axonos-accent), transparent),
    radial-gradient(2px 2px at 160px 30px, var(--axonos-primary), transparent);
  background-size: 200px 100px;
  animation: particles-float 20s infinite linear;
  opacity: 0.3;
  pointer-events: none;
}

@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(--axonos-accent) 0%, transparent 50%, var(--axonos-accent) 100%);
  animation: dna-twist 3s infinite ease-in-out;
}

.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(94, 129, 172, 0.08);
  border: 1px solid rgba(136, 169, 212, 0.25);
  border-radius: 10px;
}

.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(--axonos-secondary);
  margin: 0;
  font-style: italic;
  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(72, 187, 120, 0.14) 0%, rgba(24, 38, 62, 0.5) 100%);
  border: 1px solid rgba(104, 211, 145, 0.45);
  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: "Orbitron", system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #9ae6b4;
}

.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(94, 129, 172, 0.12) 0%,
    rgba(24, 38, 62, 0.45) 100%
  );
  border: 1px solid rgba(136, 169, 212, 0.38);
  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: "Orbitron", system-ui, sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--axonos-light);
  text-shadow:
    0 0 18px rgba(120, 210, 255, 0.35),
    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='%2378b4e8' 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 rgba(120, 176, 228, 0.45) !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: rgba(255, 215, 0, 0.45) !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(--axonos-accent) !important;
  box-shadow:
    0 0 0 2px rgba(46, 139, 87, 0.35),
    0 0 20px rgba(255, 215, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !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, #1c5a6d 0%, #34397f 100%) !important;
  border: none !important;
  border-radius: 20px !important;
  padding: 18px !important;
  margin: 24px 0 !important;
  cursor: pointer !important;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative;
  overflow: hidden;
  box-shadow: 
    0 12px 40px rgba(42, 68, 120, 0.42),
    0 4px 16px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  backdrop-filter: blur(10px);
}

.axonos-enhanced-connect::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s;
}

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

.axonos-enhanced-connect:hover {
  background: linear-gradient(135deg, #0f2a4d 0%, #1a3b6b 100%) !important;
  transform: translateY(-5px) scale(1.03) !important;
  box-shadow: 
    0 20px 60px rgba(20, 44, 84, 0.58),
    0 0 80px rgba(54, 96, 168, 0.2),
    0 8px 32px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.3) !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: 700 !important;
  color: var(--axonos-light) !important;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
  font-family: "Orbitron", sans-serif;
  letter-spacing: 1px;
}

.axonos-connect-subtext {
  font-size: 0.8rem;
  color: rgba(245, 245, 245, 0.8);
  font-weight: 300;
}

/* Feature Highlights */
.axonos-features {
  display: flex;
  justify-content: space-around;
  margin: 25px 0;
  padding: 20px 0;
  border-top: 1px solid rgba(70, 130, 180, 0.3);
  border-bottom: 1px solid rgba(70, 130, 180, 0.3);
}

.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.85rem;
  color: var(--axonos-light);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Scientific Quote */
.axonos-quote {
  text-align: center;
  margin: 25px 0;
  padding: 20px;
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.05), rgba(70, 130, 180, 0.05));
  border-left: 4px solid var(--axonos-accent);
  border-radius: 8px;
  font-style: italic;
}

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

.axonos-quote cite {
  color: var(--axonos-accent);
  font-size: 0.9rem;
  font-weight: 500;
}

/* 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(18, 24, 34, 0.92), rgba(12, 18, 28, 0.9)) !important;
  border: none !important;
  border-radius: 24px !important;
  padding: 40px !important;
  box-shadow: 
    0 22px 70px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(160, 185, 220, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(10px);
  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 rgba(70, 130, 180, 0.32);
    border-bottom: 1px solid rgba(70, 130, 180, 0.22);
  }

  #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 rgba(255, 215, 0, 0.12);
    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 rgba(136, 169, 212, 0.28);
    border-radius: 16px;
    background: rgba(8, 14, 24, 0.5);
  }



  /* 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: 600;
  color: var(--axonos-accent);
}

.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;
}

/* 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(46, 139, 87, 0.15);
    border: 1px solid var(--axonos-secondary);
    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;
}

@keyframes loading-glow {
  0%, 100% { box-shadow: 0 22px 70px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(160, 185, 220, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.08); }
  50% { box-shadow: 0 26px 82px rgba(0, 0, 0, 0.62), 0 0 0 1px rgba(190, 215, 255, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.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(0, 0, 0, 0.9);
  border-radius: 20px;
  padding: 40px;
  border: 2px solid var(--axonos-primary);
  box-shadow: 
    0 0 50px rgba(46, 139, 87, 0.4),
    inset 0 0 30px rgba(46, 139, 87, 0.1);
  backdrop-filter: blur(10px);
}

.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(46, 139, 87, 0.2);
  border-top: 4px solid var(--axonos-primary);
  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(--axonos-accent);
  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(--axonos-light);
  font-family: "Orbitron", monospace;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  margin-bottom: 10px;
  text-shadow: 0 0 10px var(--axonos-primary);
  animation: text-pulse 2s ease-in-out infinite;
}

.axonos-loading-subtext {
  color: var(--axonos-accent);
  font-family: "Orbitron", monospace;
  font-size: 12px;
  text-align: center;
  opacity: 0.8;
  animation: dots-animation 1.5s ease-in-out infinite;
}

@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(--axonos-secondary);
  animation: progress-ring 3s ease-in-out infinite;
}

@keyframes progress-ring {
  0% { 
    transform: rotate(0deg);
    border-top-color: var(--axonos-secondary);
  }
  25% { 
    border-top-color: var(--axonos-primary);
  }
  50% { 
    transform: rotate(180deg);
    border-top-color: var(--axonos-accent);
  }
  75% { 
    border-top-color: var(--axonos-primary);
  }
  100% { 
    transform: rotate(360deg);
    border-top-color: var(--axonos-secondary);
  }
}

/* Animated Stars Background - Only when not connected */
html:not(.noVNC_connected) body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    radial-gradient(3px 3px at 20px 30px, #fff, transparent),
    radial-gradient(2px 2px at 40px 70px, #fff, transparent),
    radial-gradient(2px 2px at 90px 40px, #fff, transparent),
    radial-gradient(3px 3px at 130px 80px, #fff, transparent),
    radial-gradient(2px 2px at 160px 30px, #fff, transparent),
    radial-gradient(1px 1px at 200px 120px, #fff, transparent),
    radial-gradient(3px 3px at 240px 60px, #fff, transparent),
    radial-gradient(2px 2px at 280px 100px, #fff, transparent),
    radial-gradient(2px 2px at 320px 40px, #fff, transparent),
    radial-gradient(1px 1px at 360px 140px, #fff, transparent),
    radial-gradient(2px 2px at 50px 150px, #fff, transparent),
    radial-gradient(3px 3px at 300px 180px, #fff, transparent),
    radial-gradient(1px 1px at 180px 200px, #fff, transparent),
    radial-gradient(2px 2px at 380px 90px, #fff, transparent);
  background-size: 400px 250px;
  animation: stars-move 25s linear infinite;
  pointer-events: none;
  z-index: 1;
  opacity: 0.8;
}

@keyframes stars-move {
  from { transform: translateX(0); }
  to { transform: translateX(-400px); }
}

/* Twinkling Stars Layer - Only when not connected */
html:not(.noVNC_connected) #noVNC_container::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    radial-gradient(1px 1px at 50px 50px, #fff, transparent),
    radial-gradient(1px 1px at 150px 150px, #fff, transparent),
    radial-gradient(1px 1px at 250px 100px, #fff, transparent),
    radial-gradient(1px 1px at 350px 200px, #fff, transparent),
    radial-gradient(1px 1px at 450px 50px, #fff, transparent);
  background-size: 500px 300px;
  animation: twinkle 3s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: -2;
}

@keyframes twinkle {
  0% { opacity: 0.3; }
  100% { opacity: 1; }
}

/* 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;
}

/* Animated Planets and Space Objects - 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 15% 20%, rgba(255, 100, 100, 0.3) 0%, transparent 8%),
    radial-gradient(circle at 85% 80%, rgba(100, 150, 255, 0.3) 0%, transparent 12%),
    radial-gradient(circle at 70% 30%, rgba(255, 200, 100, 0.2) 0%, transparent 6%),
    radial-gradient(circle at 30% 70%, rgba(150, 255, 150, 0.2) 0%, transparent 10%),
    radial-gradient(circle at 90% 10%, rgba(255, 150, 255, 0.2) 0%, transparent 4%);
  background-size: 800px 600px;
  animation: planets-orbit 60s infinite linear;
  pointer-events: none;
  z-index: -4;
}

@keyframes planets-orbit {
  0% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(-20px, -10px) rotate(90deg); }
  50% { transform: translate(-10px, 20px) rotate(180deg); }
  75% { transform: translate(20px, 10px) rotate(270deg); }
  100% { transform: translate(0, 0) rotate(360deg); }
}

/* New title glow animation */
@keyframes title-glow {
  0% { 
    text-shadow: 
      0 0 30px var(--axonos-primary), 
      0 0 60px var(--axonos-primary),
      2px 2px 8px rgba(0,0,0,0.8);
  }
  100% { 
    text-shadow: 
      0 0 50px var(--axonos-primary), 
      0 0 100px var(--axonos-primary),
      2px 2px 8px rgba(0,0,0,0.8);
  }
}

/* Accent pulse animation */
@keyframes accent-pulse {
  0% { 
    text-shadow: 
      0 0 40px var(--axonos-accent),
      0 0 80px var(--axonos-accent);
  }
  100% { 
    text-shadow: 
      0 0 60px var(--axonos-accent),
      0 0 120px var(--axonos-accent);
  }
}

/* Enhanced feature hover effects */
.axonos-feature:hover .axonos-feature-icon {
  transform: scale(1.2) rotate(5deg);
  filter: drop-shadow(0 0 15px var(--axonos-primary)) brightness(1.2);
}

/* Improved connect button shimmer */
.axonos-enhanced-connect::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.6s ease;
}

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

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

/* Space Elements - Only when not connected */
html:not(.noVNC_connected) .space-elements {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 2;
}

/* Hide space elements when connected */
html.noVNC_connected .space-elements {
  display: none;
}

.rocket, .spaceship, .planet, .comet, .satellite {
  position: absolute;
  font-size: 2.5rem;
  filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.8));
  z-index: 3;
}

/* 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); }
}