@import '/StationeersServerUI/static/css/variables.css';

main {
    max-width: 1000px;
    width: 90%;
    padding: 30px;
    box-sizing: border-box;
    background-color: var(--bg-panel);
    border-radius: 10px;
    margin: 40px 0;
    box-shadow: 0 15px 50px var(--primary-glow);
    border: 3px solid var(--primary);
    position: relative;
    overflow: hidden;
    transform: translateZ(0); /* Force hardware acceleration */
  }
  
  main::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(transparent 50%, rgba(0, 0, 0, 0.05) 50%);
    background-size: 100% 4px;
    pointer-events: none;
    opacity: 0.4;
    z-index: 10;
  }

  /* Typography */
h1 {
  line-height: 1.2;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  color: var(--text-header);
  text-shadow: 0 0 10px var(--primary), 0 0 20px var(--primary-glow);
}

h2 {
  font-family: 'Press Start 2P', cursive;
  line-height: 1.8;
  letter-spacing: 1px;
  color: var(--primary);
  margin-top: 2rem;
  margin-bottom: 1rem;
  position: relative;
  display: inline-block;
}

h2::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, var(--primary), transparent);
  transition: width var(--transition-fast);
}


ul {
  list-style-type: none;
  padding: 0;
  color: var(--primary);
}


footer {
  text-align: center;
  padding-bottom: 20px;
  font-size: 0.9rem;
  opacity: 0.7;
  width: 100%;
  margin-top: auto;
}

footer a {
  color: var(--primary);
  text-decoration: none;
  transition: text-shadow var(--transition-normal);
}

footer a:hover {
  text-shadow: 0 0 10px var(--primary);
}



.logout-icon {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin: 0;
  transition: transform 0.2s ease;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2300FFAB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpolyline points='16 17 21 12 16 7'/%3E%3Cline x1='21' x2='9' y1='12' y2='12'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px;
}

/* maybe */
.logout-icon:hover {
  transform: scale(1.1);
}


.logout-icon::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.logout-icon:hover::before {
  opacity: 1;
  transform: scale(1.1);
}

.gpusaver-icon {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin: 0;
  transition: transform 0.2s ease;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='%23FFFFFF' version='1.1'%3E%3Cpath d='M7.071 15.386c-0.749-0.769-1.424-1.618-2.008-2.53l-0.038-0.064c-0.848-1.685-1.345-3.672-1.345-5.775 0-0.925 0.096-1.828 0.279-2.698l-0.015 0.085c0.005-0.031 0.007-0.067 0.007-0.103 0-0.414-0.336-0.75-0.75-0.75-0.385 0-0.702 0.29-0.745 0.664l-0 0.003c-0.176 0.847-0.277 1.821-0.277 2.818 0 2.375 0.573 4.615 1.588 6.592l-0.038-0.081c0.678 1.071 1.414 2.002 2.235 2.849l-0.004-0.005c0.611 0.642 1.186 1.335 1.712 2.066l0.040 0.058c1.047 1.61 1.669 3.579 1.669 5.694 0 1.13-0.178 2.219-0.507 3.24l0.021-0.075c-0.021 0.067-0.034 0.143-0.034 0.223 0 0.335 0.219 0.618 0.522 0.715l0.005 0.001c0.067 0.020 0.143 0.033 0.222 0.033h0c0 0 0.001 0 0.001 0 0.334 0 0.618-0.219 0.713-0.522l0.001-0.005c0.36-1.085 0.567-2.334 0.567-3.631 0-2.423-0.724-4.678-1.967-6.559l0.028 0.044c-0.608-0.851-1.226-1.597-1.891-2.298l0.009 0.009zM16.526 15.446c-0.906-0.931-1.723-1.959-2.43-3.063l-0.046-0.077c-1.031-2.043-1.635-4.453-1.635-7.004 0-1.117 0.116-2.207 0.336-3.258l-0.018 0.103c0.003-0.024 0.004-0.052 0.004-0.081 0-0.414-0.336-0.75-0.75-0.75-0.377 0-0.689 0.278-0.742 0.641l-0 0.004c-0.211 1.010-0.331 2.171-0.331 3.36 0 2.823 0.68 5.487 1.885 7.837l-0.045-0.097c0.809 1.277 1.687 2.386 2.666 3.397l-0.005-0.005c0.737 0.775 1.43 1.61 2.065 2.491l0.048 0.070c1.271 1.956 2.026 4.348 2.026 6.916 0 1.373-0.216 2.696-0.616 3.936l0.025-0.091c-0.021 0.066-0.034 0.143-0.034 0.222 0 0.335 0.219 0.619 0.522 0.716l0.005 0.001c0.067 0.021 0.143 0.033 0.222 0.033h0c0 0 0.001 0 0.001 0 0.335 0 0.618-0.219 0.714-0.522l0.001-0.005c0.427-1.288 0.673-2.771 0.673-4.312 0-2.877-0.858-5.554-2.332-7.788l0.033 0.053c-0.725-1.013-1.461-1.903-2.254-2.739l0.010 0.011zM27.826 17.874c-0.608-0.85-1.225-1.596-1.89-2.297l0.009 0.009c-0.749-0.77-1.424-1.62-2.009-2.533l-0.038-0.064c-0.849-1.684-1.346-3.67-1.346-5.773 0-0.925 0.096-1.827 0.279-2.698l-0.015 0.085c0.004-0.028 0.006-0.061 0.006-0.094 0-0.414-0.336-0.75-0.75-0.75-0.381 0-0.696 0.284-0.744 0.652l-0 0.004c-0.177 0.847-0.278 1.821-0.278 2.819 0 2.374 0.573 4.615 1.589 6.59l-0.038-0.081c0.678 1.073 1.414 2.005 2.237 2.853l-0.004-0.004c0.611 0.642 1.185 1.333 1.71 2.063l0.040 0.058c1.046 1.609 1.669 3.578 1.669 5.692 0 1.131-0.178 2.22-0.508 3.242l0.021-0.075c-0.021 0.066-0.034 0.143-0.034 0.222 0 0.335 0.219 0.619 0.522 0.716l0.005 0.001c0.065 0.021 0.14 0.033 0.218 0.033 0.002 0 0.003 0 0.005 0h-0c0 0 0.001 0 0.001 0 0.335 0 0.618-0.219 0.714-0.522l0.001-0.005c0.359-1.084 0.566-2.332 0.566-3.629 0-2.424-0.724-4.679-1.966-6.561l0.028 0.045z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 22px;
}

/* maybe */
.gpusaver-icon:hover {
  transform: scale(1.1);
}


.gpusaver-icon::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.gpusaver-icon:hover::before {
  opacity: 1;
  transform: scale(1.1);
}