/* ================================
   Global Styles
   ================================ */
body {
  background-color: #1e1e1e;
  color: #e0e0e0;
  font-family: "Courier New", monospace;
  margin: 0;
  padding: 0;
  line-height: 1.6;
  scroll-behavior: smooth;
}

a { color: #3399ff; transition: color 0.3s; }
a:hover { color: #66ccff; }

.container-main { max-width: 900px; margin: 0 auto; padding: 1rem; }

/* ================================
   Banner
   ================================ */
.banner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  padding: 1.5rem;
  text-align: center;
  border-bottom: 1px solid #333;
}
.banner img { width: 120px; height: 120px; margin-right: 1.5rem; }
.banner-title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}
.banner-title h1 { margin: 0; font-size: 3rem; }
.banner-title p { margin: 0; font-size: 1.5rem; color: #ccc; font-style: italic; }

/* ================================
   Navbar
   ================================ */
.navbar-custom {
  background-color: #1e1e1e !important;
  border: none;
  position: sticky;
  top: 0;
  z-index: 1000;
}
.navbar-nav .nav-link {
  color: #3399ff;
  display: flex;
  align-items: center;
  transition: color 0.3s;
}
.navbar-nav .nav-link.active { text-decoration: underline; }
.navbar-nav .nav-link i { color: #fff; margin-right: 0.3rem; }
.navbar-nav .nav-link span { text-decoration: none; }
.navbar-nav .nav-link:hover span { text-decoration: underline; color: #66ccff; }
.nav-link.disabled { color: #666 !important; pointer-events: none; text-decoration: none; }

.custom-toggler { display: flex; flex-direction: column; justify-content: space-between; width: 30px; height: 22px; }
.custom-toggler span { display: block; height: 3px; background-color: #3399ff; border-radius: 2px; }

/* ================================
   Main Sections
   ================================ */
main { margin-top: 1rem; }
section {
  background-color: #2a2a2a;
  border: 1px solid #333;
  padding: 1rem;
  margin-bottom: 1rem;
  border-radius: 6px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
section.visible { opacity: 1; transform: translateY(0); }

h2 { border-bottom: 1px solid #333; padding-bottom: 0.2rem; margin-top: 1rem; color: #66ccff; }
h3 { color: #66ccff; margin-top: 1rem; cursor: pointer; }

/* ================================
   TOC & Scrollable Content (EULA)
   ================================ */
#toc {
  position: sticky;
  top: 80px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  background-color: #2a2a2a;
  padding: 1rem;
  border: 1px solid #333;
  border-radius: 6px;
  min-width: 180px;
}
#toc a {
  display: block;
  color: #3399ff;
  margin-bottom: 0.5rem;
  text-decoration: none;
}
#toc a:hover { color: #66ccff; text-decoration: underline; }

#eula-content {
  flex: 1;
  max-height: 75vh;
  overflow-y: auto;
  padding: 1rem;
  background-color: #2a2a2a;
  border: 1px solid #333;
  border-radius: 6px;
}
.collapsible-content { display: block; padding-left: 0.5rem; }

/* ================================
   Tables
   ================================ */
table { width: 100%; border-collapse: collapse; margin-top: 1rem; }
th, td { border: 1px solid #444; padding: 0.6rem; text-align: left; }
th { background-color: #333; color: #66ccff; text-align: center; }
td a { color: #3399ff; text-decoration: none; }
td a:hover { color: #66ccff; text-decoration: underline; }
tr:nth-child(even) { background-color: #242424; }

/* ================================
   Accordion (Links Page)
   ================================ */
.accordion-button {
  background-color:#444; 
  color:#fff;
  font-weight:bold;
  border-bottom:2px solid #111;
  font-size: 1rem;
}
.accordion-button::after { display:none; }
.accordion-button .accordion-icon { margin-left:auto; transition: transform 0.3s ease; color:#fff; }
.accordion-button.collapsed .accordion-icon { transform: rotate(0deg); }
.accordion-button:not(.collapsed) { background-color: #666; } 
.accordion-button:not(.collapsed) .accordion-icon { transform: rotate(180deg); }
.accordion-body { background-color:#222; color:#fff; padding:0.5rem 1rem; border-bottom:2px solid #111; }
.accordion-body ul { list-style:none; padding:0; margin:0; }
.accordion-body li {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  padding:0.3rem 0;
  border-bottom:1px solid #111;
}
.accordion-body li:last-child { border-bottom:none; }
.accordion-body li a { color:#3399ff; text-decoration:none; margin-right:1rem; flex-shrink:0; }
.accordion-body li a:hover { color:#66ccff; }
.accordion-body li p { margin:0; font-size:0.9rem; color:#ccc; text-align:left; flex:1; }
.accordion-section-desc { margin-bottom:0.5rem; font-size:0.9rem; color:#ccc; }

/* ================================
   Forms (Contact Page)
   ================================ */
label { font-weight: bold; }
input, textarea {
  background-color: #333;
  color: #fff;
  border: 1px solid #555;
  border-radius: 4px;
}
input:focus, textarea:focus {
  border-color: #66ccff;
  outline: none;
}
button { background-color: #4da6ff; color: #fff; border: none; border-radius: 4px; transition: background-color 0.3s; }
button:hover { background-color: #66ccff; }

/* ================================
   Back-to-top button
   ================================ */
#backToTop {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: none;
  z-index: 999;
  border-radius: 50%;
  width: 45px;
  height: 45px;
  font-size: 1.5rem;
  text-align: center;
  line-height: 45px;
  background-color: #4da6ff;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.3s;
}
#backToTop:hover { background-color: #66ccff; }

/* ================================
   Footer
   ================================ */
footer {
  text-align: center;
  font-size: 0.9rem;
  color: #aaa;
  padding: 1rem 0;
  border-top: 1px solid #333;
  margin-top: 2rem;
}

/* ================================
   Scrollbars
   ================================ */
#eula-content::-webkit-scrollbar,
#toc::-webkit-scrollbar {
  width: 10px;
}
#eula-content::-webkit-scrollbar-thumb,
#toc::-webkit-scrollbar-thumb {
  background-color: #3399ff;
  border-radius: 5px;
}
#eula-content::-webkit-scrollbar-track,
#toc::-webkit-scrollbar-track {
  background-color: #1e1e1e;
}

/* ================================
   Responsive Design
   ================================ */
@media (max-width: 900px) {
  main { flex-direction: column; }
  #toc { position: relative; max-height: none; margin-bottom: 1rem; }
}
@media (max-width: 600px) {
  .banner { flex-direction: column; text-align: center; }
  .banner img { margin-right: 0; margin-bottom: 0.5rem; }
  .banner-title { align-items: center; }
  .accordion-body li { flex-direction: column; align-items: flex-start; }
  .accordion-body li p { margin-left:0; margin-top:0.2rem; }
}

/* ================================
   Glow Variables
   ================================ */
:root {
  --glow-color1: #000fff;
  --glow-color2: #007fff;
  --glow-color3: #00afff;
  --glow-color4: #00ffff;

  --glow-text-color: #fff5ff;

  --glow-blur1: 5px;
  --glow-blur2: 10px;
  --glow-blur3: 20px;
  --glow-blur4: 40px;
  --glow-blur5: 80px;
  --glow-blur6: 120px;

  --pulse-from-blur1: 2px;
  --pulse-from-blur2: 5px;
  --pulse-from-blur3: 10px;
  --pulse-from-blur4: 10px;

  --pulse-mid-blur1: 7px;
  --pulse-mid-blur2: 15px;
  --pulse-mid-blur3: 30px;
  --pulse-mid-blur4: 60px;

  --pulse-to-blur1: 12px;
  --pulse-to-blur2: 25px;
  --pulse-to-blur3: 50px;
  --pulse-to-blur4: 100px;

  --glow-animation-duration: 3s;
}

/* ================================
   Glow Effects (Enhanced)
   ================================ */
.glow {
  color: var(--glow-text-color);
  text-shadow:
    0 0 var(--glow-blur1) var(--glow-color1),
    0 0 var(--glow-blur2) var(--glow-color1),
    0 0 var(--glow-blur3) var(--glow-color1),
    0 0 var(--glow-blur4) var(--glow-color2),
    0 0 var(--glow-blur5) var(--glow-color3),
    0 0 var(--glow-blur6) var(--glow-color4);
  animation: pulseGlow var(--glow-animation-duration) ease-in-out infinite alternate;
}

@keyframes pulseGlow {
  from {
    text-shadow:
      0 0 var(--pulse-from-blur1) var(--glow-color2),
      0 0 var(--pulse-from-blur2) var(--glow-color2),
      0 0 var(--pulse-from-blur3) var(--glow-color3),
      0 0 var(--pulse-from-blur4) var(--glow-color4);
  }
  50% {
    text-shadow:
      0 0 var(--pulse-mid-blur1) var(--glow-color1),
      0 0 var(--pulse-mid-blur2) var(--glow-color2),
      0 0 var(--pulse-mid-blur3) var(--glow-color3),
      0 0 var(--pulse-mid-blur4) var(--glow-color4);
  }
  to {
    text-shadow:
      0 0 var(--pulse-to-blur1) var(--glow-color1),
      0 0 var(--pulse-to-blur2) var(--glow-color2),
      0 0 var(--pulse-to-blur3) var(--glow-color3),
      0 0 var(--pulse-to-blur4) var(--glow-color4);
  }
}

/* ================================
   Glow Hover Effect
   ================================ */
.glow-hover:hover {
  text-shadow:
    0 0 var(--pulse-mid-blur1) var(--glow-color2),
    0 0 var(--pulse-mid-blur2) var(--glow-color3),
    0 0 var(--pulse-mid-blur3) var(--glow-color4),
    0 0 var(--pulse-mid-blur4) var(--glow-color1);
  color: #cceeff !important;
  transition: all 0.4s ease-in-out;
}