@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@600;700;800&display=swap');

:root{
  --ag-nav:#090d12;
  --ag-text:#f3f6ff;
  --ag-cyan:#20b4cc;
  --ag-cyan-2:#4ecde0;
  --ag-gold:#d8c7a1;
  --ag-clay:#c97a45;
}

nav{
  min-height:38px !important;
  padding:0 26px !important;
  background:var(--ag-nav) !important;
  border:0 !important;
  border-bottom:1px solid rgba(216,199,161,0.10) !important;
  box-shadow:0 16px 42px rgba(0,0,0,0.20) !important;
  backdrop-filter:blur(16px);
}

.nav-logo{
  font-family:'Outfit',Inter,sans-serif !important;
  font-size:0.84rem !important;
  font-weight:800 !important;
  letter-spacing:0 !important;
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  color:var(--ag-text) !important;
  background:linear-gradient(120deg,#fff 0%,var(--ag-cyan-2) 50%,var(--ag-gold) 100%) !important;
  -webkit-background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  background-clip:text !important;
}

.nav-logo::before{
  content:'';
  width:22px;
  height:22px;
  flex:0 0 22px;
  display:inline-block;
  background:url('/images/ag-logo-mark.png') center/contain no-repeat;
}

.auth-logo{
  font-family:'Outfit',Inter,sans-serif !important;
  font-weight:800 !important;
  letter-spacing:0 !important;
  background:linear-gradient(120deg,#fff 0%,var(--ag-cyan-2) 50%,var(--ag-gold) 100%) !important;
  -webkit-background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  background-clip:text !important;
}

.auth-logo img{
  content:url('/images/ag-logo-mark.png');
  width:54px !important;
  height:54px !important;
  object-fit:contain !important;
}

#btn-login,#btn-signup{
  font-family:'Outfit',Inter,sans-serif !important;
  font-weight:800 !important;
  letter-spacing:0 !important;
  border-radius:999px !important;
  color:#07110d !important;
  border:0 !important;
  background:linear-gradient(135deg,var(--ag-cyan),var(--ag-cyan-2) 55%,var(--ag-clay)) !important;
  box-shadow:0 0 28px rgba(32,180,204,0.22),0 0 24px rgba(201,122,69,0.10) !important;
}

#btn-login:hover,#btn-signup:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 34px rgba(32,180,204,0.28),0 0 24px rgba(201,122,69,0.16) !important;
}

body.theme-light nav{
  background:var(--ag-nav) !important;
  box-shadow:0 16px 42px rgba(0,0,0,0.20) !important;
}

body.theme-light .nav-logo{
  background:linear-gradient(120deg,#fff 0%,var(--ag-cyan-2) 50%,var(--ag-gold) 100%) !important;
  -webkit-background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  background-clip:text !important;
}

@media(max-width:720px){
  nav{
    min-height:38px !important;
    padding:0 16px !important;
    align-items:center !important;
    flex-wrap:nowrap !important;
  }
  .nav-logo{font-size:0.8rem !important;gap:7px !important;}
  .nav-logo::before{width:22px;height:22px;flex-basis:22px;}
}