html, body {
  margin: 0;
  padding: 0;
  background: black;
  color: #7CB9E8;
  font-family: 'Courier New', Courier, monospace;
  height: 100%;
  overflow: hidden;
  font-family: monospace, monospace; 
}

table { border-collapse: collapse; width: 100%; margin-top: 1em; }
th, td { border: 1px solid #444; padding: 6px 10px; }
th { background: #222; }
button { background: #7CB9E8; border: none; padding: 8px 16px; color: #111; cursor: pointer; }
button:disabled {
  pointer-events: none;
  opacity: 0.6;
  cursor: not-allowed;
}

.message { margin-top: 1em; color: #aaf; }

.boot-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: black;
  z-index: 100;
  animation: bootSequence 0.5s ease-out forwards;
}

.modal {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  background: rgba(0, 0, 0, 0.75);
  margin: auto;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

.modal.hidden {
  display: none;
}

.modal-content {
  background: #111;
  border: 2px solid #7CB9E8;
  padding: 1rem 2rem;
  width: 60%;
  max-width: 70%;
  max-height: 80%;
  overflow-y: auto;
  box-shadow: 0 0 10px #7CB9E8;
  color: #7CB9E8;
  position: relative;
}

.modal-content {
  position: relative;
  background: #000;
  color: #7CB9E8;
  padding: 2rem;
  border: 2px solid #7CB9E8;
  z-index: 1;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 0 10px #7CB9E8;
}

.modal-content .close {
  position: absolute;
  top: 0.5rem;
  right: 1rem;
  cursor: pointer;
  font-size: 1.5rem;
}

.has-submenu > .subnav {
  display: none;
  position: absolute;
  right: 0; /* Push to the right side of the parent */
  background: rgba(20, 20, 20, 0.95);
  padding: 0.5em;
  border: 1px solid #555;
  margin-top: 0.2em;
  list-style: none;
  z-index: 1000;
}

.has-submenu {
  position: relative;
}

.has-submenu.open > .subnav {
  display: block;
}

a.submenu-toggle::after {
  content: " ▼";
  font-size: 0.75em;
}

.refresh-btn {
  cursor: pointer;
  background: none;
  padding: 0;
  margin: 0;
  color: #7CB9E8;
}
.refresh-btn:hover {
  color: aqua;
}

.logo-container {
  position: absolute;
  width: 100%;
  height: 100%;
  padding: 2rem;
  box-sizing: border-box;
  background: #000 url('https://images.evetech.net/corporations/98151037/logo?size=512') no-repeat center center fixed;
  background-size: 40%;
  filter:
    grayscale(0.0)              /* remove color */
    contrast(1.0)             /* boost contrast */
    brightness(1.0);           /* simulate CRT glow */
  image-rendering: high-quality; /* blocky pixels */
  mix-blend-mode: screen;
  transform: scale(1.001);
  opacity: 0.1;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: left;
  z-index: -1
}

.crt-container {
  position: relative;
  width: 100vw;
  height: 100vh;
  padding: 2rem;
  box-sizing: border-box;
  background: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: left;
  animation: flicker 0.15s infinite;
}

.crt-container::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 255, 255, 0.03),
    rgba(0, 255, 255, 0.03) 1px,
    transparent 1px,
    transparent 3px
  );
  animation: scanlinesMove 0.5s linear infinite;
  pointer-events: none;
  z-index: -2;
}

.crt-content {
  z-index: 2;
  
  height: 95%;
  width: 95%;
  text-shadow: 0 0 1px #7CB9E8, 0 0 5px #7CB9E8;

/* 
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 5%, black 95%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 5%, black 95%, transparent 100%); */
}

.crt-glow {
  position: absolute;
  top: 0; left: 0;
  right: 0; bottom: 0;
  width: 100%; height: 100%;
  box-shadow:
    inset 0 0 60px rgba(173, 216, 230, 0.15),
    0 0 100px rgba(173, 216, 230, 0.25);
  pointer-events: none;
  z-index: 99;
}

.content-area {
  margin: auto;
  overflow-x: hidden;
  overflow-y: auto;
  max-height: 90vh;
  padding: 16pt;
  box-sizing: border-box;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(0,0,0,.25);
  backdrop-filter: blur(9px);
}

header {
  position: absolute;
  top: 0;
  left:0;
  right: 0;
}

.crt-navbar {
  position: relative;
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.75) 10%,
    rgba(0, 0, 0, 0.75) 90%,
    rgba(0, 0, 0, 0) 100%
  );
  padding: 0.5rem 1rem;
  border-bottom: 2px solid #7CB9E8;
  box-shadow: 0 0 8px rgba(124, 185, 232, 0.3);
  text-align: center;
  overflow: visible;
  z-index: 3;
}

.crt-navbar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;

  z-index: 5;
}

.crt-navbar ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.crt-navbar li a {
  color: #7CB9E8;
  cursor: pointer;
  text-decoration: none;
  font-family: 'Courier New', monospace;
  font-size: 1rem;
  
  transition: color 0.1s ease-in-out;
}

.crt-navbar li a:hover {
  color: white;
  text-shadow: 0 0 1px #7CB9E8, 0 0 5px #7CB9E8;
}

.crt-navbar li a.active {
  color: white;
  border-bottom: 2px solid #6495ED;
  text-shadow: 0 0 8px #7CB9E8;
}

.crt-navbar ul li + li::before {
  content: "-";
  color: #7CB9E8;
  text-shadow: 0 0 2px #7CB9E8, 0 0 6px #7CB9E8;
  margin: 0 0.75rem;
  font-weight: bold;
  opacity: 0.3;
}

.crt-navbar ul .subnav li  {
  padding: 5px 15px;
}

.crt-navbar ul .subnav li + li::before  {
  content: "";
  margin: 0;
}

#nav-login img {
  transition: filter 0.2s ease-in-out;
  filter:
    grayscale(1)              /* remove color */
    contrast(1.0)             /* boost contrast */
    brightness(1.0)           /* simulate CRT glow */
    sepia(1)
    hue-rotate(170deg);       /* tint */
}

#nav-login:hover img {
  filter:
    grayscale(1)              /* remove color */
    contrast(1.2)             /* boost contrast */
    brightness(1.0)           /* simulate CRT glow */
    sepia(1)
    hue-rotate(170deg);       /* tint */
}

.copy-container {
  position: relative;
  display: inline-block;
  border: 2px solid #444;
  cursor: pointer;
  user-select: none;
}

.copied-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 1.2em;
  color: #fff;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.copy-container.show-copied .copied-overlay {
  opacity: 1;
}

.crt-input {
  background-color: #000; /* Deep black background */
  color: #7CB9E8; /* Aqua blue text */
  border: 2px solid #7CB9E8;
  font-family: 'VT323', monospace; /* Or any pixel/retro font you’re using */
  font-size: 1.2rem;
  padding: 0.5rem;
  box-sizing: border-box;
  /* text-shadow: 0 0 3px #7CB9E8; */
  box-shadow: 0 0 10px rgba(124, 185, 232, 0.4);
  outline: none;
  transition: all 0.2s ease;
}

.crt-input[type='button'] {
  cursor: pointer;
}

.crt-input:focus {
  box-shadow: 0 0 15px rgba(124, 185, 232, 0.5);
}

/* Optional flicker animation (subtle CRT effect) */
@keyframes crtFlicker {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.95; }
}

.crt-input {
  animation: crtFlicker 0.15s infinite alternate;
}

.member-list {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(220px,1fr));
  gap: 16px;
  padding: 20px;
}
.member {
  background: #222;
  padding: 12px;
  border: 1px solid #444;
  border-radius: 6px;
  text-align: center;
}

.member .name {
  font-weight: bold;
  margin-bottom: 4px;
}
.member .logon, .member .location {
  font-size: 0.9em;
  color: #aaddff;
  margin-bottom: 2px;
}

.crt-image-label {
  display: inline-block;
  text-align: center;
}

.crt-image {
  position: relative;
  display: inline-block;
  image-rendering: pixelated;
  overflow: hidden;
  border: 1px solid rgba(124, 185, 232, 0.2);
  box-shadow: 0 0 6px rgba(124, 185, 232, 0.1);
  background-color: black;
  max-width: 100%;
}

.member>.crt-image {
  border-radius: 50%;
  object-fit: cover;
}

.crt-image img {
  width: 100%;
  height: auto;
  display: block;
  filter:
    grayscale(1)              /* remove color */
    contrast(1.5)             /* boost contrast */
    brightness(1.2)           /* simulate CRT glow */
    sepia(1)
    hue-rotate(170deg);       /* tint */
  image-rendering: pixelated; /* blocky pixels */
  mix-blend-mode: screen;
  transform: scale(1.001);    /* subtle CRT distortion */
  transition: filter 0.2s ease-in-out;
}

.member>.crt-image>img {
  border-radius: 50%;
  border: 2px solid #7CB9E8;
  width: 128px;
  height: 128px;
  object-fit: cover;
  margin-bottom: 8px;
  filter:
    grayscale(1)              /* remove color */
    contrast(1.1)             /* boost contrast */
    brightness(1.0)           /* simulate CRT glow */
    sepia(1)
    hue-rotate(170deg);       /* tint */
}

/* Scanline overlay */
.crt-image::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: repeating-linear-gradient(
    to bottom,
    rgba(124, 185, 232, 0.07) 0px,
    rgba(124, 185, 232, 0.07) 1px,
    transparent 1px,
    transparent 3px
  );
  pointer-events: none;
  z-index: 2;
}
.member>.crt-image::before {
  border-radius: 50%;
  object-fit: cover;
}

.crt-image:hover img {
  filter:
    grayscale(1)              /* remove color */
    contrast(1.5)             /* boost contrast */
    brightness(1.5)           /* simulate CRT glow */
    sepia(1)
    hue-rotate(170deg);       /* tint */
}

.crt-image label {
  position: absolute;
  bottom: 0;
  left:0;
  right: 0;
  text-shadow:
    /* 1px black outline in 8 directions */
    -1px -1px 0 #000,
     0   -1px 0 #000,
     1px -1px 0 #000,
    -1px  0    0 #000,
     1px  0    0 #000,
    -1px  1px  0 #000,
     0    1px  0 #000,
     1px  1px  0 #000,

    /* Aero blue glow */
     0    0    1px #7CB9E8,
     0    0    5px #7CB9E8;
}

.crt-image label h6 {
  margin: 0;
}

.crt-image label h5 {
  margin: 0;
}

.crt-image label *:last-child {
  margin-bottom: 5px;
}

.spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid #000;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  margin-left: 6px;
  vertical-align: middle;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.crt-loading-bar {
  font-family: monospace;
  color: #7CB9E8;
  text-shadow: 0 0 2px #7CB9E8, 0 0 5px #7CB9E8;
  white-space: pre;
  padding: 1rem;
  width: 100%;
  box-sizing: border-box;
  font-size: 1rem;
}

.successHighlight {
  color: #0f0;
  text-shadow: 0 0 1px #0f0, 0 0 5px #0f0;
}
.errorHighlight {
  color: #f00;
  text-shadow: 0 0 1px #f00, 0 0 5px #f00;
}

.channel-change {
  animation: channelChange 0.15s ease-out;
}
.logo-container.channel-change {
  animation: channelChangeLogo 0.15s ease-out;
}

@keyframes flicker {
  0%, 100% { opacity: 0.98; }
  33% { opacity: 0.99; }
  66% { opacity: 1; }
}

@keyframes scanlinesMove {
  0% { background-position: 0 0; }
  100% { background-position: 0 2px; }
}

@keyframes bootSequence {
  0% {
    background: black;
    opacity: 1;
  }
  10% {
    background: black;
    opacity: 0.8;
  }
  40% {
    background: black;
    opacity: 1;
  }
  100% {
    opacity: 0;
    pointer-events: none;
  }
}

@keyframes channelChange {
  0% {
    filter: brightness(400%) contrast(200%) blur(2px);
    opacity: 0.1;
    color: black;
    text-shadow: none;
    transform: scaleX(1.5) scaleY(0.5);
  }
  20% {
    filter: brightness(200%) contrast(180%) blur(1px);
    opacity: 1;
    color: black;
    text-shadow: none;
    transform: scaleX(0.9) scaleY(1.2);
  }
  50% {
    filter: brightness(300%) contrast(300%) blur(2px);
    opacity: 0.5;
    color: black;
    text-shadow: none;
    transform: scaleX(1.2) scaleY(0.8);
  }
  100% {
    filter: none;
    opacity: 1;
    transform: none;
  }
}

@keyframes channelChangeLogo {
  0% {
    filter: brightness(400%) contrast(200%) blur(2px);
    opacity: 0.005;
    transform: scaleX(1.5) scaleY(0.5);
  }
  20% {
    filter: brightness(200%) contrast(180%) blur(1px);
    opacity: 0.009;
    transform: scaleX(0.9) scaleY(1.2);
  }
  50% {
    filter: brightness(300%) contrast(300%) blur(2px);
    opacity: 0.01;
    transform: scaleX(1.2) scaleY(0.8);
  }
  100% {
    filter: none;
    opacity: 0.025;
    transform: none;
  }
}

@media (pointer:none), (pointer:coarse) {
  .logo-container {
    opacity: 0.1;
  }

  @keyframes channelChangeLogo {
    0% {
      filter: brightness(400%) contrast(200%) blur(2px);
      opacity: 0.01;
      transform: scaleX(1.5) scaleY(0.5);
    }
    20% {
      filter: brightness(200%) contrast(180%) blur(1px);
      opacity: 0.03;
      transform: scaleX(0.9) scaleY(1.2);
    }
    50% {
      filter: brightness(300%) contrast(300%) blur(2px);
      opacity: 0.05;
      transform: scaleX(1.2) scaleY(0.8);
    }
    100% {
      filter: none;
      transform: none;
    }
  }
}

@media (max-width: 600px) {
  .crt-navbar li a {
    font-size: 0.9rem;
  }

  .crt-container {
    padding: 1rem 0.5rem;
  }

  .crt-content {
    font-size: 0.9rem;
  }
}