:root{
  --safe-top:env(safe-area-inset-top,0px);
  --safe-right:env(safe-area-inset-right,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
  --safe-left:env(safe-area-inset-left,0px);
}

html,body{
  margin:0;
  background:#0b1320;
  color:#c7d5e0;
  font-family:Arial,sans-serif;
}

body{
  padding-left:var(--safe-left);
  padding-right:var(--safe-right);
}

.navbar{
  background:#0f1a2b;
  padding:12px 20px;
  padding-top:calc(12px + var(--safe-top));
  display:flex;
  gap:20px;
  align-items:center;
  border-bottom:1px solid #22324a;
  flex-wrap:wrap;
}

.navbar a{
  color:#7fff7f;
  text-decoration:none;
  font-weight:bold;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:8px 10px;
  border-radius:10px;
}

.navbar a:hover{
  background:#1b2838;
}

.navbar .spacer{
  margin-left:auto;
}

.brand{
  display:flex;
  justify-content:center;
  align-items:center;
  padding:24px 16px 10px;
}

.site-logo{
  display:block;
  max-width:100%;
  height:auto;
}

/* default = desktop + tablet + landscape => logo.webp */
.site-logo--full{
  display:block !important;
  width:min(540px,92vw);
  max-width:540px;
  height:auto !important;
}

.site-logo--icon{
  display:none !important;
  width:auto;
  max-width:none;
  height:auto !important;
}

.nav-messages{
  position:relative;
}

.nav-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:18px;
  height:18px;
  padding:0 6px;
  border-radius:999px;
  background:#ff5470;
  color:#fff;
  font-size:11px;
  margin-left:6px;
}

@media (max-width:700px){
  .navbar{
    gap:10px;
    padding:10px 12px;
  }

  .brand{
    padding:18px 12px 8px;
  }
}

/* mobile portrait => logom.webp */
@media (max-width:700px) and (orientation:portrait){
  .site-logo--full{
    display:none !important;
  }

  .site-logo--icon{
    display:block !important;
    width:min(220px,58vw);
    max-width:220px;
    height:auto !important;
  }
}

/* mobile landscape => logo.webp */
@media (max-width:900px) and (orientation:landscape){
  .site-logo--full{
    display:block !important;
    width:min(420px,70vw);
    max-width:420px;
    height:auto !important;
  }

  .site-logo--icon{
    display:none !important;
  }
}