.text-logo-green {
  color: #00FF66 !important;
}

/* 80s pixel look, clean and crisp */
.retro-body {
  font-family: 'Press Start 2P', cursive;
  color: #00FF66;
  letter-spacing: 1.5px;
  text-align: center;
  text-shadow: none; /* remove glow */
  image-rendering: pixelated;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
}

/* Optional: slightly larger font for readability */
.retro-body h1 {
  font-size: 1.2rem; /* Press Start 2P looks smaller by default */
  color: #00FF66;
}

.retro-body p label{
  color: #bfbfbf;
  font-size: 0.9rem;
  line-height: 1.6;
}

body {
  background-color: #212529; /* same as bg-dark */
}

header, footer {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

header .navbar-brand .brand-name {
  font-family: 'Press Start 2P', cursive;
  letter-spacing: 0.6px;
  font-size: 1.25rem;
}

/* Center navigation customization */
.menu-center {
  margin-left: -120px; /* adjust to visually center (fine-tune this value) */
}

/* Make the nav menu text larger and more balanced */
.menu-center .nav-link {
  font-size: 1.2rem;     /* Increase font size */
  font-weight: 500;      /* Slightly bold for clarity */
  letter-spacing: 0.5px; /* Adds subtle spacing */
  transition: color 0.2s ease, transform 0.2s ease;
}

/* Add color feedback on hover */
.menu-center .nav-link:hover {
  color: #00FF66; /* your neon green brand color */
  transform: scale(1.05); /* gentle zoom effect on hover */
}

/* Dark theme form fields */
.form-control-dark {
  background-color: #212529;   /* same as Bootstrap bg-dark */
  color: #f8f9fa;              /* white text */
  border: 1px solid #495057;   /* subtle border */
}

.form-control-dark:focus {
  background-color: #212529;
  color: #00FF66;              /* your brand green */
  border-color: #00FF66;
  box-shadow: 0 0 0 0.2rem rgba(0, 255, 102, 0.25);
}

/* Center and limit width of login form */
.form-narrow {
  max-width: 400px;    /* adjust as you like: 350–500px works well */
  margin: 0 auto;      /* center horizontally */
  padding-bottom: 8rem
}

/* Dark-themed input boxes */
.form-control-dark-gray {
  background-color: #303030;  /* dark gray background */
  color: #f8f9fa;             /* white text */
  border: 1px solid #495057;  /* subtle border */
}

.form-control-gray-text {
  background-color: #747574;  /* dark gray background */
  color: #f8f9fa;             /* white text */
  border: 1px solid #495057;  /* subtle border */
}

.padding-bottom {
  padding-bottom: 5rem
}

.navbar-brand span,
.navbar-nav .nav-link,
.navbar .btn {
  font-size: 1.25rem;   /* bumped up for stronger presence */
  font-weight: 600;
}
.navbar-brand span {
  font-size: 1.75rem;    /* make "HypaValley" larger like before */
  font-weight: 400;
}

.portrait-soft {
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.05);
  filter: saturate(1.05);
  overflow: hidden;
}

/* Subtle helper text style for forms */
.form-text {
  font-size: 0.75rem;          /* smaller than labels */
  color: rgba(255, 255, 255, 0.9); /* brighter for dark backgrounds */
  opacity: 1;
}
.form-text.text-muted,
.text-muted.form-text {
  color: rgba(255, 255, 255, 0.9) !important;
}

.auth-link {
  color: #f8f9fa;
  font-family: 'Press Start 2P', cursive;
  letter-spacing: 1.5px;
  font-size: 0.85rem;
  text-decoration: none;
}
.auth-link:hover {
  color: #f8f9fa;
  text-decoration: underline;
}

.retro-alert {
  font-family: 'Press Start 2P', cursive;
  letter-spacing: 1px;
  font-size: 0.8rem;
}

.retro-alert.alert-info {
  background-color: #0f2418;
  border-color: #00ff66;
  color: #00ff66;
}

.retro-alert.alert-danger {
  background-color: #2b0e11;
  border-color: #ff5c8a;
  color: #ffd7e0;
}

:root {
  --console-height: 20vh;
}

#console {
  white-space: pre-wrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  height: var(--console-height, 20vh);
  overflow: auto;
}
#scriptList { max-height: 40vh; overflow:auto; }

#scriptList .btn-delete { visibility: hidden; }
#scriptList li:hover .btn-delete { visibility: visible; }
#scriptList .script-item.is-active {
  background-color: rgba(0, 255, 157, 0.12);
  color: #00ff9d;
  box-shadow: inset 3px 0 0 #00ff9d;
}
#scriptList .script-item.is-active .script-name {
  font-weight: 600;
}
#scriptList .script-item.is-active:hover {
  background-color: rgba(0, 255, 157, 0.18);
}

.alpaca-connect-btn {
  width: 170px;
  display: inline-flex;
  justify-content: center;
}

.alpaca-connect-btn-wide {
  width: 200px;
}


.block-canvas { min-height: 320px; }
.block-canvas .list-group-item { cursor: grab; }
.block-canvas .list-group-item:active { cursor: grabbing; }
.optimize-best td {
  background-color: rgba(0, 255, 153, 0.12);
  color: #a7ffdc;
  font-weight: 600;
}

  #bbPalette .list-group-item { cursor: grab; }
  #bbCanvas .list-group-item { cursor: grab; user-select: none; }
  #bbCanvas .drag-over { outline: 2px dashed #888; }
  #bbCanvas .badge-hint { opacity: .8; }

.console-dock {
  position: sticky;
  bottom: 0;
  z-index: 10;
}

  #console {
  z-index: 10;
  backdrop-filter: blur(2px);
}

.console-resizer {
  height: 4px;
  cursor: row-resize;
  border-radius: 6px;
  background: transparent;
  border: 1px solid rgba(0, 224, 255, 0.9);
  box-shadow: 0 0 12px rgba(0, 224, 255, 0.25), inset 0 0 4px rgba(0, 224, 255, 0.4);
  opacity: 0.95;
  touch-action: none;
  position: relative;
  z-index: 11;
}

.console-resizer.dragging {
  background: rgba(0, 224, 255, 0.1);
  box-shadow: 0 0 14px rgba(0, 224, 255, 0.55), inset 0 0 6px rgba(0, 224, 255, 0.6);
}

#exportDownloadBtn:disabled {
  pointer-events: none;
}

.btn-refresh-ghost {
  color: #00ff66;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0.1rem 0.2rem;
}

.btn-refresh-ghost:hover,
.btn-refresh-ghost:focus {
  color: #33ff80;
  background: transparent;
  border: none;
  box-shadow: none;
}

.btn-refresh-ghost:active {
  color: #00e65c;
  background: transparent;
  border: none;
  box-shadow: none;
}

/* Mauve outline variant */
.btn-outline-brown {
  --bs-btn-color: #c2a6a9;
  --bs-btn-border-color: #c2a6a9;
  --bs-btn-hover-color: #1b1b1f;
  --bs-btn-hover-bg: #c2a6a9;
  --bs-btn-hover-border-color: #c2a6a9;
  --bs-btn-focus-shadow-rgb: 194, 166, 169;
  --bs-btn-active-color: #1b1b1f;
  --bs-btn-active-bg: #b39094;
  --bs-btn-active-border-color: #b39094;
  --bs-btn-disabled-color: #c2a6a9;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #c2a6a9;
}

/* Solid mauve primary (for modal confirm button, etc.) */
.btn-brown {
  --bs-btn-color: #1b1b1f;
  --bs-btn-bg: #c2a6a9;
  --bs-btn-border-color: #c2a6a9;
  --bs-btn-hover-color: #1b1b1f;
  --bs-btn-hover-bg: #b39094;
  --bs-btn-hover-border-color: #b39094;
  --bs-btn-focus-shadow-rgb: 194, 166, 169;
  --bs-btn-active-color: #1b1b1f;
  --bs-btn-active-bg: #a17c81;
  --bs-btn-active-border-color: #a17c81;
}

/* Outline neon green */
.btn-outline-neongreen {
  --bs-btn-color: #00FF66;
  --bs-btn-border-color: #00FF66;
  --bs-btn-hover-color: #0b0b0b;         /* readable on neon */
  --bs-btn-hover-bg: #00FF66;
  --bs-btn-hover-border-color: #00FF66;
  --bs-btn-focus-shadow-rgb: 0, 255, 102;/* glow */
  --bs-btn-active-color: #0b0b0b;
  --bs-btn-active-bg: #00e65c;           /* slightly darker on active */
  --bs-btn-active-border-color: #00e65c;
  --bs-btn-disabled-color: #00FF66;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #00FF66;
}

/* (Optional) Solid neon green */
.btn-neongreen {
  --bs-btn-color: #0b0b0b;
  --bs-btn-bg: #00FF66;
  --bs-btn-border-color: #00FF66;
  --bs-btn-hover-color: #0b0b0b;
  --bs-btn-hover-bg: #00e65c;
  --bs-btn-hover-border-color: #00e65c;
  --bs-btn-focus-shadow-rgb: 0, 255, 102;
  --bs-btn-active-color: #0b0b0b;
  --bs-btn-active-bg: #00cc52;
  --bs-btn-active-border-color: #00cc52;
}

/* Keep the log input compact & aligned */
#bbCanvas .input-group.input-group-sm .form-control { min-width: 220px; }
#bbCanvas .list-group-item { padding-bottom: .75rem; }

/* Make script names in the Algorithm sidebar same as body text */
#scriptList .list-group-item {
  font-size: var(--bs-body-font-size, 0.7rem) !important;
  line-height: 1.2;
  padding-top: .4rem;
  padding-bottom: .4rem;
}

#editorContainer { height: 60vh; border: 1px solid var(--bs-border-color, #333); }
@media (min-height: 900px) { #editorContainer { height: 72vh; } }