:root{
  --bg: #0c0c0c;
  --fg: #fef102;
  --muted: #bfb800;
  --panel-bg: #0f0f0f;
  --accent: #fef102;
  --radius: 10px;
  font-family: Roboto, "Helvetica Neue", Arial;
}

* { box-sizing: border-box; }
html,body,#app { height: 100%; margin: 0; background: var(--bg); color: var(--fg); }

a {
    color: #fef102;
}

.active {
    font-size:16px;
}

.btn.btn-small { padding: 2px 10px; font-size: 12px; line-height: 1.2; margin-left: 10px;}

.latency-box {
  display: inline-block;
  font-family: monospace;     
  width: 100px;           
  text-align: right; 
  font-size: 16px;        
}


#topnav {
  display: flex;
  justify-content: space-between;
  width: 90%;  
  border-radius: 0 0 15px 15px;
  margin: 0 auto;
  align-items: center;
  background: #0c0c0c;
  color: #fef102;
  box-shadow: 0 0 5px #fef102;
  padding: 5px 10px 0px 10px;
  position: sticky;
  top: 0;
  z-index: 1000;
}

#topnav .brand {
  display: flex;
  align-items: center;
}

#topnav .brand h1 {
  margin: 0;
  color: #fef102;
}

#menuToggle {
  font-size: 1.5em;
  cursor: pointer;
  display: none; /* hidden on desktop */
  margin-left: 10px;
}

#topnav .nav {
  display: flex;
}

#topnav .nav a {
  color: #fef102;
  text-decoration: none;
  padding: 6px 8px;
  border-radius: 4px;
  transition: background 0.2s;
  margin: 5px 5px;
}

#topnav .nav a:hover,
#topnav .nav a.active {
  background: #fef102;
  color: #0c0c0c;
}

/* Mobile Styles */
@media (max-width: 900px) {
  #menuToggle {
    display: block;
  }

  #topnav .nav {
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #0c0c0c;
    display: none;
  }

  #topnav .nav.open {
    display: flex;
  }

  #topnav .nav a {
    padding: 20px 20px;
  }
}

.brand {
    display: flex;
    align-items: center;
    gap: 8px; /* spacing between logo and text */
}

.brand .logo {
    border-radius: 50%; /* optional: makes it circular */
    object-fit: cover;
}

/* Filters below topnav */
.filters {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
  padding:0px 16px;
  font-size:16px;
  margin: 60px auto 0 auto;
}

form {
  margin: 0 auto;
}

.filters select { background:transparent; color:var(--fg); border:1px solid rgba(255,255,255,0.04); padding:6px 8px; border-radius:6px; }

.content { padding:16px; overflow:auto; }


/* Panels */
.panel {
  background: rgba(255,255,255,0.01);
  border-radius:8px;
  padding:20px 10px;
  margin-bottom:20px;
  box-shadow: 0 0 5px #fef102;
}

.panel2 {
  background: rgba(255,255,255,0.01);
  border-radius:8px;
  padding:20px 10px;
  margin-top: 40px;
  margin-bottom:20px;
  box-shadow: 0 0 5px #fef102;
}

.panel3 {
  background: rgba(255,255,255,0.01);
  border-radius:8px;
  padding:20px 10px;
  margin-top: 80px;
  margin-bottom:20px;
  box-shadow: 0 0 5px #fef102;
}

.panel.hidden { display:none; }

.miner-row { display:flex; gap:.35rem; align-items:center; }
.miner-email { font-weight:600; }
.miner-worker { font-family:monospace; opacity:.85; padding:.05rem .35rem; border:1px solid #333; border-radius:.35rem; font-weight: 700; font-size: larger;}

.logo2 {
  width: 45%;
  position: relative;
  display: inline-block;
}

.logo2-wrap {
  line-height: 0;           /* removes extra inline spacing */
}

.logo2-wrap::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;                 /* makes it match image width */
  bottom: -4px;             /* spacing below the image */
  height: 2px;
  background: #fef102;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s ease-in-out;
  will-change: transform;
}

.logo2-wrap:hover::after {
  transform: scaleX(1);     /* grows left → right */
}

.logo2:hover::after {
  width: 75%;
}

.btn { 
  background: transparent;  
  padding:8px 12px; 
  border-radius:8px; 
  color:var(--fg); 
  cursor:pointer; 
  border: 1px #fef102 solid;
  box-shadow: 0 0 5px #fef102;
}

.btn.small { 
  padding:6px 8px; 
  font-size:16px; 

}

.kv { display:flex; gap:8px; flex-wrap:wrap; font-size:15px; color: #fef102; }

.kv .k { opacity:.7 }

.flex { display:flex; gap:12px; flex-wrap:wrap; }

.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

.pill { border:1px solid rgba(254,241,2,0.18); border-radius:999px; padding:2px 8px; font-size:12px; }

.good { color:#9be77d } 

.bad { color:#ff7a7a }

.nowrap { white-space:nowrap; }

form.inline { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }

input[type="text"], input[type="email"], input[type="number"], input[type="password"], textarea {
      background:transparent; color:var(--fg);
      border:1px solid rgba(255,255,255,0.08);
      border-radius:8px; padding:8px 10px;
      box-shadow: 0 0 5px #fef102;
      width: 100%;
    }

textarea.slatepack { width:100%; min-height:220px; resize:vertical; }

.payout-form {
  display: flex;
  flex-direction: column; /* stack vertically */
  gap: 10px;              /* space between fields */
  max-width: 400px;       /* keeps it neat */
}

.payout-form .field {
  display: flex;
  flex-direction: column;
}

.payout-form label {
  font-size: 14px;
  margin-bottom: 4px;
}

.table { width:100%; border-collapse:collapse; font-size:14px; }

.table th, .table td { padding:8px 6px; border-bottom:1px solid rgba(255,255,255,0.05); }

.table th { text-align:left; color:var(--muted); font-weight:500; }

.title {
  font-weight: 700;
}

.navlink {
  font-size: 22px;
  font-weight: 700;
  box-shadow: 0 0 5px #fef102;
  margin: 0px 10px;
}

.mono {
  text-wrap: wrap;
  font-size: 18px;
}

.logo {
  width: 10%;
  transition: width 2s, height 2s;
}

.logo:hover {
  width: 20%;
}

.bold {
  font-weight: 700;
}

.muted { 
  color: #fef102;
  font-size:16px; 
  margin-top:8px; 
  text-wrap: wrap;
  }

/* Footer pinned at bottom */
.site-footer {
  padding:12px 16px;
  border-top:1px solid rgba(255,255,255,0.02);
  display:flex; justify-content:space-between; font-size:15px;
  color:var(--muted);
}

/* Responsive */
@media (max-width:900px) {
  #topnav { flex-wrap:wrap; height: 6.9%; width: 90%;  border-radius: 0 0 15px 15px; margin: 0 auto; box-shadow: 0 0 5px #fef102;}
  #topnav .nav { flex-direction:column; width:90%; display:none; }
  #topnav .nav.open { display:flex; }
  #topnav .toggle { display:block; margin-left:auto; }
  .logo2 { width: 75%; }
  .logo { width: 10%; }
  input[type="text"], input[type="email"], input[type="number"], input[type="password"], textarea {
      background:transparent; color:var(--fg);
      border:1px solid rgba(255,255,255,0.08);
      border-radius:8px; padding:8px 10px;
      box-shadow: 0 0 5px #fef102;
      width: 95%;
    }
  .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px;}
  .btn.btn-small { padding: 2px 6px; font-size: 10px; line-height: 0.8; margin-left: 5px;}
}