/* Shared mobile nav for PromptWeb public pages */
.mobile-menu-btn{
  display:none;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  width:40px;
  height:40px;
  margin-left:12px;
  border:1px solid var(--border, #E5E5E5);
  border-radius:10px;
  background:rgba(255,255,255,0.92);
  color:var(--text, #171717);
  cursor:pointer;
  position:relative;
  z-index:1001;
  transition:background .2s ease,border-color .2s ease,transform .2s ease;
  -webkit-tap-highlight-color:transparent;
}
.mobile-menu-btn:hover{background:var(--bg2, #FAFAFA);border-color:#D4D4D4}
.mobile-menu-btn:active{transform:scale(.98)}
.mobile-menu-btn svg{width:20px;height:20px;display:block}
.mobile-menu-btn[aria-expanded="true"] .icon-open{display:none}
.mobile-menu-btn[aria-expanded="false"] .icon-close{display:none}

.mobile-nav-backdrop{
  position:fixed;
  inset:0;
  background:rgba(23,23,23,0.35);
  backdrop-filter:blur(2px);
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease;
  z-index:998;
}

.mobile-nav-panel{
  position:fixed;
  top:64px;
  left:16px;
  right:16px;
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:16px;
  background:rgba(255,255,255,0.98);
  border:1px solid var(--border, #E5E5E5);
  border-radius:16px;
  box-shadow:0 20px 40px rgba(0,0,0,0.14);
  opacity:0;
  transform:translateY(-10px) scale(.98);
  pointer-events:none;
  transition:opacity .2s ease,transform .2s ease;
  z-index:999;
  max-height:calc(100vh - 84px);
  overflow:auto;
}

.mobile-nav-panel a{
  display:flex;
  align-items:center;
  min-height:44px;
  padding:10px 12px;
  border-radius:10px;
  color:var(--text, #171717);
  text-decoration:none;
  font-size:16px;
  font-weight:600;
}
.mobile-nav-panel a:hover,
.mobile-nav-panel a:active{background:var(--bg2, #FAFAFA)}
.mobile-nav-panel a.active{background:var(--blue-light, #DBEAFE);color:var(--blue-dark, #1D4ED8)}
.mobile-nav-panel .mobile-nav-cta{
  margin-top:8px;
  justify-content:center;
  background:var(--text, #171717);
  color:#fff;
}
.mobile-nav-panel .mobile-nav-cta:hover,
.mobile-nav-panel .mobile-nav-cta:active{background:#000;color:#fff}
body.mobile-nav-open{overflow:hidden}
body.mobile-nav-open .mobile-nav-backdrop,
body.mobile-nav-open .mobile-nav-panel{opacity:1;pointer-events:auto}
body.mobile-nav-open .mobile-nav-panel{transform:translateY(0) scale(1)}

@media (max-width: 600px){
  nav .nav-links{display:none !important}
  nav .nav-cta{display:none !important}
  .mobile-menu-btn{display:inline-flex}
}