/* RAINS shared header/navigation component */
:root{
  --rains-logo-color:#2aa8ff;
  --rains-logo-color-2:#0a5dff;
  --rains-logo-glow:rgba(42,168,255,.65);
  --rains-header-text:#f3f7ff;
  --rains-header-muted:#9daec4;
  --rains-header-line:rgba(80,170,255,.22);
  --rains-header-bg:rgba(2,8,16,.72);
}
body.butler-page,
body.rains-butler-page{
  --rains-logo-color:#d2aa62;
  --rains-logo-color-2:#9f6f2d;
  --rains-logo-glow:rgba(210,170,98,.45);
  --rains-header-line:rgba(210,170,98,.30);
}
.nav{
  width:100% !important;
  min-height:76px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:24px !important;
  padding:0 28px !important;
  background:var(--rains-header-bg) !important;
  border:1px solid var(--rains-header-line) !important;
  border-radius:28px !important;
  backdrop-filter:blur(16px) !important;
  box-shadow:0 18px 60px rgba(0,0,0,.35) !important;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;
  color:var(--rains-header-text) !important;
  box-sizing:border-box !important;
  position:relative !important;
  z-index:20 !important;
}
.brand{
  display:inline-flex !important;
  align-items:center !important;
  gap:14px !important;
  min-width:max-content !important;
  color:var(--rains-header-text) !important;
  text-decoration:none !important;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;
  font-size:1.55rem !important;
  font-weight:800 !important;
  letter-spacing:.12em !important;
  line-height:1 !important;
  white-space:nowrap !important;
}
.brand-main{color:var(--rains-header-text) !important;font-weight:800 !important;letter-spacing:.12em !important;}
.brand-accent{color:var(--rains-logo-color) !important;font-weight:500 !important;letter-spacing:0 !important;margin-left:-6px !important;}
.brand span:last-child{color:var(--rains-logo-color) !important;font-weight:500 !important;letter-spacing:0 !important;margin-left:-6px !important;}
.brand-title{display:flex !important;align-items:baseline !important;gap:8px !important;font-size:1.55rem !important;font-weight:800 !important;letter-spacing:.12em !important;line-height:1 !important;}
.brand-title span:last-child{color:var(--rains-logo-color) !important;font-weight:500 !important;letter-spacing:0 !important;}
.brand-mark,
.topbar .brand-mark{
  width:32px !important;
  height:32px !important;
  flex:0 0 32px !important;
  border:none !important;
  border-radius:10px 10px 16px 16px !important;
  background:linear-gradient(145deg,var(--rains-logo-color),var(--rains-logo-color-2) 70%) !important;
  box-shadow:0 0 24px var(--rains-logo-glow) !important;
  position:relative !important;
  transform:rotate(45deg) !important;
  display:inline-block !important;
}
.brand-mark::before,
.topbar .brand-mark::before{content:none !important;display:none !important;}
.brand-mark::after,
.topbar .brand-mark::after{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  width:12px !important;
  height:12px !important;
  border-radius:50% !important;
  background:var(--rains-header-bg) !important;
  right:6px !important;
  bottom:6px !important;
  border:none !important;
}
.nav-links{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex-wrap:wrap !important;
  gap:10px !important;
  margin:0 auto !important;
  padding:0 !important;
}
.nav-links a{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:38px !important;
  padding:0 18px !important;
  border:1px solid rgba(255,255,255,.22) !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.07) !important;
  color:var(--rains-header-text) !important;
  text-decoration:none !important;
  font-size:1rem !important;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;
  line-height:1 !important;
  white-space:nowrap !important;
}
.nav-links a:hover{border-color:var(--rains-logo-color) !important;background:rgba(255,255,255,.13) !important;}
.nav-links a.active{border-color:rgba(255,255,255,.44) !important;background:rgba(255,255,255,.18) !important;}
.nav-actions{display:flex !important;align-items:center !important;gap:12px !important;white-space:nowrap !important;margin:0 !important;}
.nav-status{font-size:.86rem !important;color:var(--rains-header-muted) !important;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;}
.sign-in,
.nav-actions .sign-in{
  min-height:38px !important;
  padding:0 18px !important;
  border:1px solid var(--rains-header-line) !important;
  border-radius:12px !important;
  background:rgba(255,255,255,.045) !important;
  color:var(--rains-header-text) !important;
  cursor:pointer !important;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;
}
.sign-in:hover{border-color:var(--rains-logo-color) !important;color:#fff !important;}
@media(max-width:980px){
  .nav{flex-wrap:wrap !important;justify-content:center !important;padding:16px !important;}
  .brand{width:100% !important;justify-content:center !important;}
  .nav-actions{width:100% !important;justify-content:center !important;}
}

/* RAINS header v4 wrap/underline fixes */

.nav{
  gap:16px !important;
}
.nav-links{
  flex:1 1 auto !important;
  flex-wrap:nowrap !important;
  gap:8px !important;
  min-width:0 !important;
}
.nav-links a{
  padding:0 14px !important;
  font-size:.96rem !important;
  position:relative !important;
}
.nav-links a::before,
.nav-links a::after,
.nav-links a.active::before,
.nav-links a.active::after{
  content:none !important;
  display:none !important;
  width:0 !important;
  height:0 !important;
  background:none !important;
  box-shadow:none !important;
  border:0 !important;
}
.nav-actions{
  flex:0 0 auto !important;
}
.brand{
  flex:0 0 auto !important;
}
@media(max-width:1180px){
  .nav-links{flex-wrap:wrap !important;}
}


/* RAINS header v5 auth-page width fix */
body.auth-page .page{
  width:min(1500px,calc(100% - 48px)) !important;
  max-width:1500px !important;
}
body.auth-page .card{
  max-width:680px !important;
}
@media(max-width:900px){
  body.auth-page .page{width:min(100% - 28px,720px) !important;}
}