* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: Arial, Helvetica, sans-serif;

  background: #07111b;

  color: #eaf4fb;

  min-height: 100vh;
}


button,
select {
  font-family: inherit;
}


/* =========================
   APP
========================= */

.app {
  display: flex;

  min-height: 100vh;
}


/* =========================
   SIDEBAR
========================= */

.sidebar {

  width: 245px;

  min-height: 100vh;

  display: flex;

  flex-direction: column;

  padding: 30px 18px;

  background: #091722;

  border-right: 1px solid #1e3445;

}


.brand {

  padding: 5px 14px 35px;

  letter-spacing: 2px;

  font-weight: 800;

}


.brand-main {

  font-size: 17px;

}


.brand-accent {

  color: #49b9ff;

  font-size: 17px;

}


nav {

  display: flex;

  flex-direction: column;

  gap: 7px;

}


.nav-button {

  width: 100%;

  display: flex;

  align-items: center;

  gap: 12px;

  padding: 12px 14px;

  border: 1px solid transparent;

  border-radius: 6px;

  background: transparent;

  color: #7891a2;

  text-align: left;

  cursor: pointer;

  font-size: 13px;

  transition: .2s;

}


.nav-button span {

  width: 18px;

}


.nav-button:hover {

  background: #0e2231;

  color: #c5d8e5;

}


.nav-button.active {

  background: #102b3e;

  border-color: #214b65;

  color: #62c4ff;

}


.sidebar-bottom {

  margin-top: auto;

  padding: 15px 14px;

  color: #657e8e;

  font-size: 11px;

}


.connection {

  display: flex;

  align-items: center;

  gap: 8px;

  margin-bottom: 8px;

}


.connection-dot {

  width: 7px;

  height: 7px;

  border-radius: 50%;

  background: #54bdf2;

  box-shadow: 0 0 8px #54bdf2;

}


.client-version {

  color: #435b6b;

}


/* =========================
   MAIN
========================= */

.main {

  flex: 1;

  min-width: 0;

}


.topbar {

  height: 85px;

  display: flex;

  align-items: center;

  padding: 0 45px;

  border-bottom: 1px solid #1e3445;

  background: rgba(7, 17, 27, .92);

}


.small-label {

  color: #4daedc;

  font-size: 9px;

  font-weight: 700;

  letter-spacing: 2px;

  margin-bottom: 4px;

}


.topbar h1 {

  font-size: 22px;

  font-weight: 600;

}


/* =========================
   PAGES
========================= */

.page {

  display: none;

  max-width: 1050px;

  margin: auto;

  padding: 55px 45px;

}


.page.active {

  display: block;

}


/* =========================
   HERO
========================= */

.hero {

  margin-bottom: 35px;

}


.eyebrow {

  color: #4ebaff;

  font-size: 10px;

  font-weight: 700;

  letter-spacing: 3px;

  margin-bottom: 10px;

}


.hero h2 {

  font-size: 42px;

  letter-spacing: -1px;

  margin-bottom: 12px;

}


.hero p {

  max-width: 600px;

  color: #8299a9;

  font-size: 14px;

  line-height: 1.7;

}


/* =========================
   VERSION PANEL
========================= */

.version-panel {

  padding: 28px;

  background: #0b1a27;

  border: 1px solid #213a4c;

  border-radius: 8px;

}


.version-panel label {

  display: block;

  color: #718898;

  font-size: 10px;

  font-weight: 700;

  letter-spacing: 2px;

  margin-bottom: 9px;

}


#versionSelect {

  width: 100%;

  height: 50px;

  padding: 0 15px;

  background: #08141f;

  border: 1px solid #29475c;

  border-radius: 5px;

  color: #eaf4fb;

  outline: none;

  font-size: 14px;

}


#versionSelect:focus {

  border-color: #46a9df;

}


.version-info {

  margin-top: 25px;

}


.version-name {

  font-size: 28px;

  font-weight: 600;

  margin-bottom: 10px;

}


.badges {

  display: flex;

  flex-wrap: wrap;

  gap: 8px;

}


.badges span {

  padding: 5px 8px;

  border: 1px solid #29485c;

  border-radius: 4px;

  color: #79b9d8;

  font-size: 9px;

  font-weight: 700;

  letter-spacing: 1px;

}


/* =========================
   BUTTONS
========================= */

.actions {

  display: flex;

  gap: 10px;

  margin-top: 30px;

}


.play-button {

  min-width: 150px;

  height: 45px;

  padding: 0 25px;

  border: 1px solid #2698d9;

  border-radius: 5px;

  background: #1479b8;

  color: white;

  font-size: 12px;

  font-weight: 800;

  letter-spacing: 1px;

  cursor: pointer;

}


.play-button:hover {

  background: #198bce;

}


.secondary-button {

  height: 45px;

  padding: 0 20px;

  border: 1px solid #29485c;

  border-radius: 5px;

  background: #0c1c29;

  color: #9cb1bf;

  font-size: 11px;

  font-weight: 700;

  cursor: pointer;

}


.secondary-button:hover {

  border-color: #40718e;

  color: white;

}


/* =========================
   LOG
========================= */

.log-panel {

  margin-top: 25px;

  padding: 20px;

  background: #07131e;

  border: 1px solid #1b3244;

  border-radius: 7px;

}


.panel-title {

  color: #5e7889;

  font-size: 9px;

  font-weight: 700;

  letter-spacing: 2px;

  margin-bottom: 13px;

}


#log {

  color: #627d8d;

  font-family: monospace;

  font-size: 11px;

  line-height: 1.8;

}


/* =========================
   EMPTY PAGE
========================= */

.empty-page {

  padding: 80px 20px;

  text-align: center;

}


.empty-page h2 {

  font-size: 38px;

  margin-bottom: 12px;

}


.empty-page p {

  color: #8197a7;

  margin-bottom: 25px;

}


/* =========================
   MOBILE
========================= */

@media (max-width: 700px) {

  .sidebar {

    width: 75px;

    padding: 20px 10px;

  }


  .brand {

    padding: 5px 5px 30px;

  }


  .brand-main,
  .brand-accent {

    font-size: 9px;

  }


  .nav-button {

    justify-content: center;

    padding: 13px 5px;

  }


  .nav-button span {

    width: auto;

  }


  .nav-button {

    font-size: 0;

  }


  .nav-button span {

    font-size: 16px;

  }


  .sidebar-bottom {

    padding: 10px 5px;

  }


  .connection {

    justify-content: center;

  }


  .connection {

    font-size: 0;

  }


  .client-version {

    display: none;

  }


  .topbar {

    padding: 0 20px;

  }


  .page {

    padding: 40px 20px;

  }


  .hero h2 {

    font-size: 34px;

  }


  .actions {

    flex-direction: column;

  }


  .play-button,
  .secondary-button {

    width: 100%;

  }

}