/* ------------------------------------------------
   HEADER + LOGIN AREA
------------------------------------------------ */

.header {
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: saturate(1.3) blur(10px);
  background: rgba(10,14,17,.65);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 10px 18px;
  gap: 20px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.brand .logo {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  box-shadow: var(--shadow);
}
.brand .brand-text {
  font-weight: 700;
  letter-spacing: .1px;
  font-size: 18px;
}

.main-nav {
  display: flex;
  flex: 1;
  justify-content: center;
  gap: 14px;
}
.main-nav a {
  color: var(--muted);
  padding: 8px 12px;
  border-radius: 10px;
  text-decoration: none;
}
.main-nav a.active,
.main-nav a:hover {
  background: var(--card);
  color: var(--text);
}

.auth-area {
  display: flex;
  align-items: center;
  gap: 10px;
}

.user-box {
  display: flex;
  align-items: center;
  gap: 8px;
}

.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border);
  object-fit: cover;
  cursor: pointer;
}

#userName {
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
}

/* BUTTONS USED IN HEADER */
.btn {
  background: #1a2129;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  padding: 10px 14px;
  cursor: pointer;
  font-weight: 500;
}
.btn.primary {
  background: var(--brand);
  color: #041205;
  font-weight: 700;
  border-color: #1bb53f;
}
.btn.small {
  padding: 6px 10px;
  font-size: 14px;
}

main {
  flex: 1;
}

/* FOOTER --------------------------------------------- */
.site-footer{
  border-top:1px solid var(--border);
  margin-top:auto;
  padding:22px 18px;
  color:var(--muted)
}
.footer-inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap
}
.footer-brand{display:flex;align-items:center;gap:8px}
.logo.small{width:24px;height:24px;border-radius:6px}


/* MOBILE HEADER FIX ----------------------------------- */
@media (max-width: 860px) {
  .header{
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
  }
  .auth-area{align-self:flex-end}
  .main-nav{
    order:3;
    width:100%;
    justify-content:flex-start;
    overflow-x:auto;
    gap:6px;
  }
  .main-nav::-webkit-scrollbar{display:none}
  .brand{align-self:center}
}