html, body {
  margin:0 !important;
  padding:0 !important;
  width:100%;
  overflow-x:hidden;
}

/* ✅ ALWAYS reserve the exact header height so content never gets cut off */
:root { --as-header-h: 88px; }
body { padding-top: var(--as-header-h) !important; }

/* ================= HEADER ================= */
header.as-header, header.as-header * { box-sizing:border-box; }

header.as-header{
  position:fixed;
  top:0; left:0; right:0;
  height:88px;
  background:#fff;
  z-index:1000;
  border-bottom:1px solid #e5e7eb;
  box-shadow:0 10px 25px rgba(0,0,0,.06);
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

.as-header__container{
  max-width:1400px;
  height:100%;
  margin:0 auto;
  padding:0 16px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:16px;
}

/* Burger */
.as-nav-toggle{ display:none; }
.as-burger{
  display:none;
  width:44px; height:44px;
  border-radius:12px;
  border:1px solid #e5e7eb;
  background:#fff;
  cursor:pointer;
  align-items:center;
  justify-content:center;
}
.as-burger-bar{
  width:22px; height:2px;
  background:#0f172a;
  position:relative;
}
.as-burger-bar::before,
.as-burger-bar::after{
  content:"";
  position:absolute;
  left:0;
  width:22px;
  height:2px;
  background:#0f172a;
}
.as-burger-bar::before{ top:-6px; }
.as-burger-bar::after{ top:6px; }

/* Logo */
.as-logo img{
  height:50px;
  display:block;
}

/* Nav */
.as-nav{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:18px;
}
.as-nav a{
  text-decoration:none;
  font-weight:800;
  color:#0f172a;
  padding:8px 12px;
  border-radius:10px;
}
.as-nav a:hover{
  background:rgba(239,68,68,.12);
}

/* Actions */
.as-actions{
  display:flex;
  align-items:center;
  gap:12px;
}

/* 🔴 PHONE BUTTON — RED (logo match) */
.as-phone{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  border-radius:999px;
  text-decoration:none;
  font-weight:950;
  background:linear-gradient(135deg,#ef4444,#b91c1c);
  color:#ffffff;
  box-shadow:0 8px 18px rgba(239,68,68,.35);
  border:1px solid rgba(255,255,255,.35);
}

/* âš« BLACK ICON */
.as-phone svg{
  width:18px;
  height:18px;
  fill:#000000;
}

.as-phone span{ font-weight:950; }

/* Auth buttons (desktop only) */
.as-btn{
  padding:10px 16px;
  border-radius:12px;
  font-weight:950;
  text-decoration:none;
  border:1px solid rgba(255,255,255,.35);
  box-shadow:0 8px 18px rgba(2,6,23,.08);
}
.as-btn--login{
  background:linear-gradient(135deg,#fde047,#f59e0b);
  color:#1a1300;
}
.as-btn--register{
  background:linear-gradient(135deg,#22c55e,#16a34a);
  color:#03150b;
}

/* Avatar */
.as-avatar{ position:relative; }
.as-avatar summary{ list-style:none; cursor:pointer; }
.as-avatar__img{
  width:44px;
  height:44px;
  border-radius:50%;
  object-fit:cover;
  border:2px solid #e5e7eb;
}
.as-dropdown{
  position:absolute;
  right:0;
  top:52px;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  min-width:200px;
  box-shadow:0 14px 34px rgba(2,6,23,.14);
}
.as-dropdown a{
  display:block;
  padding:14px;
  text-decoration:none;
  font-weight:700;
  color:#0f172a;
}
.as-dropdown a:hover{ background:#f1f5f9; }

/* Mobile auth + phone */
.as-mobile-auth,
.as-mobile-phone{ display:none; }

@media (max-width:1020px){
  .as-burger{ display:inline-flex; }

  .as-nav{
    position:fixed;
    top:88px;
    left:0; right:0;
    background:#fff;
    flex-direction:column;
    align-items:flex-start;
    padding:16px;
    gap:6px;
    transform:translateY(-140%);
    transition:.25s ease;
    box-shadow:0 16px 38px rgba(2,6,23,.16);
  }
  .as-nav-toggle:checked ~ .as-nav{
    transform:translateY(0);
  }

  .as-actions .as-btn{ display:none; }
  .as-phone span{ display:none; }

  .as-mobile-phone{
    display:block;
    font-weight:900;
    padding:12px;
    border-radius:12px;
    background:rgba(239,68,68,.12);
  }

  /* spacing so auth buttons don't touch phone link */
  .as-mobile-auth{
    display:block;
    margin-top:12px;
    width:100%;
  }
  .as-mobile-auth .btnrow{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    width:100%;
  }
  .as-mobile-auth .btnrow a{
    display:flex;
    align-items:center;
    justify-content:center;
  }
}