/*
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 — AxonOS v2 design (ported from axonos-web) */
/* Near-black background, purple primary / teal success accents, BrutalType display type */

/*
 * AxonOS v2 Design Tokens (applied via CSS custom properties in :root):
 * --cyan:    #7b6cff  — primary accent (purple; token name kept for compatibility)
 * --violet:  #8b7cff  — secondary accent (soft purple)
 * --warm:    #f2c14e  — warning / gold
 * --green:   #4fe0c0  — success / live / teal
 * --coral:   #ff5f57  — error / danger
 * --bg-0:    #080910  — primary background (darkest)
 * --ink:     #e9ebf2  — primary text
 * Fonts: Hanken Grotesk (body, Google Fonts w/ system fallback) ·
 *        BrutalType (display, local woff2) · JetBrains Mono (data, Google Fonts)
 */

/* 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: #080910;
  --bg-1: #0d0e18;
  --bg-2: #12131f;
  --panel-2: #161726;
  --ink: #e9ebf2;
  --ink-dim: rgba(199, 204, 224, 0.92);
  --ink-mute: rgba(166, 172, 194, 0.62);
  --ink-faint: rgba(166, 172, 194, 0.4);
  --cyan: #7b6cff;
  --violet: #8b7cff;
  --warm: #f2c14e;
  --pink: #b79bff;
  --coral: #ff5f57;
  --green: #4fe0c0;
  --mint: #7b6cff;
  --mint-soft: #9b8cff;
  --orange: #f2c14e;
  --violet-fg: #b7a6ff;
  --violet-bg: rgba(120, 100, 200, 0.16);
  --rule: rgba(255, 255, 255, 0.06);
  --rule-strong: rgba(255, 255, 255, 0.1);
  --hair: rgba(255, 255, 255, 0.06);
  --hair-2: rgba(255, 255, 255, 0.1);
  --hair-mint: rgba(123, 108, 255, 0.35);
  --grad-primary: linear-gradient(180deg, #8b7cff, #6a57f2);
  --shadow-primary: 0 12px 30px -12px rgba(123, 108, 255, 0.9);
  --font-body: 'Hanken Grotesk', -apple-system, system-ui, sans-serif;
  --font-display: 'BrutalType', 'Brutal', 'Hanken Grotesk', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ── AxonOS operational aliases (map to AxonDAO tokens) ── */
  --axonos-primary: #7b6cff;
  --axonos-secondary: #8b7cff;
  --axonos-accent: #7b6cff;
  --axonos-warm: #f2c14e;
  --axonos-dark: #080910;
  --axonos-dark-2: #0d0e18;
  --axonos-dark-3: #12131f;
  --axonos-light: #e9ebf2;
  --axonos-hover: #4fe0c0;
  --axonos-shadow: rgba(123, 108, 255, 0.25);

  /* ── Layout ── */
  /* 0px: ticker strip is hidden in the v2 design; dependent offsets (body
     padding, version pill, sticky rail top) collapse with it. */
  --axonos-prereq-ticker-strip-h: 0px;
  --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(8, 9, 16, 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);
}

/* v2 design: the ticker strip is retired — the topbar/hero carry the network
   and billing context now. Markup + JS stay (harmless on a hidden element). */
html:not(.noVNC_connected) .axonos-prerequisites-ticker {
  display: none;
}

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(123, 108, 255, 0.28);
  font-family: var(--font-display);
  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%;
  position: relative;
}

/* Fading edge overlays to mimic mask-image without CPU layout/paint overhead */
.axonos-prerequisites-ticker__marquee-wrap::before,
.axonos-prerequisites-ticker__marquee-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1.5rem;
  z-index: 2;
  pointer-events: none;
}

.axonos-prerequisites-ticker__marquee-wrap::before {
  left: 0;
  background: linear-gradient(90deg, rgba(8, 9, 16, 0.97) 0%, transparent 100%);
}

.axonos-prerequisites-ticker__marquee-wrap::after {
  right: 0;
  background: linear-gradient(270deg, rgba(8, 9, 16, 0.97) 0%, transparent 100%);
}

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

.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: translate3d(0, 0, 0);
  }

  100% {
    transform: translate3d(-50%, 0, 0);
  }
}

@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: 0 0 110px !important;
    width: 110px !important;
    flex-basis: 110px !important;
    font-size: 0.65rem !important;
    letter-spacing: 0.02em !important;
    padding-right: 0.25rem !important;
  }
}

@media (max-width: 440px) {
  #noVNC_connect_dlg {
    max-width: 100% !important;
  }
}

/* Landing scrollbars — themed; WebKit thumbs hidden until the scrollbar groove is hovered */
html:not(.noVNC_connected) {
  scrollbar-width: thin;
  scrollbar-color: rgba(123, 108, 255, 0.25) rgba(8, 9, 16, 0.1);
  overflow-y: auto !important;
  background-color: #080910 !important;
  color-scheme: dark;
}

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: rgba(8, 9, 16, 0.1);
}

html:not(.noVNC_connected)::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg,
      rgba(123, 108, 255, 0.25) 0%,
      rgba(139, 124, 255, 0.18) 100%);
  border-radius: 5px;
}

html:not(.noVNC_connected)::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg,
      rgba(123, 108, 255, 0.45) 0%,
      rgba(139, 124, 255, 0.3) 100%) !important;
}

html:not(.noVNC_connected)::-webkit-scrollbar-thumb:active {
  background: linear-gradient(180deg,
      rgba(123, 108, 255, 0.6) 0%,
      rgba(139, 124, 255, 0.45) 100%) !important;
}

html:not(.noVNC_connected) #noVNC_connect_dlg {
  scrollbar-width: thin;
  scrollbar-color: rgba(123, 108, 255, 0.25) rgba(8, 9, 16, 0.1);
}

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: linear-gradient(180deg,
      rgba(123, 108, 255, 0.25) 0%,
      rgba(139, 124, 255, 0.18) 100%);
  border-radius: 4px;
}

html:not(.noVNC_connected) #noVNC_connect_dlg::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg,
      rgba(123, 108, 255, 0.45) 0%,
      rgba(139, 124, 255, 0.3) 100%) !important;
}

html:not(.noVNC_connected) .noVNC_center {
  scrollbar-width: thin;
  scrollbar-color: rgba(123, 108, 255, 0.25) rgba(8, 9, 16, 0.1);
}

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

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

html:not(.noVNC_connected) .noVNC_center::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg,
      rgba(123, 108, 255, 0.25) 0%,
      rgba(139, 124, 255, 0.18) 100%);
  border-radius: 4px;
}

html:not(.noVNC_connected) .noVNC_center::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg,
      rgba(123, 108, 255, 0.45) 0%,
      rgba(139, 124, 255, 0.3) 100%) !important;
}

/* Pause decorative landing-page animations during active scroll */
.axonos-scroll-paused.axonos-particles {
  animation-play-state: paused !important;
}

.axonos-scroll-paused.axonos-dna-animation::before,
.axonos-scroll-paused.axonos-dna-animation::after {
  animation-play-state: paused !important;
}

.axonos-scroll-paused.axonos-main-title {
  animation-play-state: paused !important;
}

.axonos-scroll-paused.axonos-highlight {
  animation-play-state: paused !important;
}

/* Pause animations when elements go out of view */
.axonos-anim-out-of-view,
.axonos-anim-out-of-view::before,
.axonos-anim-out-of-view::after {
  animation-play-state: paused !important;
}

@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);

  /* Fallback and background-color */
  background-color: #080910 !important;

  /* AxonDAO ambient background — deep navy + subtle cyan/violet radial glows (omitting redundant 'ellipse' keyword with length sizes) */
  background-image:
    radial-gradient(900px 700px at 85% 18%, rgba(123, 108, 255, 0.1), transparent 60%),
    radial-gradient(1000px 800px at 12% 82%, rgba(139, 124, 255, 0.1), transparent 65%),
    linear-gradient(180deg, #080910 0%, #0a0b13 55%, #07080e 100%) !important;

  overflow-x: hidden;
  overflow-y: visible !important;
  position: relative;
  min-height: 100vh;
}

html:not(.noVNC_connected) body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    linear-gradient(rgba(123, 108, 255, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(123, 108, 255, 0.018) 1px, transparent 1px);
  background-size: 45px 45px;
  background-position: center;
  pointer-events: none;
  z-index: 1;
}

/* 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 {
  display: none !important;
  background: transparent !important;
  border-bottom-right-radius: 20px !important;
}

html.noVNC_connected #noVNC_container {
  display: block !important;
  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(13, 14, 24, 0.98) 0%, rgba(8, 9, 16, 0.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(123, 108, 255, 0.08) !important;
}

#noVNC_control_bar.noVNC_open {
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(123, 108, 255, 0.12) !important;
}

/* Control bar handle */
#noVNC_control_bar_handle {
  background: linear-gradient(180deg, rgba(18, 19, 31, 0.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(123, 108, 255, 0.14), rgba(139, 124, 255, 0.1)) !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(180deg, #8b7cff 0%, #6a57f2 100%) !important;
  border: none;
  color: var(--axonos-light) !important;
  box-shadow: 0 14px 34px -14px rgba(123, 108, 255, 0.95) !important;
}

#noVNC_connect_button:hover {
  background: linear-gradient(180deg, #9b8cff 0%, #7867f6 100%) !important;
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -14px rgba(123, 108, 255, 1) !important;
}

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

/* Panels */
.noVNC_panel {
  background-color: rgba(13, 14, 24, 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(123, 108, 255, 0.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,
html.noVNC_connected .axonos-footer-banner {
  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(123, 108, 255, 0.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(13, 14, 24, 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(123, 108, 255, 0.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(123, 108, 255, 0.1);
  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(123, 108, 255, 0.18);
  border-color: var(--cyan);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(123, 108, 255, 0.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(79, 224, 192, 0.15);
  border: 1px solid rgba(79, 224, 192, 0.4);
  color: var(--green);
  border-radius: 8px;
}

.axonos-wallet-status.not-verified,
.axonos-wallet-status.error {
  background: rgba(255, 95, 87, 0.12);
  border: 1px solid rgba(255, 95, 87, 0.4);
  color: var(--coral);
  border-radius: 8px;
}

.axonos-wallet-status.verifying {
  background: rgba(242, 193, 78, 0.12);
  border: 1px solid rgba(242, 193, 78, 0.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-flex;
  align-items: center;
}

.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(242, 193, 78, 0.98);
}

/* Red + pulse in the final minute */
.axonos-session-timer--critical .axonos-session-timer__value {
  color: rgba(255, 95, 87, 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;
  }
}

/* Session billing HUD — fixed to the bottom-right corner of the remote desktop view.
   pointer-events: none so it never swallows clicks meant for the desktop below. */
.axonos-session-hud {
  position: fixed;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  right: calc(12px + env(safe-area-inset-right, 0px));
  z-index: 56;
  padding: 8px 12px;
  background: rgba(13, 14, 24, 0.82);
  border: 1px solid var(--hair-mint);
  border-radius: 8px;
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 11px;
  line-height: 1.7;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
  text-align: left;
  pointer-events: none;
  user-select: none;
}

.axonos-session-hud--hidden {
  display: none !important;
}

.axonos-session-hud__label {
  opacity: 0.72;
}

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

/* Mirror the footer countdown's warning/critical colors on the remaining-time line */
.axonos-session-hud--warning #axonos_session_hud_remaining {
  color: rgba(242, 193, 78, 0.98);
}

.axonos-session-hud--critical #axonos_session_hud_remaining {
  color: rgba(255, 95, 87, 0.98);
}

/* Compact "Manage" affordance on the wallet row. The HUD itself is
   pointer-events:none, so re-enable pointer events on anything interactive. */
.axonos-session-hud__manage {
  margin-left: 8px;
  padding: 1px 7px;
  vertical-align: baseline;
  font-family: inherit;
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
  background: rgba(123, 108, 255, 0.1);
  border: 1px solid var(--hair-mint);
  border-radius: 5px;
  cursor: pointer;
  pointer-events: auto;
  transition: background 0.12s ease, color 0.12s ease;
}

.axonos-session-hud__manage:hover {
  background: rgba(123, 108, 255, 0.22);
  color: rgba(120, 230, 180, 0.95);
}

/* Wallet-management popover, anchored just above the HUD. */
.axonos-hud-wallet-menu {
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  width: 250px;
  padding: 10px 12px;
  background: rgba(8, 16, 30, 0.97);
  border: 1px solid var(--hair-mint);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  pointer-events: auto;
  text-align: left;
}

.axonos-hud-wallet-menu--hidden {
  display: none !important;
}

.axonos-hud-wallet-menu__addr {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 8px;
}

.axonos-hud-wallet-menu__addr-label {
  opacity: 0.72;
}

.axonos-hud-wallet-menu__addr-value {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: rgba(120, 230, 180, 0.95);
}

.axonos-hud-wallet-menu__hint {
  margin: 0 0 10px;
  font-size: 10px;
  line-height: 1.5;
  opacity: 0.7;
}

.axonos-hud-wallet-menu__actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.axonos-hud-wallet-menu__actions .axonos-session-hud__btn {
  width: 100%;
}

.axonos-session-hud__btn {
  flex: 1 1 auto;
  padding: 3px 8px;
  font-family: inherit;
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
  background: rgba(123, 108, 255, 0.12);
  border: 1px solid var(--hair-mint);
  border-radius: 5px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s ease, color 0.12s ease;
}

.axonos-session-hud__btn:hover {
  background: rgba(123, 108, 255, 0.22);
  color: rgba(120, 230, 180, 0.95);
}

.axonos-session-hud__btn--danger:hover {
  background: rgba(255, 95, 87, 0.18);
  color: rgba(255, 95, 87, 0.98);
}

.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(13, 14, 24, 0.98);
  border: 1px solid var(--hair-mint);
  color: var(--ink);
  box-shadow: 0 0 30px rgba(123, 108, 255, 0.15), 0 20px 60px rgba(0, 0, 0, .6);
}

.axonos-usage-overlay--locked .axonos-usage-overlay__panel {
  background: rgba(13, 14, 24, 0.98);
  border: 1px solid rgba(255, 95, 87, 0.45);
  color: var(--ink);
  box-shadow: 0 0 30px rgba(255, 95, 87, 0.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(255, 95, 87, 0.08) !important;
  border: 1px solid rgba(255, 95, 87, 0.45) !important;
  box-shadow: none;
  border-radius: 999px !important;
}

.axonos-usage-overlay__btn--exit:hover:not(:disabled) {
  border-color: var(--coral) !important;
  background: rgba(255, 95, 87, 0.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(123, 108, 255, 0.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(123, 108, 255, 0.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(13, 14, 24, 0.98);
  border: 1px solid var(--hair-mint);
  color: var(--ink);
  box-shadow: 0 0 30px rgba(123, 108, 255, 0.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(123, 108, 255, 0.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(123, 108, 255, 0.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(123, 108, 255, 0.25),
    0 6px 20px rgba(123, 108, 255, 0.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(123, 108, 255, 0.1) !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='%23b7a6ff' 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(123, 108, 255, 0.18) !important;
  border-color: var(--cyan) !important;
  box-shadow: 0 6px 22px rgba(123, 108, 255, 0.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(13, 14, 24, 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(123, 108, 255, 0.1) !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(123, 108, 255, 0.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(123, 108, 255, 0.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: #4fe0c0 !important;
  -webkit-text-fill-color: #4fe0c0 !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: #4fe0c0 !important;
  -webkit-text-fill-color: #4fe0c0 !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: #4fe0c0 !important;
  -webkit-text-fill-color: #4fe0c0 !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(79, 224, 192, 0.12) !important;
  border: 1px solid rgba(79, 224, 192, 0.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(79, 224, 192, 0.2) !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(242, 193, 78, 0.12) !important;
  border: 1px solid rgba(242, 193, 78, 0.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(242, 193, 78, 0.2) !important;
}

/* Settings panel dark theme styling */
#noVNC_settings {
  background-color: rgba(13, 14, 24, 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(123, 108, 255, 0.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(8, 9, 16, 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(123, 108, 255, 0.15) !important;
  background-color: rgba(13, 14, 24, 0.96) !important;
  outline: none !important;
}

/* Range sliders */
#noVNC_settings input[type="range"] {
  background: rgba(8, 9, 16, 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(123, 108, 255, 0.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(123, 108, 255, 0.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(123, 108, 255, 0.12), rgba(139, 124, 255, 0.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(123, 108, 255, 0.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(123, 108, 255, 0.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='%23b7a6ff' 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(123, 108, 255, 0.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(123, 108, 255, 0.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 */

/* Top bar brand (wordmark lives in .axonos-topbar; v2 design) */
.axonos-main-title {
  margin: 0 !important;
  font-family: var(--font-display) !important;
  font-size: 1.25rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.012em;
  color: #f3f4fa !important;
  line-height: 1;
}

.axonos-highlight {
  background: linear-gradient(120deg, #5fe3d0, #7fa8ff, #b79bff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
}

/* Hero badge text (typewriter target) */
.axonos-tagline {
  font-size: 11px;
  color: #9aa0ba;
  font-weight: 600;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-family: var(--font-body);
  min-height: 1.4em;
}

/* Network environment (mainnet vs testnet) — driven by /api/config axgt_chain_id; see vnc.html applyAxonosNetworkEnvironmentUi */
.axonos-network-banner {
  display: none !important;
  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;
  text-align: center;
}

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

.axonos-network-banner--mainnet {
  color: var(--green);
  background: rgba(79, 224, 192, 0.12);
  border: 1px solid rgba(79, 224, 192, 0.35);
}

.axonos-network-banner--testnet {
  color: var(--warm);
  background: rgba(242, 193, 78, 0.12);
  border: 1px solid rgba(242, 193, 78, 0.4);
  box-shadow: 0 0 18px rgba(242, 193, 78, 0.1);
}

.axonos-network-banner--other {
  color: var(--pink);
  background: rgba(183, 155, 255, 0.12);
  border: 1px solid rgba(183, 155, 255, 0.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);
}

/* Mission Section */
.axonos-mission {
  text-align: center;
  margin: 25px 0;
  padding: 20px;
  background: rgba(123, 108, 255, 0.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: session rail card (prerequisites headline is the fixed header ticker) */
.axonos-connect-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0.9rem;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.012));
  padding: 1.35rem 1.25rem;
  box-shadow: 0 30px 80px -40px rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  margin-top: 1.5rem;
}

/* "YOUR SESSION" rail kicker */
.axonos-rail-kick {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: #8b91aa;
  font-family: var(--font-body);
}

/* Hero CTA highlight pulse when scrolled to the rail */
@keyframes axonos-rail-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(123, 108, 255, 0.55);
  }

  100% {
    box-shadow: 0 0 0 14px rgba(123, 108, 255, 0);
  }
}

.axonos-rail-pulse {
  animation: axonos-rail-pulse 1.1s ease-out 2;
}

.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(123, 108, 255, 0.1) 0%, rgba(18, 19, 31, 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(123, 108, 255, 0.08) 0%,
      rgba(13, 14, 24, 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(123, 108, 255, 0.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='%23b7a6ff' 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(123, 108, 255, 0.25),
    0 0 18px rgba(123, 108, 255, 0.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: #14151f;
  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 — v2 primary gradient CTA */
.axonos-enhanced-connect {
  background: var(--grad-primary) !important;
  border: none !important;
  border-radius: 13px !important;
  padding: 13px 18px !important;
  margin: 10px 0 !important;
  cursor: pointer !important;
  transition: filter 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease !important;
  position: relative;
  overflow: hidden;
  box-shadow: 0 14px 34px -14px rgba(123, 108, 255, 0.95) !important;
}

.axonos-enhanced-connect:hover {
  filter: brightness(1.08);
  transform: translateY(-1px) !important;
  box-shadow: 0 18px 40px -14px rgba(123, 108, 255, 1) !important;
}

.axonos-connect-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  background: transparent !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 4px;
  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 {
  line-height: 0;
}

.axonos-connect-icon img {
  width: 26px !important;
  height: 26px !important;
}

.axonos-connect-text {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #fff !important;
  font-family: var(--font-body);
  letter-spacing: 0.01em;
}

.axonos-connect-subtext {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.72);
  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 (landing footer; extra bottom padding clears the fixed footer banner) */
.axonos-quote {
  position: relative;
  z-index: 10;
  text-align: center;
  margin: 30px 0 0;
  padding: 24px 20px 56px;
  background: transparent;
  border: none;
  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: visible !important;
  /* No top padding: the topbar's own 20px puts the header at the absolute top
     like the axonos-web prototype. */
  padding: 0 20px 20px;
  /* Upstream sets pointer-events:none on .noVNC_center (auto on children) so the
     transparent area passes clicks to the VNC canvas. But on the landing page this
     fixed center IS the scroll container, so wheel events over empty gaps fell
     through to <body> (which can't scroll) — scrolling only worked over cards.
     The canvas is display:none until connected, so re-enabling events here is safe. */
  pointer-events: auto;
}

/* Connect Dialog Container Enhancement */
#noVNC_connect_dlg {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  max-width: 600px;
  max-height: none !important;
  overflow: visible !important;
  margin: auto;
  position: relative;
  z-index: 10;
  padding: 0 !important;
}

html:not(.noVNC_connected) #noVNC_connect_dlg {
  max-height: none !important;
  overflow: visible !important;
}

/* Desktop landing (v2): block-flow sections; catalog + sticky session rail */
@media (min-width: 993px) {
  html:not(.noVNC_connected) .noVNC_center:has(#noVNC_connect_dlg) {
    box-sizing: border-box;
    width: 100%;
    overflow-x: hidden;
    padding-left: calc(20px + env(safe-area-inset-left, 0px));
    padding-right: calc(20px + env(safe-area-inset-right, 0px));
    position: relative;
    z-index: 2;
  }

  #noVNC_connect_dlg {
    display: block;
    max-width: 1280px;
    align-self: start;
    margin: 0 auto !important;
    padding: 0 30px !important;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: visible !important;
    overflow: visible !important;
    max-height: none !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  html:not(.noVNC_connected) #noVNC_connect_dlg {
    max-height: none !important;
    overflow: visible !important;
  }

  #noVNC_connect_dlg>* {
    min-width: 0;
  }

  /* Two-column main: environment catalog + sticky session rail */
  .axonos-landing-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
    column-gap: 26px;
    align-items: start;
  }

  #noVNC_connect_dlg>.axonos-landing-main>.axonos-connect-wrapper {
    position: sticky;
    top: calc(var(--axonos-prereq-ticker-body-pad-top, 44px) + 16px);
  }

  /* 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: 0 !important;
  }

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

/* Specs Overview Panel (all viewports) */
.axonos-specs-panel {
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.axonos-spec-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.axonos-spec-icon {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #b7a6ff;
  background: rgba(123, 108, 255, 0.1);
  border-radius: 9px;
  border: 1px solid rgba(123, 108, 255, 0.22);
}

.axonos-spec-details {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.axonos-spec-name {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--axonos-light);
}

.axonos-spec-desc {
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 300;
  color: var(--ink-mute);
}

/* 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(255, 255, 255, 0.124);
  color: rgba(255, 255, 255, 0.31);
  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(255, 255, 255, 0.558);
  border-color: rgba(255, 255, 255, 0.31);
  background: rgba(255, 255, 255, 0.05);
}

/* Timeout message shown after 90 s of waiting */
.axonos-loader-timeout-msg {
  margin-top: 1rem;
  font-size: 0.78rem;
  color: rgba(242, 193, 78, 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(123, 108, 255, 0.07);
    border: 1px solid var(--hair-mint);
    border-radius: 8px;
    text-align: center;
    box-sizing: border-box !important;
  }

  html:not(.noVNC_connected) .axonos-version {
    display: none !important;
  }

  html:not(.noVNC_connected) {
    height: auto !important;
  }

  html:not(.noVNC_connected) body {
    height: auto !important;
    touch-action: auto !important;
    overflow-x: hidden !important;
  }

  /* Force box-sizing border-box on all key landing page elements to prevent horizontal overflow */
  .noVNC_center,
  #noVNC_connect_dlg,
  #noVNC_connect_dlg *,
  #noVNC_credentials_dlg,
  #noVNC_credentials_dlg *,
  .axonos-vision-header,
  .axonos-vision-header *,
  .axonos-mobile-notice,
  .axonos-mobile-notice *,
  .axonos-hero-panel,
  .axonos-hero-panel *,
  .axonos-connect-wrapper,
  .axonos-connect-wrapper *,
  .axonos-specs-panel,
  .axonos-specs-panel *,
  .axonos-ssh-toggle,
  .axonos-ssh-toggle *,
  .axonos-ssh-card,
  .axonos-ssh-card * {
    box-sizing: border-box !important;
  }

  html:not(.noVNC_connected) .noVNC_center:has(.noVNC_open),
  html:not(.noVNC_connected) .noVNC_center.noVNC_open {
    position: relative !important;
    height: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px !important;
    margin: 0 !important;
    overflow-x: hidden !important;
  }

  #noVNC_connect_dlg {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }

  .axonos-vision-header,
  .axonos-mobile-notice,
  .axonos-hero-panel,
  .axonos-connect-wrapper,
  .axonos-quote {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  #noVNC_credentials_dlg {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    margin: 20px auto !important;
    width: 100% !important;
    max-width: min(600px, 95vw) !important;
  }

  #noVNC_credentials_dlg:has(#axonos_wallet_state_insufficient:not(.axonos-wallet-state--hidden)) {
    max-width: min(860px, 95vw) !important;
  }

  html:not(.noVNC_connected) #noVNC_connect_dlg {
    max-height: none !important;
    overflow: visible !important;
  }

}

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

  .axonos-features {
    flex-direction: column;
    gap: 15px;
  }

  .axonos-feature {
    padding: 15px;
  }

  #noVNC_connect_dlg {
    padding: 0 !important;
    margin: 0 auto !important;
  }

  .axonos-hero-panel,
  .axonos-connect-wrapper {
    padding: 1.25rem 1rem !important;
  }

  /* Wrap wallet addresses/strings on small screens */
  .axonos-wallet-card__contract code,
  .axonos-wallet-state__address {
    word-break: break-all !important;
    white-space: normal !important;
  }

  .axonos-wallet-card__contract {
    flex-direction: column;
    align-items: stretch !important;
    gap: 8px !important;
  }

  .axonos-wallet-card__contract-label {
    margin-bottom: 2px;
  }

  .axonos-wallet-card__contract .axonos-contract-etherscan {
    margin-left: 0 !important;
  }
}

/* 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(13, 14, 24, 0.97);
  border-radius: 20px;
  padding: 40px;
  border: 1px solid var(--hair-mint);
  box-shadow:
    0 0 40px rgba(123, 108, 255, 0.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;
  /* Keep the ring's outer box at exactly 80px (borders inside) so its center
     coincides with the X overlay centered in the 80px .axonos-loader-visual. */
  box-sizing: border-box;
}

.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(123, 108, 255, 0.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(123, 108, 255, 0.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;
}

.axonos-loading-elapsed {
  margin-top: 9px;
  color: #777f99;
  font-family: var(--font-mono);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  text-align: center;
}

@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(255, 255, 255, 0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.015) 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%);
  /* Disable full-screen animation to save CPU */
  /* animation: grid-drift 28s ease-in-out infinite; */
  pointer-events: none;
  z-index: 1;
  opacity: 0.85;
}

/* 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;
  /* Disable full-screen animation to save CPU */
  /* animation: dot-float 28s ease-in-out infinite; */
  pointer-events: none;
  z-index: -4;
  opacity: 0.45;
}

/* 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(123, 108, 255, 0.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;
  animation: 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);
  }
}

/* ==========================================================================
   🧬 Science Templates Interface & Tabs Layout
   ========================================================================== */

/* Hero & Tabs Panel Layout */
.axonos-hero-panel {
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--rule-strong);
  border-radius: 16px;
  background: rgba(8, 16, 28, 0.55);
  padding: 1.5rem 1.25rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(123, 108, 255, 0.06);
  backdrop-filter: blur(10px);
}

#noVNC_connect_dlg>.axonos-hero-panel {
  grid-column: 1;
  grid-row: 2;
}

/* Tabs Navigation */
.axonos-tabs-nav {
  display: flex;
  gap: 8px;
  margin: 1.5rem 0 1rem;
  border-bottom: 1px solid var(--rule-strong);
  padding-bottom: 2px;
}

.axonos-tab-btn {
  background: rgba(13, 14, 24, 0.4);
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  color: var(--ink-mute);
  padding: 10px 18px;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease;
  position: relative;
  top: 1px;
}

.axonos-tab-btn:hover {
  color: var(--axonos-light);
  background: rgba(123, 108, 255, 0.05);
}

.axonos-tab-btn.active {
  color: var(--cyan);
  background: rgba(18, 19, 31, 0.65);
  border-color: var(--rule-strong);
  border-bottom: 1px solid var(--bg-1);
  box-shadow: 0 -4px 12px rgba(123, 108, 255, 0.05);
}

.axonos-tab-btn.active::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--cyan);
  border-radius: 8px 8px 0 0;
  box-shadow: 0 0 8px var(--cyan);
}

/* Tab Panels Content */
.axonos-tabs-content {
  flex: 1;
}

.axonos-tab-pane {
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.axonos-tab-pane.active {
  display: block;
  opacity: 1;
}

/* Templates Controls (Search & Filter) */
.axonos-templates-controls {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 1.25rem;
}

@media (min-width: 600px) {
  .axonos-templates-controls {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.axonos-search-wrap {
  flex: 1;
  max-width: 100%;
}

@media (min-width: 600px) {
  .axonos-search-wrap {
    max-width: 300px;
  }
}

.axonos-templates-search-input {
  width: 100%;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--rule-strong);
  background: rgba(12, 18, 28, 0.85);
  color: var(--axonos-light);
  font-family: var(--font-body);
  font-size: 0.9rem;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
  transition: all 0.25s ease;
  box-sizing: border-box;
}

.axonos-templates-search-input:focus {
  outline: none;
  border-color: var(--cyan);
  box-shadow: 0 0 10px rgba(123, 108, 255, 0.15), inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

.axonos-filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.axonos-filter-pill {
  background: rgba(18, 19, 31, 0.4);
  border: 1px solid var(--rule-strong);
  color: var(--ink-mute);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.25s ease;
  font-family: var(--font-body);
}

.axonos-filter-pill:hover {
  color: var(--axonos-light);
  border-color: rgba(123, 108, 255, 0.4);
}

.axonos-filter-pill.active {
  color: var(--bg-0);
  background: var(--cyan);
  border-color: var(--cyan);
  font-weight: 700;
  box-shadow: 0 0 10px rgba(123, 108, 255, 0.3);
}

/* Templates Grid */
.axonos-templates-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  max-height: 480px;
  overflow-y: auto;
  padding-right: 6px;
}

@media (min-width: 768px) {
  .axonos-templates-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }
}

/* Scrollbar for Grid */
.axonos-templates-grid::-webkit-scrollbar {
  width: 6px;
}

.axonos-templates-grid::-webkit-scrollbar-track {
  background: rgba(12, 18, 28, 0.3);
  border-radius: 4px;
}

.axonos-templates-grid::-webkit-scrollbar-thumb {
  background: var(--rule-strong);
  border-radius: 4px;
}

.axonos-templates-grid::-webkit-scrollbar-thumb:hover {
  background: var(--cyan);
}

/* Template Card */
.axonos-template-card {
  background: linear-gradient(135deg, rgba(10, 24, 44, 0.75) 0%, rgba(18, 19, 31, 0.5) 100%);
  border: 1px solid var(--rule-strong);
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(.2, .8, .2, 1);
  position: relative;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.axonos-template-card:hover {
  border-color: rgba(123, 108, 255, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(123, 108, 255, 0.08);
}

.axonos-template-card.selected {
  border-color: var(--cyan);
  background: linear-gradient(135deg, rgba(123, 108, 255, 0.07) 0%, rgba(10, 24, 44, 0.8) 100%);
  box-shadow: 0 0 16px rgba(123, 108, 255, 0.15), inset 0 0 0 1px rgba(123, 108, 255, 0.15);
}

.axonos-template-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.axonos-template-icon-wrap {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(123, 108, 255, 0.08);
  border-radius: 10px;
  border: 1px solid rgba(123, 108, 255, 0.15);
  transition: all 0.25s ease;
}

.axonos-template-card:hover .axonos-template-icon-wrap,
.axonos-template-card.selected .axonos-template-icon-wrap {
  background: rgba(123, 108, 255, 0.14);
  border-color: var(--cyan);
  box-shadow: 0 0 10px rgba(123, 108, 255, 0.2);
}

.axonos-template-icon-wrap svg {
  width: 22px;
  height: 22px;
}

.axonos-template-meta {
  display: flex;
  gap: 4px;
}

.axonos-template-tag {
  background: rgba(18, 19, 31, 0.6);
  border: 1px solid var(--rule-strong);
  color: var(--ink-mute);
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 0.65rem;
  font-weight: 600;
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}

.axonos-template-card.selected .axonos-template-tag {
  border-color: rgba(123, 108, 255, 0.2);
  color: var(--cyan);
}

.axonos-template-title {
  margin: 4px 0 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--axonos-light);
  font-family: var(--font-body);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.axonos-template-desc {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--ink-mute);
  font-weight: 300;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.axonos-template-image-info {
  background: rgba(6, 12, 22, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.031);
  border-radius: 8px;
  padding: 6px 10px;
  margin-top: 4px;
}

.axonos-template-image-info code {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--violet-fg);
  word-break: break-all;
}

.axonos-template-card.selected .axonos-template-image-info {
  border-color: rgba(123, 108, 255, 0.12);
}

.axonos-template-actions {
  display: flex;
  gap: 8px;
  margin-top: 6px;
  align-items: center;
}

.axonos-template-btn {
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: var(--font-body);
  box-sizing: border-box;
}

.axonos-template-btn.select-btn {
  flex: 1;
  background: rgba(123, 108, 255, 0.08);
  border: 1px solid var(--hair-mint);
  color: var(--cyan);
}

.axonos-template-btn.select-btn:hover {
  background: var(--cyan);
  border-color: var(--cyan);
  color: var(--bg-0);
  box-shadow: 0 0 12px rgba(123, 108, 255, 0.3);
}

.axonos-template-card.selected .axonos-template-btn.select-btn {
  background: var(--cyan);
  border-color: var(--cyan);
  color: var(--bg-0);
}

.axonos-template-btn.info-btn {
  background: rgba(13, 14, 24, 0.6);
  border: 1px solid var(--rule-strong);
  color: var(--ink-mute);
}

.axonos-template-btn.info-btn:hover {
  border-color: var(--axonos-light);
  color: var(--axonos-light);
}

/* Selected Template Banner (Right Column Connect Panel) */
.axonos-selected-template-banner {
  background: linear-gradient(135deg, rgba(123, 108, 255, 0.08) 0%, rgba(10, 24, 44, 0.5) 100%);
  border: 1px solid var(--hair-mint);
  border-radius: 14px;
  padding: 12px 16px;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 4px;
  backdrop-filter: blur(8px);
}

.axonos-selected-template-label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cyan);
  opacity: 0.9;
}

.axonos-selected-template-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.axonos-selected-template-icon {
  font-size: 1.1rem;
}

.axonos-selected-template-icon svg {
  width: 18px;
  height: 18px;
}

.axonos-selected-template-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--axonos-light);
  font-family: var(--font-body);
}

/* Modern Details Modal */
.axonos-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.axonos-modal.active {
  opacity: 1;
  pointer-events: auto;
}

.axonos-modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(3, 8, 15, 0.85);
  backdrop-filter: blur(8px);
}

.axonos-modal-content {
  background: linear-gradient(145deg, #12131f, #080910);
  border: 1px solid var(--rule-strong);
  border-radius: 20px;
  width: 90%;
  max-width: 580px;
  max-height: 85vh;
  overflow-y: auto;
  position: relative;
  z-index: 10002;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.8), 0 0 40px rgba(123, 108, 255, 0.15);
  padding: 30px;
  box-sizing: border-box;
  transform: scale(0.9);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.axonos-modal.active .axonos-modal-content {
  transform: scale(1);
}

.axonos-modal-close {
  position: absolute;
  top: 15px;
  right: 15px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--rule-strong);
  color: var(--ink-mute);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 1.4rem;
  line-height: 30px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.axonos-modal-close:hover {
  background: rgba(255, 95, 87, 0.12);
  border-color: var(--coral);
  color: var(--coral);
  box-shadow: 0 0 10px rgba(255, 95, 87, 0.3);
}

/* Modal Body elements */
.axonos-m-title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 15px;
}

.axonos-m-icon-box {
  width: 44px;
  height: 44px;
  background: rgba(123, 108, 255, 0.1);
  border: 1px solid var(--hair-mint);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.axonos-m-icon-box svg {
  width: 26px;
  height: 26px;
}

.axonos-m-title {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--axonos-light);
  font-family: var(--font-body);
}

.axonos-m-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 20px;
}

.axonos-m-desc {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--ink-dim);
  margin-bottom: 25px;
}

.axonos-m-section {
  margin-bottom: 22px;
}

.axonos-m-section-title {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--cyan);
  margin: 0 0 8px 0;
  border-bottom: 1px dashed rgba(123, 108, 255, 0.2);
  padding-bottom: 4px;
}

.axonos-m-image-box {
  background: rgba(6, 12, 22, 0.8);
  border: 1px solid var(--rule-strong);
  border-radius: 10px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.axonos-m-image-box code {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--violet-fg);
}

.axonos-m-copy-btn {
  background: rgba(123, 108, 255, 0.1);
  border: 1px solid var(--hair-mint);
  color: var(--cyan);
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--font-body);
  transition: all 0.2s ease;
}

.axonos-m-copy-btn:hover {
  background: var(--cyan);
  color: var(--bg-0);
}

.axonos-m-pkgs-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.axonos-m-pkg-badge {
  background: rgba(123, 108, 255, 0.04);
  border: 1px solid var(--rule-strong);
  color: var(--axonos-light);
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 0.8rem;
  font-family: var(--font-body);
}

.axonos-m-command-box {
  background: #0a0b13;
  border: 1px solid var(--rule-strong);
  border-radius: 10px;
  padding: 12px 16px;
  position: relative;
}

.axonos-m-command-box pre {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--green);
  white-space: pre-wrap;
  word-break: break-all;
}

@media (min-width: 993px) {
  .axonos-templates-grid {
    max-height: 520px;
  }
}

@media (min-width: 1200px) {
  .axonos-templates-grid {
    max-height: 580px;
  }
}

/* ==============================================================
 * File transfer panel (left deck)
 * ------------------------------------------------------------ */

.axonos-files-panel {
  width: min(420px, calc(100vw - 90px));
}

.axonos-files-panel__help {
  font-size: 0.78rem;
  color: var(--axonos-light);
  opacity: 0.75;
  margin: 4px 0 8px;
}

.axonos-files-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

.axonos-files-toolbar__btn {
  background: var(--axonos-dark-3);
  color: var(--axonos-light);
  border: 1px solid var(--axonos-shadow);
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 0.78rem;
  cursor: pointer;
}

.axonos-files-toolbar__btn:hover:not(:disabled) {
  border-color: var(--axonos-primary);
  color: var(--axonos-primary);
}

.axonos-files-toolbar__btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.axonos-files-toolbar__path {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--axonos-primary);
}

.axonos-files-drop {
  border: 1px dashed var(--axonos-shadow);
  border-radius: 8px;
  max-height: 240px;
  overflow-y: auto;
  background: var(--axonos-dark-2);
}

.axonos-files-drop--over {
  border-color: var(--axonos-primary);
  background: var(--axonos-dark-3);
}

.axonos-files-list {
  list-style: none;
  margin: 0;
  padding: 4px;
}

.axonos-files-entry {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  border-radius: 6px;
  font-size: 0.82rem;
}

.axonos-files-entry:hover {
  background: var(--axonos-dark-3);
}

.axonos-files-entry__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--axonos-light);
}

.axonos-files-entry--dir .axonos-files-entry__name {
  cursor: pointer;
  color: var(--axonos-primary);
}

.axonos-files-entry__size {
  font-size: 0.72rem;
  opacity: 0.7;
  white-space: nowrap;
}

.axonos-files-entry__dl {
  background: none;
  border: 1px solid var(--axonos-shadow);
  border-radius: 6px;
  color: var(--axonos-primary);
  cursor: pointer;
  padding: 1px 7px;
}

.axonos-files-entry__dl:hover {
  border-color: var(--axonos-primary);
}

.axonos-files-empty {
  padding: 14px 8px;
  text-align: center;
  font-size: 0.78rem;
  opacity: 0.6;
}

.axonos-files-upload-btn {
  margin-top: 8px;
  width: 100%;
  float: none;
}

.axonos-files-transfers {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 180px;
  overflow-y: auto;
}

.axonos-transfer {
  background: var(--axonos-dark-2);
  border: 1px solid var(--axonos-shadow);
  border-radius: 8px;
  padding: 6px 8px;
}

.axonos-transfer__name {
  font-size: 0.78rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--axonos-light);
}

.axonos-transfer__bar {
  height: 6px;
  border-radius: 3px;
  background: var(--axonos-dark-3);
  margin: 5px 0;
  overflow: hidden;
}

.axonos-transfer__fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--axonos-primary), var(--axonos-hover));
  transition: width 0.3s ease;
}

.axonos-transfer__meta {
  font-size: 0.72rem;
  opacity: 0.75;
}

.axonos-transfer__controls {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}

.axonos-transfer__btn {
  background: none;
  border: 1px solid var(--axonos-shadow);
  border-radius: 6px;
  color: var(--axonos-light);
  font-size: 0.72rem;
  padding: 1px 8px;
  cursor: pointer;
}

.axonos-transfer__btn:hover {
  border-color: var(--axonos-primary);
  color: var(--axonos-primary);
}

.axonos-files-status {
  margin-top: 6px;
  font-size: 0.72rem;
  color: var(--axonos-light);
  opacity: 0.7;
  min-height: 1em;
}

.axonos-files-status--error {
  color: #e87a7a;
  opacity: 1;
}

/* ---------------------------------------------------------------------------
 * WebRTC control surface
 * On the WebRTC path the desktop is a <video> element with data-channel input,
 * so RFB-only controls (viewport drag, on-screen modifier keys, RFB encoding/
 * transport/cursor settings) do nothing. They make sense ONLY during a classic
 * noVNC/RFB session, so hide them on the landing page (not connected) and on
 * the WebRTC path; they reappear for an RFB fallback session. The #id selector
 * raises specificity to beat the deck's
 * `#noVNC_control_bar .noVNC_button { display:block !important }`. */
html:not(.noVNC_connected) #noVNC_control_bar .axonos-rfb-only,
html.axonos-webrtc-active #noVNC_control_bar .axonos-rfb-only {
  display: none !important;
}

/* The control deck is session-only: hide the whole bar on the landing page
 * (no active session) so desktop controls don't appear before connect. It
 * returns once a session is connected (noVNC_connected set for both WebRTC and
 * RFB). */
html:not(.noVNC_connected) #noVNC_control_bar_anchor {
  display: none !important;
}

/* Microphone button — uses .noVNC_button for an exact box match with its deck
 * neighbours; we only add the live dot, icon sizing, and state colours. The
 * #id display rules beat the deck's `display:block !important`. */
#noVNC_control_bar .axonos-mic-button {
  display: none !important;
  position: relative;
}

#noVNC_control_bar .axonos-mic-button.is-available {
  display: block !important;
}

.axonos-mic-button {
  /* Strip native <button> chrome so it resolves to the same transparent box as
   * its <input type="image"> neighbours (otherwise the UA paints a white/grey
   * background and its own sizing). */
  -webkit-appearance: none;
  appearance: none;
  /* <button> defaults to border-box, but the deck's inputs are content-box, so
   * the shared `width/height:32px` became total (→ 22px content) instead of the
   * 42px box the peers get. Match them. */
  box-sizing: content-box !important;
  background: transparent;
  color: var(--ink-mute);
  cursor: pointer;
}

.axonos-mic-button svg {
  width: 100%;
  height: 100%;
  display: block;
}

.axonos-mic-button:hover {
  color: #fff;
}

.axonos-mic-button.is-pending {
  opacity: 0.6;
}

.axonos-mic-button.is-denied {
  color: #e0a3c0 !important;
  border-color: rgba(224, 163, 192, 0.5) !important;
}

.axonos-mic-button.is-live {
  color: #fff !important;
  background: rgba(200, 42, 42, 0.92) !important;
  border-color: #ff5a5a !important;
}

/* Live "recording" dot on the button. */
.axonos-mic-button__dot {
  display: none;
  position: absolute;
  top: -2px;
  right: -2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff3b3b;
  box-shadow: 0 0 5px #ff3b3b;
}

.axonos-mic-button.is-live .axonos-mic-button__dot {
  display: block;
}

/* Restart button: base noVNC gives .noVNC_submit `float: right`, which (with the
 * theme's full-width pill) drops it out of flow and lets Logging overlap it.
 * The deck pill is block + full width, so it must not float. */
#noVNC_restart_session_button {
  float: none !important;
}

/* Persistent live indicator: a small fixed red dot that stays visible even when
 * the control bar is collapsed, since the mic streams to a remote desktop and
 * its active state must always be glanceable. */
html.axonos-mic-live::after {
  content: '';
  position: fixed;
  left: 10px;
  bottom: 10px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ff3b3b;
  box-shadow: 0 0 8px #ff3b3b;
  z-index: 100;
  pointer-events: none;
}

/* ── Direct SSH access toggle + connect card ───────────────────────────── */
.axonos-ssh-toggle {
  margin: 12px 0 4px;
  padding: 12px 14px;
  border: 1px solid var(--rule-strong);
  border-radius: 10px;
  background: var(--bg-1);
}

.axonos-ssh-toggle__row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}

.axonos-ssh-toggle__input {
  margin-top: 3px;
  width: 16px;
  height: 16px;
  accent-color: var(--cyan);
  cursor: pointer;
  flex: 0 0 auto;
}

.axonos-ssh-toggle__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.axonos-ssh-toggle__title {
  font-weight: 600;
  color: var(--ink);
  font-size: 0.95rem;
}

.axonos-ssh-toggle__desc {
  color: var(--ink-mute);
  font-size: 0.8rem;
  line-height: 1.35;
}

.axonos-ssh-key {
  margin-top: 12px;
}

.axonos-ssh-key--hidden {
  display: none;
}

.axonos-ssh-key__label {
  display: block;
  color: var(--ink-dim);
  font-size: 0.8rem;
  margin-bottom: 6px;
}

.axonos-ssh-key__input {
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  min-height: 64px;
  padding: 8px 10px;
  border: 1px solid var(--rule-strong);
  border-radius: 8px;
  background: var(--bg-0);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.4;
}

.axonos-ssh-key__input:focus {
  outline: none;
  border-color: var(--cyan);
  box-shadow: 0 0 0 2px rgba(123, 108, 255, 0.18);
}

.axonos-ssh-key__hint {
  color: var(--ink-mute);
  font-size: 0.75rem;
  margin: 6px 0 0;
  line-height: 1.35;
}

.axonos-ssh-card {
  margin-top: 14px;
  padding: 16px;
  border: 1px solid var(--hair-mint);
  border-radius: 12px;
  background: var(--bg-1);
  box-shadow: 0 0 14px rgba(123, 108, 255, 0.12);
}

.axonos-ssh-card--hidden {
  display: none;
}

.axonos-ssh-card__header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.axonos-ssh-card__icon {
  font-size: 1.1rem;
}

.axonos-ssh-card__title {
  font-weight: 700;
  color: var(--cyan);
  font-size: 1rem;
}

.axonos-ssh-card__label {
  color: var(--ink-dim);
  font-size: 0.8rem;
  margin: 0 0 6px;
}

.axonos-ssh-card__cmd-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.axonos-ssh-card__cmd {
  flex: 1 1 auto;
  padding: 9px 11px;
  border: 1px solid var(--rule-strong);
  border-radius: 8px;
  background: var(--bg-0);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  word-break: break-all;
  user-select: all;
}

.axonos-ssh-card__copy,
.axonos-ssh-card__end,
.axonos-ssh-card__extend,
.axonos-ssh-card__terminal {
  cursor: pointer;
  border-radius: 8px;
  border: 1px solid var(--rule-strong);
  background: var(--bg-2);
  color: var(--ink);
  font-size: 0.8rem;
  padding: 0 14px;
}

.axonos-ssh-card__copy:hover,
.axonos-ssh-card__end:hover,
.axonos-ssh-card__extend:hover,
.axonos-ssh-card__terminal:hover {
  border-color: var(--cyan);
  color: var(--cyan);
}

.axonos-ssh-card__extend:disabled {
  cursor: default;
  opacity: 0.7;
}

.axonos-ssh-card__ttl {
  color: var(--ink-mute);
  font-size: 0.78rem;
  margin: 10px 0 0;
}

.axonos-ssh-card__note {
  color: var(--warm);
  font-size: 0.76rem;
  margin: 6px 0 12px;
  line-height: 1.35;
}

.axonos-ssh-card__actions {
  display: flex;
  gap: 8px;
}

.axonos-ssh-card__end,
.axonos-ssh-card__extend,
.axonos-ssh-card__terminal {
  flex: 1 1 33.333%;
  padding: 9px 0;
}

.axonos-ssh-card__terminal {
  cursor: pointer;
  border-radius: 8px;
  border: 1px solid rgba(123, 108, 255, 0.55);
  background: linear-gradient(180deg, #8b7cff, #6a57f2);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
}

.axonos-ssh-card__terminal:disabled {
  cursor: wait;
  opacity: 0.7;
}

/* Custom Confirmation Modals aligned with AxonOS Theme */
.axonos-confirm-content {
  max-width: 440px !important;
  border: 1px solid rgba(123, 108, 255, 0.22) !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.7), 0 0 40px rgba(123, 108, 255, 0.12) !important;
  padding: 28px !important;
}

.axonos-confirm-title {
  font-size: 1.3rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  color: var(--ink) !important;
  margin: 0 0 14px 0 !important;
  line-height: 1.25 !important;
}

.axonos-confirm-body {
  font-size: 0.9rem !important;
  line-height: 1.55 !important;
  color: var(--ink-dim) !important;
  margin-bottom: 24px !important;
  white-space: pre-wrap !important;
}

.axonos-confirm-footer {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 12px !important;
}

.axonos-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 10px 20px !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  font-family: var(--font-body) !important;
  letter-spacing: 0.04em !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transition: background .2s, border-color .2s, transform .2s, box-shadow .2s !important;
}

.axonos-btn--primary {
  background: rgba(123, 108, 255, 0.1) !important;
  border: 1px solid var(--hair-mint) !important;
  color: var(--cyan) !important;
  -webkit-text-fill-color: var(--cyan) !important;
}

.axonos-btn--primary:hover {
  transform: translateY(-2px) !important;
  background: rgba(123, 108, 255, 0.18) !important;
  border-color: var(--cyan) !important;
  box-shadow: 0 6px 22px rgba(123, 108, 255, 0.22) !important;
}

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

.axonos-btn--danger {
  background: rgba(255, 95, 87, 0.1) !important;
  border: 1px solid rgba(255, 95, 87, 0.35) !important;
  color: var(--coral) !important;
  -webkit-text-fill-color: var(--coral) !important;
}

.axonos-btn--danger:hover {
  transform: translateY(-2px) !important;
  background: rgba(255, 95, 87, 0.18) !important;
  border-color: var(--coral) !important;
  box-shadow: 0 6px 22px rgba(255, 95, 87, 0.22) !important;
}

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

.axonos-btn--secondary {
  background: rgba(166, 172, 194, 0.06) !important;
  border: 1px solid var(--rule-strong) !important;
  color: var(--ink-mute) !important;
  -webkit-text-fill-color: var(--ink-mute) !important;
}

.axonos-btn--secondary:hover {
  transform: translateY(-2px) !important;
  background: rgba(166, 172, 194, 0.12) !important;
  border-color: var(--ink-mute) !important;
}

.axonos-btn--secondary:active {
  transform: translateY(0) !important;
}

/* ==========================================================================
   AxonOS Custom Select Dropdowns
   ========================================================================== */

/* Custom Select Container */
.axonos-custom-select {
  position: relative;
  display: inline-block;
  user-select: none;
}

/* Trigger button */
.axonos-custom-select__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  box-sizing: border-box;
  width: 100%;
}

/* Arrow indicator inside the trigger */
.axonos-custom-select__arrow {
  width: 16px;
  height: 16px;
  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='%23b7a6ff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  transition: transform 0.2s ease;
}

.axonos-custom-select--open .axonos-custom-select__arrow {
  transform: rotate(180deg);
}

/* Options dropdown panel */
.axonos-custom-select__options {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 100%;
  width: max-content;
  z-index: 9999;
  margin-top: 6px;
  background: rgba(13, 14, 24, 0.98);
  border: 1px solid var(--hair-mint);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(123, 108, 255, 0.1);
  overflow: hidden;
  backdrop-filter: blur(12px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.axonos-custom-select--open .axonos-custom-select__options {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Individual option item */
.axonos-custom-select__option {
  padding: 0.6rem 1rem;
  color: var(--axonos-light);
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}

.axonos-custom-select__option:hover {
  background: rgba(123, 108, 255, 0.12);
  color: var(--cyan);
}

.axonos-custom-select__option--selected {
  background: rgba(123, 108, 255, 0.2);
  color: var(--cyan);
  font-weight: 700;
  box-shadow: inset 3px 0 0 var(--cyan);
}

/* Disabled state */
.axonos-custom-select--disabled .axonos-custom-select__trigger {
  cursor: not-allowed;
  opacity: 0.6;
}

/* Specific styling for the GPU Profile picker custom select */
.axonos-profile-picker__select-custom-wrapper {
  flex: 1 1 auto;
  min-width: min(100%, 230px);
  max-width: 100%;
}

.axonos-profile-picker__select-custom-wrapper .axonos-custom-select__trigger {
  color-scheme: dark;
  font-family: system-ui, "Segoe UI", Roboto, sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  padding: 0.5rem 1rem 0.5rem 0.85rem;
  border-radius: 10px;
  color: var(--axonos-light);
  background-color: rgba(12, 18, 28, 0.92);
  border: 1px solid var(--hair-mint);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 4px 14px rgba(0, 0, 0, 0.35);
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.15s ease;
}

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

.axonos-profile-picker__select-custom-wrapper .axonos-custom-select__trigger:focus {
  outline: none;
  border-color: var(--cyan);
  box-shadow:
    0 0 0 2px rgba(123, 108, 255, 0.25),
    0 0 18px rgba(123, 108, 255, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* Specific styling for the Settings panel selects */
#noVNC_settings .axonos-custom-select {
  display: block;
  width: 100%;
  margin: 4px 0;
}

#noVNC_settings .axonos-custom-select__trigger {
  background-color: var(--axonos-dark);
  color: var(--axonos-light);
  border: 2px solid var(--axonos-secondary);
  border-radius: 5px;
  padding: 6px 8px;
  font-family: var(--font-mono);
  font-size: 14px;
}

#noVNC_settings .axonos-custom-select__trigger:hover {
  border-color: var(--axonos-accent);
}

#noVNC_settings .axonos-custom-select__trigger:focus {
  outline: none;
  border-color: var(--axonos-accent);
  box-shadow: 0 0 8px var(--axonos-shadow);
  background-color: rgba(12, 24, 44, 0.96);
}

#noVNC_settings .axonos-custom-select__options {
  background: var(--axonos-dark);
  border: 2px solid var(--axonos-secondary);
  border-radius: 5px;
  margin-top: 2px;
}

#noVNC_settings .axonos-custom-select__option {
  font-family: var(--font-mono);
  font-size: 13px;
  padding: 6px 10px;
}

/* ==========================================================================
   AxonOS v2 design layer (ported from axonos-web / Claude Design prototype)
   Landing structure: topbar · hero + dotted globe · catalog + session rail ·
   how-it-works · trust strip · footer. Appended last so equal-specificity
   overrides win by cascade order.
   ========================================================================== */

/* ---- Ambient background: radial glow + masked grid ---- */
.axonos-landing-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.axonos-landing-bg__glow {
  position: absolute;
  top: -340px;
  left: 50%;
  transform: translateX(-50%);
  width: 1100px;
  height: 680px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(96, 84, 210, 0.2), transparent 65%);
  filter: blur(40px);
}

.axonos-landing-bg__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(circle at 50% 12%, #000, transparent 70%);
  -webkit-mask-image: radial-gradient(circle at 50% 12%, #000, transparent 70%);
}

html.noVNC_connected .axonos-landing-bg {
  display: none;
}

/* ---- Top bar ---- */
.axonos-topbar {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 0;
}

.axonos-topbar__brand {
  display: flex;
  align-items: center;
  gap: 11px;
}

.axonos-topbar__logo {
  height: 26px;
  width: auto;
  display: block;
}

.axonos-beta-chip {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--warm);
  border: 1px solid rgba(242, 193, 78, 0.5);
  border-radius: 999px;
  padding: 3px 10px;
  font-family: var(--font-mono);
  text-transform: uppercase;
  opacity: 0.95;
}

.axonos-topbar__meta {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Network pill sits in the topbar now: keep pill styles, drop centering */
.axonos-topbar .axonos-network-banner {
  margin: 0;
  font-size: 0.72rem;
}

/* ---- Hero ---- */
.axonos-hero {
  position: relative;
  z-index: 10;
  padding: 34px 0 12px;
}

@media (min-width: 993px) {
  .axonos-hero {
    padding: 38px 0 20px;
    box-sizing: border-box;
  }
}

.axonos-hero__globe {
  position: absolute;
  top: -60px;
  right: -30px;
  width: 620px;
  height: 620px;
  max-width: 52vw;
  pointer-events: none;
  z-index: 1;
}

.axonos-hero__globe canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.axonos-loader-quote {
  margin-top: 32px;
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 20px;
  width: 100%;
  max-width: 320px;
}

.axonos-loader-quote p {
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 450;
  line-height: 1.55;
  color: #878da6;
  margin: 0;
  font-style: italic;
}

.axonos-loader-quote cite {
  display: block;
  margin-top: 8px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  color: var(--cyan);
  letter-spacing: 0.06em;
  font-style: normal;
}

.axonos-hero__copy {
  position: relative;
  z-index: 2;
  max-width: 640px;
}

.axonos-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 14px;
  border-radius: 99px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.03);
  margin-bottom: 24px;
}

.axonos-hero__badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  animation: axonos-pulse-dot 2.4s ease-in-out infinite;
  flex: 0 0 auto;
}

@keyframes axonos-pulse-dot {

  0%,
  100% {
    opacity: 0.55;
    transform: scale(0.8);
  }

  50% {
    opacity: 1;
    transform: scale(1);
  }
}

.axonos-hero__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(38px, 5vw, 66px);
  line-height: 1.02;
  font-weight: 800;
  letter-spacing: -0.012em;
  color: #f4f5fb;
}

.axonos-hero__sub {
  margin: 22px 0 0;
  max-width: 600px;
  font-size: 16.5px;
  line-height: 1.6;
  color: #9ca2ba;
  font-weight: 300;
  font-family: var(--font-body);
}

.axonos-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
  margin-top: 30px;
}

.axonos-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 13px;
  padding: 14px 26px;
  font-size: 15px;
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  transition: filter 0.18s ease, transform 0.18s ease, background 0.18s ease;
}

.axonos-cta--primary {
  border: none;
  color: #fff;
  background: var(--grad-primary);
  box-shadow: 0 14px 34px -14px rgba(123, 108, 255, 0.95);
}

.axonos-cta--primary:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.axonos-cta--ghost {
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.03);
  color: #d7dae6;
}

.axonos-cta--ghost:hover {
  background: rgba(255, 255, 255, 0.06);
}

.axonos-hero__note {
  display: none !important;
  margin: 26px 0 0;
  max-width: 640px;
  font-size: 0.72rem;
  line-height: 1.55;
  color: rgba(242, 193, 78, 0.72);
  font-family: var(--font-mono);
  letter-spacing: 0.01em;
}

.axonos-hero__note strong {
  color: var(--warm);
}

/* ---- Section heads ---- */
.axonos-section-head {
  margin-bottom: 18px;
}

.axonos-section-head--center {
  text-align: center;
  margin-bottom: 30px;
}

.axonos-section-head__kick {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: #7b8199;
  font-family: var(--font-body);
}

.axonos-section-head__title {
  margin-top: 6px;
  font-size: 22px;
  font-weight: 600;
  color: #edeff6;
  letter-spacing: -0.01em;
  font-family: var(--font-body);
}

/* ---- Landing main: flatten the catalog panel onto the page ---- */
.axonos-landing-main {
  position: relative;
  z-index: 10;
  margin-top: 26px;
}

.axonos-hero-panel {
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  padding: 0;
}

/* ---- Tabs as segmented pills ---- */
.axonos-tabs-nav {
  border-bottom: none;
  padding-bottom: 0;
  margin: 1.1rem 0 1rem;
}

.axonos-tab-btn {
  background: rgba(255, 255, 255, 0.022);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 99px;
  color: #9097b0;
  padding: 8px 16px;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 500;
  top: 0;
}

.axonos-tab-btn:hover {
  color: var(--axonos-light);
  background: rgba(123, 108, 255, 0.08);
  border-color: rgba(123, 108, 255, 0.3);
}

.axonos-tab-btn.active {
  color: #d8d2ff;
  background: rgba(123, 108, 255, 0.16);
  border: 1px solid rgba(123, 108, 255, 0.5);
  box-shadow: none;
}

.axonos-tab-btn.active::after {
  content: none;
}

/* ---- Search + filter pills (design style) ---- */
.axonos-templates-search-input {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.025);
  border-radius: 12px;
  padding: 11px 16px;
  font-size: 13.5px;
  box-shadow: none;
}

.axonos-templates-search-input:focus {
  border-color: rgba(123, 108, 255, 0.55);
  box-shadow: 0 0 0 1px rgba(123, 108, 255, 0.2);
}

.axonos-filter-pill {
  background: rgba(255, 255, 255, 0.022);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #9097b0;
  padding: 7px 14px;
  font-size: 12px;
}

.axonos-filter-pill.active {
  color: #d8d2ff;
  background: rgba(123, 108, 255, 0.16);
  border-color: rgba(123, 108, 255, 0.5);
  font-weight: 600;
  box-shadow: none;
}

/* ---- Template cards (design card language) ---- */
.axonos-templates-grid {
  max-height: 560px;
}

.axonos-template-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012));
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 18px;
  padding: 18px;
  box-shadow: none;
}

.axonos-template-card:hover {
  border-color: rgba(123, 108, 255, 0.4);
  background: linear-gradient(180deg, rgba(123, 108, 255, 0.08), rgba(255, 255, 255, 0.012));
  box-shadow: none;
}

.axonos-template-card.selected {
  border-color: rgba(123, 108, 255, 0.55);
  background: linear-gradient(180deg, rgba(123, 108, 255, 0.12), rgba(255, 255, 255, 0.012));
  box-shadow: 0 0 0 1px rgba(123, 108, 255, 0.2), 0 16px 44px -18px rgba(123, 108, 255, 0.5);
}

.axonos-template-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
}

.axonos-template-tag {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  color: #9aa0ba;
  border-radius: 6px;
  font-family: var(--font-body);
  font-weight: 500;
}

/* ---- How it works ---- */
.axonos-steps {
  position: relative;
  z-index: 10;
  padding: 56px 0 0;
}

.axonos-steps__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.axonos-step-card {
  position: relative;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
  padding: 26px;
}

.axonos-step-card__n {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--cyan);
  letter-spacing: 0.1em;
}

.axonos-step-card__title {
  margin-top: 14px;
  font-size: 17px;
  font-weight: 600;
  color: #eff1f7;
  font-family: var(--font-body);
}

.axonos-step-card__body {
  margin-top: 8px;
  font-size: 13.5px;
  line-height: 1.6;
  color: #8b91aa;
  font-weight: 300;
  font-family: var(--font-body);
}

/* ---- Trust strip ---- */
.axonos-trust {
  position: relative;
  z-index: 10;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 40px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.018);
  overflow: hidden;
}

.axonos-trust-item {
  padding: 24px 26px;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.axonos-trust-item:last-child {
  border-right: none;
}

.axonos-trust-item__icon {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--green);
  background: rgba(79, 224, 192, 0.1);
  border: 1px solid rgba(79, 224, 192, 0.22);
}

.axonos-trust-item__title {
  font-size: 13.5px;
  font-weight: 600;
  color: #e6e9f2;
  font-family: var(--font-body);
}

.axonos-trust-item__body {
  margin-top: 4px;
  font-size: 12.5px;
  line-height: 1.5;
  color: #878da6;
  font-weight: 300;
  font-family: var(--font-body);
}

/* ---- Footer credit ---- */
.axonos-quote__credit {
  margin-top: 14px;
  font-size: 12.5px;
  color: #5c6280;
  font-family: var(--font-body);
  font-style: normal;
}

/* ---- Wallet dialog: v2 modal card ---- */
#noVNC_credentials_dlg.axonos-wallet-card {
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(170deg, rgba(24, 26, 40, 0.97), rgba(13, 14, 24, 0.97));
  box-shadow: 0 50px 130px -30px rgba(0, 0, 0, 0.85);
}

/* ---- Session HUD: v2 card ---- */
.axonos-session-hud {
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(13, 14, 24, 0.92);
}

/* ---- Responsive ---- */
@media (max-width: 1100px) {
  .axonos-hero__globe {
    top: -30px;
    right: -80px;
    width: 480px;
    height: 480px;
    opacity: 0.8;
  }
}

@media (max-width: 992px) {
  .axonos-topbar {
    padding: 12px 0 4px;
    flex-wrap: wrap;
  }

  .axonos-hero {
    padding: 22px 0 8px;
  }

  .axonos-hero__globe {
    display: none;
  }

  .axonos-hero__copy {
    max-width: 100%;
  }

  .axonos-steps__grid,
  .axonos-trust {
    grid-template-columns: 1fr;
  }

  .axonos-trust-item {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }

  .axonos-trust-item:last-child {
    border-bottom: none;
  }

  .axonos-landing-main {
    margin-top: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {

  .axonos-hero__badge-dot,
  .axonos-rail-pulse {
    animation: none;
  }
}

/* ---- SSH toggle rendered as a v2 switch ---- */
.axonos-ssh-toggle__input {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 42px;
  height: 24px;
  margin-top: 1px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.12);
  border: none;
  outline: none;
  transition: background 0.2s ease;
}

.axonos-ssh-toggle__input::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  transition: transform 0.2s ease;
}

.axonos-ssh-toggle__input:checked {
  background: linear-gradient(90deg, #6a57f2, #8b7cff);
}

.axonos-ssh-toggle__input:checked::before {
  transform: translateX(18px);
}

.axonos-ssh-toggle__input:focus-visible {
  box-shadow: 0 0 0 2px rgba(123, 108, 255, 0.5);
}

/* ---- Wallet dialog primary actions: gradient CTA ---- */
#axonos_connect_wallet_btn,
#axonos_retry_connect_btn,
#axonos_retry_connect_error_btn,
#axonos_verify_deposit_btn {
  background: var(--grad-primary) !important;
  border: none !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  border-radius: 12px !important;
  box-shadow: var(--shadow-primary);
}

#axonos_connect_wallet_btn:hover,
#axonos_retry_connect_btn:hover,
#axonos_retry_connect_error_btn:hover,
#axonos_verify_deposit_btn:hover {
  filter: brightness(1.08);
}

/* ==========================================================================
   AxonOS Screen States and Layout Visibility
   ========================================================================== */
#noVNC_connect_dlg.axonos-state-landing .axonos-view-landing {
  display: block !important;
}

#noVNC_connect_dlg.axonos-state-landing .axonos-view-dashboard {
  display: none !important;
}

#noVNC_connect_dlg.axonos-state-landing .axonos-view-wizard {
  display: none !important;
}

#noVNC_connect_dlg.axonos-state-landing .axonos-hero {
  display: block !important;
}

#noVNC_connect_dlg.axonos-state-dashboard .axonos-view-landing {
  display: none !important;
}

#noVNC_connect_dlg.axonos-state-dashboard .axonos-view-dashboard {
  display: block !important;
}

#noVNC_connect_dlg.axonos-state-dashboard .axonos-view-wizard {
  display: none !important;
}

#noVNC_connect_dlg.axonos-state-dashboard .axonos-hero {
  display: none !important;
}

#noVNC_connect_dlg.axonos-state-wizard .axonos-view-landing {
  display: none !important;
}

#noVNC_connect_dlg.axonos-state-wizard .axonos-view-dashboard {
  display: none !important;
}

#noVNC_connect_dlg.axonos-state-wizard .axonos-view-wizard {
  display: block !important;
}

#noVNC_connect_dlg.axonos-state-wizard .axonos-hero {
  display: none !important;
}

#noVNC_connect_dlg:not(.axonos-state-landing):not(.axonos-state-dashboard):not(.axonos-state-wizard) .axonos-view-landing {
  display: block !important;
}

#noVNC_connect_dlg:not(.axonos-state-landing):not(.axonos-state-dashboard):not(.axonos-state-wizard) .axonos-view-dashboard {
  display: none !important;
}

#noVNC_connect_dlg:not(.axonos-state-landing):not(.axonos-state-dashboard):not(.axonos-state-wizard) .axonos-view-wizard {
  display: none !important;
}

#noVNC_connect_dlg:not(.axonos-state-landing):not(.axonos-state-dashboard):not(.axonos-state-wizard) .axonos-hero {
  display: block !important;
}

#noVNC_connect_dlg.axonos-state-landing .axonos-footer-banner {
  display: flex !important;
}

#noVNC_connect_dlg:not(.axonos-state-landing):not(.axonos-state-dashboard):not(.axonos-state-wizard) .axonos-footer-banner {
  display: flex !important;
}

.axonos-footer-banner {
  position: relative;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 54px 30px 44px;
  font-size: 12.5px;
  color: #5c6280;
  z-index: 10;
  font-family: var(--font-body);
  pointer-events: auto;
  gap: 0 16px;
  line-height: 1;
}

/* ==========================================================================
   Stepper & Launch Wizard Styles
   ========================================================================== */
.axonos-wizard-container {
  width: 100%;
  max-width: 1280px;
  margin: 10px auto 0;
  padding: 0 10px;
}

.axonos-wizard-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 10px 0 32px;
}

.axonos-wizard-step {
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0.45;
  transition: opacity 0.25s ease;
}

.axonos-wizard-step.active {
  opacity: 1;
}

.axonos-wizard-step.completed {
  opacity: 0.85;
}

.axonos-wizard-step__dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--axonos-light);
  transition: background-color 0.25s, border-color 0.25s, color 0.25s;
}

.axonos-wizard-step.active .axonos-wizard-step__dot {
  background: rgba(123, 108, 255, 0.16);
  border-color: var(--axonos-accent);
  color: #cfc9ff;
  box-shadow: 0 0 12px rgba(123, 108, 255, 0.25);
}

.axonos-wizard-step.completed .axonos-wizard-step__dot {
  background: rgba(79, 224, 192, 0.12);
  border-color: var(--green);
  color: var(--green);
}

.axonos-wizard-step__label {
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--axonos-light);
}

.axonos-wizard-step.active .axonos-wizard-step__label {
  font-weight: 600;
}

.axonos-wizard-step__line {
  width: 50px;
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  transition: background-color 0.25s;
}

.axonos-wizard-step__line.active {
  background: var(--axonos-accent);
}

/* Wizard Layout columns */
.axonos-wizard-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 350px;
  gap: 26px;
  align-items: start;
}

@media (max-width: 992px) {
  .axonos-wizard-layout {
    grid-template-columns: 1fr;
  }

  .axonos-wizard-rail {
    position: static !important;
    width: 100% !important;
  }
}

.axonos-wizard-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.axonos-wizard-pane {
  display: none;
  animation: axRise 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.axonos-wizard-pane.active {
  display: block;
}

.axonos-wizard-title {
  margin: 0 0 4px;
  font-family: var(--font-body);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #f1f2f8;
}

.axonos-wizard-subtitle {
  margin: 0 0 22px;
  font-size: 0.85rem;
  color: #8b91aa;
  font-weight: 300;
}

/* Step 2 GPU selection cards */
.axonos-gpu-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-bottom: 12px;
}

.axonos-gpu-cards-note {
  margin: 0 0 22px;
  font-size: 12px;
  line-height: 1.5;
  color: #878da6;
  font-weight: 300;
  font-family: var(--font-body);
}

@media (max-width: 600px) {
  .axonos-gpu-cards-grid {
    grid-template-columns: 1fr;
  }
}

.axonos-gpu-card {
  text-align: left;
  cursor: pointer;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012));
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 165px;
  transition: border-color 0.25s, background-color 0.25s, box-shadow 0.25s, transform 0.2s;
  outline: none;
}

.axonos-gpu-card:hover {
  border-color: rgba(123, 108, 255, 0.3);
  background: linear-gradient(180deg, rgba(123, 108, 255, 0.04), rgba(255, 255, 255, 0.012));
  transform: translateY(-1px);
}

.axonos-gpu-card.selected {
  border-color: var(--axonos-accent) !important;
  background: rgba(123, 108, 255, 0.08) !important;
  box-shadow: 0 0 14px rgba(123, 108, 255, 0.2) !important;
}

.axonos-gpu-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.axonos-gpu-card__title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.axonos-gpu-card__name {
  font-size: 0.95rem;
  font-weight: 600;
  color: #f1f2f8;
}

.axonos-gpu-card__popular {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #1a1330;
  background: #b7a6ff;
  padding: 2px 6px;
  border-radius: 5px;
}

.axonos-gpu-card__spec {
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: #8b91aa;
}

.axonos-gpu-card__check {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  color: transparent;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.axonos-gpu-card.selected .axonos-gpu-card__check {
  background-color: var(--axonos-accent);
  border-color: var(--axonos-accent);
  color: #fff;
}

.axonos-gpu-card__specs-row {
  display: flex;
  gap: 18px;
  margin-top: 14px;
}

.axonos-gpu-card__spec-item {
  display: flex;
  flex-direction: column;
}

.axonos-gpu-card__spec-label {
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  color: #6b7187;
  text-transform: uppercase;
}

.axonos-gpu-card__spec-value {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: #d7dae6;
  margin-top: 2px;
}

.axonos-gpu-card__rate-row {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.axonos-gpu-card__rate {
  font-family: var(--font-mono);
  font-size: 1.15rem;
  font-weight: 600;
  color: #cfc9ff;
}

.axonos-gpu-card__rate-label {
  font-size: 0.75rem;
  color: #8b91aa;
}

/* Storage volume range slider */
.axonos-storage-slider-wrap {
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
  padding: 20px;
  margin-bottom: 14px;
}

.axonos-storage-slider-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.axonos-storage-slider-title {
  font-size: 0.88rem;
  font-weight: 600;
  color: #edeff6;
}

.axonos-storage-slider-val {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 600;
  color: #cfc9ff;
}

.axonos-storage-slider-desc {
  font-size: 0.78rem;
  color: #878da6;
  font-weight: 300;
  margin-bottom: 16px;
  line-height: 1.45;
}

.axonos-storage-slider {
  width: 100%;
  accent-color: var(--axonos-accent);
  cursor: pointer;
  height: 6px;
  border-radius: 99px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.axonos-storage-slider-limits {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 0.7rem;
  color: #6b7187;
  font-family: var(--font-mono);
}

/* SSH toggle option card */
.axonos-ssh-card-toggle {
  width: 100%;
  text-align: left;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.022);
  padding: 16px 18px;
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s;
}

.axonos-ssh-card-toggle:hover {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
}

.axonos-ssh-card-toggle__switch {
  position: relative;
  flex: 0 0 auto;
  width: 38px;
  height: 20px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.1);
  transition: background-color 0.2s;
  margin-top: 2px;
}

.axonos-ssh-card-toggle.checked .axonos-ssh-card-toggle__switch {
  background: linear-gradient(90deg, #6a57f2, #8b7cff);
}

.axonos-ssh-card-toggle__knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.2s ease;
}

.axonos-ssh-card-toggle.checked .axonos-ssh-card-toggle__knob {
  transform: translateX(18px);
}

.axonos-ssh-card-toggle__title {
  font-size: 0.88rem;
  font-weight: 600;
  color: #e6e9f2;
}

.axonos-ssh-card-toggle__desc {
  margin-top: 3px;
  font-size: 0.78rem;
  line-height: 1.45;
  color: #878da6;
  font-weight: 300;
}

/* Pay tokens selection bar */
.axonos-wizard-token-tabs {
  display: flex;
  gap: 8px;
  padding: 6px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.22);
  margin-bottom: 18px;
}

.axonos-wizard-token-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  background: none;
  border-radius: 9px;
  padding: 8px;
  color: #9aa0ba;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}

.axonos-wizard-token-tab:hover {
  color: #e2e5f0;
}

.axonos-wizard-token-tab.active {
  background: rgba(255, 255, 255, 0.05);
  color: #e2e5f0;
}

.axonos-wizard-token-tab__badge {
  font-size: 0.6rem;
  font-weight: 600;
  color: #1a1330;
  background: var(--green);
  padding: 2px 5px;
  border-radius: 4px;
  margin-left: 2px;
}

/* Amount inputs and calculator specs */
.axonos-deposit-input-card {
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
  padding: 22px;
  margin-bottom: 18px;
}

.axonos-deposit-input-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #8b91aa;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.axonos-deposit-input-field-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.28);
  border-radius: 13px;
  padding: 12px 16px;
}

.axonos-deposit-input-field {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  outline: none;
  color: #f1f2f8;
  font-size: 1.35rem;
  font-weight: 600;
  font-family: var(--font-mono);
}

.axonos-deposit-input-ticker {
  font-size: 0.85rem;
  font-weight: 600;
  color: #a6acc2;
  padding: 6px 12px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.05);
}

.axonos-deposit-quick-grid {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.axonos-deposit-quick-btn {
  flex: 1;
  padding: 9px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  color: #c7cce0;
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s;
}

.axonos-deposit-quick-btn:hover {
  background: rgba(255, 255, 255, 0.07);
}

.axonos-deposit-calc-rows {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  display: flex;
  flex-direction: column;
  gap: 11px;
  font-size: 0.8rem;
}

.axonos-deposit-calc-row {
  display: flex;
  justify-content: space-between;
  color: #9097b0;
}

.axonos-deposit-calc-row__val {
  font-family: var(--font-mono);
  font-weight: 600;
  color: #e6e9f2;
}

.axonos-deposit-calc-row__val--purple {
  color: #cfc9ff;
  font-size: 0.9rem;
}

.axonos-deposit-calc-row--bonus {
  color: var(--green);
}

/* Pay launch footer card banner */
.axonos-pay-banner {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 13px;
  border: 1px solid rgba(79, 224, 192, 0.2);
  background: rgba(79, 224, 192, 0.06);
  margin-bottom: 14px;
}

.axonos-pay-banner__icon {
  flex: 0 0 auto;
  color: var(--green);
  display: flex;
}

.axonos-pay-banner__text {
  font-size: 0.78rem;
  color: #a9d9ce;
  font-weight: 300;
  line-height: 1.45;
}

.axonos-pay-banner__highlight {
  color: #cff3ea;
  font-weight: 600;
}

/* Explicitly separate release-test credit from real payment controls. */
.axonos-test-credit-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px 16px;
  margin: 12px 0 16px;
  padding: 13px 14px;
  border: 1px dashed rgba(123, 108, 255, 0.42);
  border-radius: 13px;
  background: rgba(123, 108, 255, 0.07);
  text-align: left;
}

.axonos-test-credit-panel[hidden] {
  display: none !important;
}

.axonos-test-credit-panel strong {
  color: #d7d2ff;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
}

.axonos-test-credit-panel p {
  margin: 3px 0 0;
  color: #9299b1;
  font-size: 0.72rem;
  line-height: 1.45;
}

.axonos-test-credit-btn {
  padding: 9px 13px;
  border: 1px solid rgba(123, 108, 255, 0.55);
  border-radius: 9px;
  background: rgba(123, 108, 255, 0.15);
  color: #e2deff;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.axonos-test-credit-btn:hover {
  background: rgba(123, 108, 255, 0.24);
}

.axonos-test-credit-btn:disabled {
  cursor: wait;
  opacity: 0.55;
}

.axonos-test-credit-msg {
  grid-column: 1 / -1;
  min-height: 0;
}

@media (max-width: 560px) {
  .axonos-test-credit-panel {
    grid-template-columns: 1fr;
  }

  .axonos-test-credit-btn {
    width: 100%;
  }
}

/* Wizard summary rail elements */
.axonos-wizard-rail {
  position: sticky;
  top: 20px;
}

.axonos-rail-card {
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.012));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow: hidden;
  box-shadow: 0 30px 80px -40px rgba(0, 0, 0, 0.7);
}

.axonos-rail-header {
  padding: 20px 22px 0;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: #8b91aa;
  text-transform: uppercase;
}

.axonos-rail-body {
  padding: 16px 22px;
  display: flex;
  flex-direction: column;
}

.axonos-rail-item {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.axonos-rail-item:last-child {
  border-bottom: none;
}

.axonos-rail-item__icon-wrap {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.09);
  color: var(--axonos-light);
}

.axonos-rail-item__icon-wrap--purple {
  background: rgba(123, 108, 255, 0.12);
  border-color: rgba(123, 108, 255, 0.24);
  color: #b7a6ff;
}

.axonos-rail-item__details {
  flex: 1;
  min-width: 0;
}

.axonos-rail-item__label {
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  color: #6b7187;
  text-transform: uppercase;
}

.axonos-rail-item__value {
  font-size: 0.88rem;
  font-weight: 600;
  color: #edeff6;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.axonos-rail-item__subvalue {
  font-size: 0.7rem;
  color: #8b91aa;
  font-family: var(--font-mono);
  margin-top: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.axonos-rail-item__flex-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
}

.axonos-rail-item__inline-val {
  font-family: var(--font-mono);
  font-size: 0.88rem;
  font-weight: 600;
  color: #edeff6;
}

.axonos-rail-footer {
  padding: 18px 22px;
  background: rgba(0, 0, 0, 0.22);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.axonos-rail-footer__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8rem;
  color: #9097b0;
  margin-bottom: 8px;
}

.axonos-rail-footer__row:last-of-type {
  margin-bottom: 0;
}

.axonos-rail-footer__val {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  font-weight: 600;
  color: #cfc9ff;
}

.axonos-rail-footer__val-sub {
  font-size: 0.7rem;
  color: #8b91aa;
}

.axonos-rail-footer__val--light {
  color: #e6e9f2;
}

.axonos-rail-action-btn {
  margin-top: 14px !important;
  width: 100%;
  border: none !important;
  border-radius: 12px !important;
  padding: 12px 18px !important;
  font-family: var(--font-body);
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: var(--grad-primary) !important;
  box-shadow: var(--shadow-primary) !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: filter 0.2s, transform 0.2s, box-shadow 0.2s !important;
}

.axonos-rail-action-btn:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.axonos-rail-action-btn svg {
  flex-shrink: 0;
  color: #fff;
}

.axonos-rail-action-hint {
  margin-top: 10px;
  text-align: center;
  font-size: 0.72rem;
  color: #6b7187;
  line-height: 1.4;
}

/* Back button in wizard content */
.axonos-wizard-back-btn {
  background: none;
  border: none;
  color: #9097b0;
  font-size: 0.85rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  padding: 4px;
  transition: color 0.2s;
}

.axonos-wizard-back-btn:hover {
  color: #c7cce0;
}

.axonos-wizard-back-btn svg {
  color: inherit;
}

/* ==========================================================================
   User Dashboard Layout Styles
   ========================================================================== */
.axonos-dashboard-container {
  width: 100%;
  max-width: 1280px;
  margin: 10px auto 0;
  padding: 0 10px 40px;
}

.axonos-dashboard-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.axonos-dashboard-header__tag {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: #7b8199;
  text-transform: uppercase;
}

.axonos-dashboard-title {
  margin: 10px 0 0;
  font-family: var(--font-body);
  font-size: 2.2rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #f4f5fb;
  line-height: 1.1;
}

.axonos-dashboard-new-btn {
  border: none !important;
  border-radius: 13px !important;
  padding: 12px 20px !important;
  font-family: var(--font-body);
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: var(--grad-primary) !important;
  box-shadow: 0 12px 30px -12px rgba(123, 108, 255, 0.9) !important;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  transition: filter 0.2s, transform 0.2s, box-shadow 0.2s !important;
}

.axonos-dashboard-new-btn:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.axonos-dashboard-new-btn svg {
  color: inherit;
}

.axonos-dashboard-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 36px;
}

@media (max-width: 768px) {
  .axonos-dashboard-stats-grid {
    grid-template-columns: 1fr;
  }
}

.axonos-dashboard-stat-card {
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012));
  padding: 22px;
  display: flex;
  flex-direction: column;
}

.axonos-dashboard-stat-card--accent {
  border-color: rgba(123, 108, 255, 0.24);
  background: linear-gradient(180deg, rgba(123, 108, 255, 0.1), rgba(255, 255, 255, 0.012));
}

.axonos-dashboard-stat-card__label {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: #8b91aa;
  text-transform: uppercase;
}

.axonos-dashboard-stat-card--accent .axonos-dashboard-stat-card__label {
  color: #9aa0bd;
}

.axonos-dashboard-stat-card__value-row {
  margin-top: 12px;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.axonos-dashboard-stat-card__value {
  font-family: var(--font-mono);
  font-size: 2rem;
  font-weight: 600;
  color: #f1f2f8;
  letter-spacing: -0.02em;
}

.axonos-dashboard-stat-card__value-unit {
  font-size: 0.8rem;
  color: #8b91aa;
}

.axonos-dashboard-stat-card__action-btn {
  align-self: flex-start;
  margin-top: 16px;
  border: 1px solid rgba(123, 108, 255, 0.4) !important;
  background: rgba(123, 108, 255, 0.14) !important;
  color: #cfc9ff !important;
  -webkit-text-fill-color: #cfc9ff !important;
  border-radius: 10px !important;
  padding: 8px 14px !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.2s !important;
}

.axonos-dashboard-stat-card__action-btn:hover {
  background: rgba(123, 108, 255, 0.22) !important;
}

.axonos-dashboard-stat-card__desc {
  margin-top: 16px;
  font-size: 0.78rem;
  color: #878da6;
  font-weight: 300;
}

.axonos-dashboard-stat-card__desc b {
  color: #cfc9ff;
  font-family: var(--font-mono);
  font-weight: 600;
}

.axonos-dashboard-stat-card__wallet-row {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 9px;
}

.axonos-dashboard-stat-card__wallet-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 9px rgba(79, 224, 192, 0.7);
}

.axonos-dashboard-stat-card__wallet-addr {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: #e6e9f2;
}

.axonos-dashboard-section-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: #7b8199;
  margin: 40px 0 16px;
  text-transform: uppercase;
}

/* Dashboard Sessions Grid and Cards */
.axonos-session-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

@media (max-width: 768px) {
  .axonos-session-cards-grid {
    grid-template-columns: 1fr;
  }
}

.axonos-session-card {
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012));
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.axonos-session-card--paused {
  border-color: rgba(183, 166, 255, 0.24);
  background: linear-gradient(180deg, rgba(123, 108, 255, 0.07), rgba(255, 255, 255, 0.012));
}

.axonos-session-card--ending {
  opacity: 0.62;
  pointer-events: none;
}

.axonos-session-card__top {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.axonos-session-card__icon-wrap {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
  color: var(--axonos-light);
}

.axonos-session-card__icon-wrap svg {
  width: 22px;
  height: 22px;
}

.axonos-session-card__details {
  flex: 1;
  min-width: 0;
}

.axonos-session-card__name-row {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}

.axonos-session-card__name {
  font-size: 0.95rem;
  font-weight: 600;
  color: #f1f2f8;
}

.axonos-session-card__status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--green);
  padding: 2px 7px;
  border-radius: 99px;
  background: rgba(79, 224, 192, 0.1);
  border: 1px solid rgba(79, 224, 192, 0.24);
}

.axonos-session-card__status-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--green);
}

.axonos-session-card__status--paused {
  color: #cfc9ff;
  background: rgba(123, 108, 255, 0.12);
  border-color: rgba(183, 166, 255, 0.28);
}

.axonos-session-card__status--paused .axonos-session-card__status-dot {
  background: #b7a6ff;
}

.axonos-session-card__specs {
  margin-top: 3px;
  font-size: 0.72rem;
  color: #8b91aa;
  font-family: var(--font-mono);
}

.axonos-session-card__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.axonos-session-card__rate-desc {
  font-size: 0.75rem;
  color: #9097b0;
}

.axonos-session-card__rate-desc b {
  color: #cfc9ff;
  font-family: var(--font-mono);
  font-weight: 600;
}

.axonos-session-card__actions {
  display: flex;
  gap: 9px;
}

.axonos-session-card__btn {
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
  padding: 8px 14px !important;
  transition: background-color 0.2s, transform 0.2s !important;
}

.axonos-session-card__btn--danger {
  border: 1px solid rgba(255, 95, 87, 0.22) !important;
  background: rgba(255, 95, 87, 0.06) !important;
  color: #ff9a93 !important;
  -webkit-text-fill-color: #ff9a93 !important;
}

.axonos-session-card__btn--danger:hover {
  background: rgba(255, 95, 87, 0.12) !important;
}

.axonos-session-card__btn--primary {
  border: none !important;
  background: linear-gradient(180deg, #8b7cff, #6a57f2) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.axonos-session-card__btn--primary:hover {
  filter: brightness(1.08);
}

.axonos-session-card__btn--primary svg {
  color: inherit;
}

/* Empty State Card */
.axonos-dashboard-empty {
  border-radius: 18px;
  border: 1px dashed rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.015);
  padding: 50px 30px;
  text-align: center;
}

.axonos-dashboard-empty__icon-wrap {
  width: 54px;
  height: 54px;
  margin: 0 auto 18px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(123, 108, 255, 0.12);
  border: 1px solid rgba(123, 108, 255, 0.28);
  color: #b7a6ff;
}

.axonos-dashboard-empty__title {
  font-size: 0.95rem;
  font-weight: 600;
  color: #f1f2f8;
}

.axonos-dashboard-empty__desc {
  margin: 8px auto 22px;
  max-width: 400px;
  font-size: 0.78rem;
  line-height: 1.6;
  color: #9097b0;
  font-weight: 300;
}

.axonos-dashboard-empty__btn {
  border: none !important;
  border-radius: 12px !important;
  padding: 11px 22px !important;
  font-family: var(--font-body);
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: linear-gradient(180deg, #8b7cff, #6a57f2) !important;
  box-shadow: 0 12px 30px -12px rgba(123, 108, 255, 0.9) !important;
  cursor: pointer;
  transition: filter 0.2s, transform 0.2s !important;
}

.axonos-dashboard-empty__btn:hover {
  filter: brightness(1.08);
}

/* ==========================================================================
   Active Session Workspace sidebar & split view layout
   ========================================================================== */
html.noVNC_connected body {
  overflow: hidden !important;
}

/* Connected viewer + telemetry rail.
   NOTE: this build has no #noVNC_screen flex wrapper — #noVNC_container and
   .axonos-session-sidebar are body siblings. So the rail is a fixed column on
   the right and the viewer shrinks to leave room for it (reclaiming the full
   width when the rail is collapsed). */
html.noVNC_connected #noVNC_container {
  width: calc(100% - 320px) !important;
  height: 100% !important;
  position: relative !important;
  background: #0c0d15 !important;
  overflow: auto !important;
  transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* SSH-only sessions use the same viewer surface as RFB/WebRTC, but xterm owns
   its own focus and resize lifecycle. The local noVNC keyboard shim remains in
   the DOM for later desktop connections and stays behind the terminal mount. */
#noVNC_container.axonos-terminal-active {
  overflow: hidden !important;
}

.axonos-terminal-viewer {
  position: absolute;
  inset: 0;
  z-index: 10;
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  padding: 14px 14px 10px;
  overflow: hidden;
  background: #080910;
}

.axonos-terminal-viewer:focus {
  outline: none;
}

.axonos-terminal-viewer>.xterm,
.axonos-terminal-viewer .xterm-screen {
  height: 100%;
}

/* Desktop-only controls would be inert against a PTY. xterm handles text
   selection, copy/paste, and mobile keyboard focus inside its own textarea. */
html.axonos-terminal-active #axonos_mic_button,
html.axonos-terminal-active #noVNC_mobile_buttons,
html.axonos-terminal-active #noVNC_clipboard_button,
html.axonos-terminal-active #noVNC_clipboard,
html.axonos-terminal-active #noVNC_files_button,
html.axonos-terminal-active #noVNC_files,
html.axonos-terminal-active #noVNC_restart_session_button,
html.axonos-terminal-active .axonos-rfb-only {
  display: none !important;
}

/* Rail collapsed → viewer takes the whole width */
html.noVNC_connected:has(.axonos-session-sidebar.collapsed) #noVNC_container {
  width: 100% !important;
}

/* Telemetry rail — fixed right column over the connected viewer */
.axonos-session-sidebar {
  position: fixed;
  top: 0;
  right: 0;
  width: 320px;
  height: 100vh;
  background: #0a0b12;
  border-left: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  overflow-y: auto;
  z-index: 50;
  box-sizing: border-box;
  transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1), padding 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s;
}

.axonos-session-sidebar.collapsed {
  width: 0px !important;
  padding: 0px !important;
  opacity: 0;
  border-left: none !important;
  pointer-events: none;
}

/* Keep the billing HUD (wallet management) clear of the telemetry rail; it
   still carries Switch/Sign-out actions the rail doesn't. Snaps back to the
   corner when the rail is collapsed. */
html.noVNC_connected .axonos-session-hud {
  right: calc(332px + env(safe-area-inset-right, 0px)) !important;
}

html.noVNC_connected:has(.axonos-session-sidebar.collapsed) .axonos-session-hud {
  right: calc(12px + env(safe-area-inset-right, 0px)) !important;
}

.axonos-session-sidebar__section {
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012));
  padding: 20px;
}

.axonos-session-sidebar__sec-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.axonos-session-sidebar__sec-label {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: #8b91aa;
  text-transform: uppercase;
}

.axonos-session-sidebar__sec-val {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: #8b91aa;
}

.axonos-session-sidebar__sec-value-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.axonos-session-sidebar__sec-value {
  font-family: var(--font-mono);
  font-size: 2.2rem;
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.02em;
}

.axonos-session-sidebar__sec-value-unit {
  font-size: 0.8rem;
  color: #8b91aa;
}

.axonos-session-sidebar__sec-hint {
  margin-top: 6px;
  font-size: 0.78rem;
  color: #9097b0;
  line-height: 1.45;
}

.axonos-session-sidebar__sec-hint b {
  color: #d7dae6;
  font-weight: 600;
}

/* Progress bar inside sidebar */
.axonos-sidebar-progress-track {
  margin-top: 14px;
  height: 6px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
  position: relative;
}

.axonos-sidebar-progress-bar {
  height: 100%;
  background: var(--grad-primary);
  border-radius: 99px;
  transition: width 0.3s ease;
  width: 0%;
}

.axonos-sidebar-progress-bar--green {
  background: var(--green) !important;
}

.axonos-sidebar-progress-bar--orange {
  background: #ff5f57 !important;
}

/* Action button in sidebar */
.axonos-sidebar-action-btn {
  margin-top: 14px !important;
  width: 100%;
  border: none !important;
  border-radius: 12px !important;
  padding: 11px !important;
  font-family: var(--font-body);
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: var(--grad-primary) !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: filter 0.2s !important;
}

.axonos-sidebar-action-btn:hover {
  filter: brightness(1.08);
}

/* Telemetry list progress bars */
.axonos-telemetry-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.axonos-telemetry-item {
  display: flex;
  flex-direction: column;
}

.axonos-telemetry-item__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 7px;
}

.axonos-telemetry-item__label {
  font-size: 0.78rem;
  color: #a6acc2;
}

.axonos-telemetry-item__val {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  color: #d7dae6;
}

/* Control buttons inside sidebar */
.axonos-sidebar-controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.axonos-sidebar-ctrl-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
  transition: background-color 0.2s;
}

.axonos-sidebar-ctrl-btn:hover {
  background: rgba(255, 255, 255, 0.06);
}

.axonos-sidebar-ctrl-btn__icon {
  flex: 0 0 auto;
  color: #a6acc2;
  display: flex;
}

.axonos-sidebar-ctrl-btn__details {
  display: flex;
  flex-direction: column;
}

.axonos-sidebar-ctrl-btn__title {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  color: #e6e9f2;
}

.axonos-sidebar-ctrl-btn__desc {
  font-size: 0.7rem;
  color: #878da6;
  font-weight: 300;
  margin-top: 1px;
}

.axonos-sidebar-ctrl-btn--danger {
  border-color: rgba(255, 95, 87, 0.22);
  background: rgba(255, 95, 87, 0.06);
}

.axonos-sidebar-ctrl-btn--danger:hover {
  background: rgba(255, 95, 87, 0.1);
}

.axonos-sidebar-ctrl-btn--danger .axonos-sidebar-ctrl-btn__icon {
  color: #ff7a72;
}

.axonos-sidebar-ctrl-btn--danger .axonos-sidebar-ctrl-btn__title {
  color: #ff9a93;
}

.axonos-sidebar-ctrl-btn--danger .axonos-sidebar-ctrl-btn__desc {
  color: #b58783;
}

/* Sidebar collapse/expand toggle button */
.axonos-sidebar-toggle {
  position: absolute;
  top: 12px;
  right: 332px;
  z-index: 100;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(8, 10, 18, 0.85);
  backdrop-filter: blur(4px);
  color: #a6acc2;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: right 0.3s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s, background-color 0.2s;
}

.axonos-sidebar-toggle:hover {
  background-color: rgba(255, 255, 255, 0.05);
  color: #fff;
}

.axonos-sidebar-toggle.collapsed {
  right: 12px !important;
}

.axonos-sidebar-toggle svg {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.axonos-sidebar-toggle.collapsed svg {
  transform: rotate(180deg);
}

/* Adjust control bar hints in full-screen */
#noVNC_control_bar_hint {
  z-index: 30 !important;
}

/* ==========================================================================
   Boot Checklist Loader Progress Styles
   ========================================================================== */
.axonos-prep-steps {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 14px;
}

.axonos-prep-step {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 11px 0;
  opacity: 0.35;
  transition: opacity 0.3s ease;
}

.axonos-prep-step[hidden] {
  display: none;
}

.axonos-prep-step.active {
  opacity: 0.95;
}

.axonos-prep-step.completed {
  opacity: 0.95;
}

.axonos-prep-step__icon {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--axonos-light);
  background: rgba(255, 255, 255, 0.03);
}

.axonos-prep-step.active .axonos-prep-step__icon {
  border-color: var(--axonos-accent);
  color: #cfc9ff;
  background: rgba(123, 108, 255, 0.1);
  animation: axPulse 1.5s ease-in-out infinite;
}

.axonos-prep-step.completed .axonos-prep-step__icon {
  border-color: var(--green);
  color: var(--green);
  background: rgba(79, 224, 192, 0.1);
}

.axonos-prep-step__label {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: #9097b0;
  font-weight: 300;
}

.axonos-prep-step.active .axonos-prep-step__label {
  font-weight: 500;
  color: #f2f3f9;
}

.axonos-prep-step.completed .axonos-prep-step__label {
  color: #9097b0;
}

/* Hide sidebar and toggle when not connected */
.axonos-session-sidebar,
.axonos-sidebar-toggle {
  display: none !important;
}

html.noVNC_connected .axonos-session-sidebar {
  display: flex !important;
}

html.noVNC_connected .axonos-sidebar-toggle {
  display: flex !important;
}

/* The fullscreen control in the left noVNC deck expands the document element.
 * Keep the remote desktop completely unobstructed in that mode; the telemetry
 * sidebar itself retains its state and this handle returns on fullscreen exit. */
html.noVNC_connected:fullscreen .axonos-sidebar-toggle {
  display: none !important;
}

html.noVNC_connected:-webkit-full-screen .axonos-sidebar-toggle {
  display: none !important;
}

html.noVNC_connected:-moz-full-screen .axonos-sidebar-toggle {
  display: none !important;
}

html.noVNC_connected:-ms-fullscreen .axonos-sidebar-toggle {
  display: none !important;
}

/* Landing screen session rail and layout alignment */
#noVNC_connect_dlg:not(.axonos-state-dashboard):not(.axonos-state-wizard) .axonos-connect-wrapper {
  display: none !important;
}

/* An SSH-only claim has no desktop viewer to fall back to. When terminal
 * authorization or WebSocket setup fails outside the dashboard, replace the
 * marketing/catalog content with the actual external-SSH recovery card. */
#noVNC_connect_dlg.axonos-state-landing.axonos-ssh-card-active .axonos-hero,
#noVNC_connect_dlg.axonos-state-landing.axonos-ssh-card-active .axonos-ready-envs-section,
#noVNC_connect_dlg.axonos-state-landing.axonos-ssh-card-active .axonos-steps,
#noVNC_connect_dlg.axonos-state-landing.axonos-ssh-card-active .axonos-footer-banner {
  display: none !important;
}

#noVNC_connect_dlg.axonos-state-landing.axonos-ssh-card-active .axonos-landing-main {
  display: block !important;
  max-width: 620px !important;
  margin: 32px auto 80px !important;
}

#noVNC_connect_dlg.axonos-state-landing.axonos-ssh-card-active .axonos-connect-wrapper {
  display: block !important;
  position: static !important;
  width: 100%;
  max-width: 620px;
  margin: 0 auto;
}

#noVNC_connect_dlg.axonos-state-landing.axonos-ssh-card-active .axonos-connect-wrapper>* {
  display: none !important;
}

#noVNC_connect_dlg.axonos-state-landing.axonos-ssh-card-active #axonos_ssh_connect_card {
  display: block !important;
  margin-top: 0;
}

#noVNC_connect_dlg:not(.axonos-state-dashboard):not(.axonos-state-wizard) .axonos-landing-main {
  display: block !important;
  max-width: 1280px;
  margin: 0 auto;
}

/* Global top bar layout & components styling */
/* The topbar lives INSIDE #noVNC_connect_dlg (already max-width 1280px with
   30px side padding on desktop), so it must not re-add width/padding of its
   own — that double-indented the brand vs the hero/content below. */
.axonos-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
  position: relative;
  z-index: 20;
}

.axonos-topbar__meta {
  display: flex;
  align-items: center;
  gap: 12px;
}

.axonos-topbar-network {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 99px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.022);
  font-size: 12.5px;
  color: #a6acc2;
}

.axonos-topbar-network-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4fe0c0;
  box-shadow: 0 0 10px rgba(79, 224, 192, 0.7);
  flex: 0 0 auto;
}

/* Testnet variant: gold dot + tinted border as a caution cue */
.axonos-topbar-network--testnet {
  border-color: rgba(242, 193, 78, 0.4);
  color: #e8d5a0;
}

.axonos-topbar-network--testnet .axonos-topbar-network-dot {
  background: #f2c14e;
  box-shadow: 0 0 10px rgba(242, 193, 78, 0.7);
}

/* Brand is an in-app home button; keep it looking like the plain brand */
button.axonos-topbar__brand {
  background: none;
  border: none;
  padding: 0;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.axonos-topbar__brand:hover .axonos-main-title {
  filter: brightness(1.1);
}

/* ⓘ tooltip inside the network pills: explains the L1 (AXGT/ETH) vs
   L2 Base (USDC) split. Pure CSS bubble, keyboard-focusable. */
.axonos-pill-info {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 7px;
  font-size: 12px;
  line-height: 1;
  color: #6b7187;
  cursor: help;
  outline: none;
  transition: color 0.15s ease;
}

.axonos-pill-info:hover,
.axonos-pill-info:focus-visible {
  color: #c7cce0;
}

.axonos-pill-info::after {
  content: attr(data-tip);
  position: absolute;
  top: calc(100% + 12px);
  right: -14px;
  width: 250px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(170deg, rgba(24, 26, 40, 0.98), rgba(13, 14, 24, 0.98));
  box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.8);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  color: #c7cce0;
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
  pointer-events: none;
  z-index: 120;
}

.axonos-pill-info:hover::after,
.axonos-pill-info:focus-visible::after {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Footer version stamp doubles as the marketing-site link (axonos.io) */
.axonos-footer-version-link {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s ease;
}

.axonos-footer-version-link:hover {
  color: #a9a2ff;
  text-decoration: underline;
}

/* Topbar secondary nav (Docs) — ghost pill, same vocabulary as the hero's
   "Browse environments" button, so the gradient stays unique to Connect wallet */
.axonos-topbar-ghost {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 99px;
  padding: 10px 20px;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 600;
  color: #d7dae6;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
  transition: background 0.18s ease;
}

.axonos-topbar-ghost:hover {
  background: rgba(255, 255, 255, 0.06);
}

/* Topbar primary CTA (Connect wallet) — prototype gradient pill */
.axonos-topbar-cta {
  display: inline-flex;
  align-items: center;
  border: none;
  border-radius: 99px;
  padding: 10px 20px;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  background: linear-gradient(180deg, #8b7cff, #6a57f2);
  box-shadow: 0 10px 24px -12px rgba(123, 108, 255, 0.9);
  cursor: pointer;
  transition: filter 0.18s ease;
}

.axonos-topbar-cta:hover {
  filter: brightness(1.08);
}

.axonos-topbar-credits {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 99px;
  border: 1px solid rgba(123, 108, 255, 0.3);
  background: rgba(123, 108, 255, 0.1);
  font-size: 12.5px;
  font-weight: 600;
  color: #cfc9ff;
}

.axonos-topbar-wallet-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 13px;
  border-radius: 99px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  font-family: var(--font-mono);
  font-size: 12px;
  color: #c7cce0;
  cursor: pointer;
  outline: none;
  transition: background 0.2s, border-color 0.2s;
}

.axonos-topbar-wallet-btn:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.2);
}

.axonos-topbar-wallet-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4fe0c0;
}

/* Responsive grid for featured templates (4 columns on desktop, wrapping on smaller screens) */
.axonos-featured-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  width: 100%;
}

@media (min-width: 600px) {
  .axonos-featured-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .axonos-featured-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Workspace loading state modifications for axonos-connection-loader */
.axonos-connection-loader.axonos-loader--workspace .axonos-prep-steps,
.axonos-connection-loader.axonos-loader--workspace .axonos-loader-quote {
  display: none !important;
}