/* ── Shared nav ──
   .app-nav  = wrapper added by the app (app.js)
   #site-nav = bare <nav> on the landing (index.html), filled by nav.js   */
.app-nav,
#site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  height: 56px; padding: 0 28px;
  display: flex; align-items: center; justify-content: space-between;
  transition: box-shadow .2s;
}
/* app pages keep a solid bar over content */
.app-nav {
  background: rgba(247,245,239,0.95); backdrop-filter: blur(14px);
  border-bottom: 1px solid #d8d2c3;
}
.app-nav.scrolled { box-shadow: 0 2px 12px rgba(16,35,29,.08); }
/* landing nav: transparent, no background */
#site-nav { background: transparent; }
.app-nav-logo {
  display: flex; align-items: center; gap: 8px;
  font-weight: 800; font-size: 13px; color: #10231d; text-decoration: none;
}
.app-nav-dot { display: none; }
.app-nav-logo-img { width: 22px; height: 22px; flex-shrink: 0; filter: brightness(0); }
.app-nav-links { display: flex; align-items: center; gap: 24px; }
.app-nav-link {
  font-size: 13px; font-weight: 500; color: #6b756e;
  text-decoration: none; transition: color .15s; white-space: nowrap;
}
.app-nav-link:hover { color: #10231d; }
.app-nav-btn {
  padding: 7px 18px; border-radius: 100px;
  background: #10231d; color: #f7f5ef;
  font-size: 12px; font-weight: 700; text-decoration: none; white-space: nowrap;
  transition: opacity .15s;
}
.app-nav-btn:hover { opacity: .8; }
/* user dropdown */
.app-nav-user { position: relative; }
.app-nav-user-trigger {
  display: flex; align-items: center; gap: 7px; cursor: pointer;
  padding: 5px 10px; border-radius: 20px;
  border: 1px solid #d8d2c3; transition: border-color .15s, background .15s;
}
.app-nav-user-trigger:hover { border-color: #6b756e; background: rgba(0,0,0,.04); }
.app-nav-avatar {
  width: 26px; height: 26px; border-radius: 50%;
  background: #1687e8; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.app-nav-avatar svg { width: 15px; height: 15px; }
.app-nav-username {
  font-size: 12px; font-weight: 600; color: #10231d;
  max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.app-nav-chevron {
  width: 9px; height: 6px; fill: none; stroke: #6b756e;
  stroke-width: 1.5; transition: transform .2s; flex-shrink: 0;
}
.app-nav-user:hover .app-nav-chevron { transform: rotate(180deg); }
.app-nav-dropdown { position: absolute; top: 100%; right: 0; padding-top: 8px; }
.app-nav-dropdown-inner {
  background: #fffdf7; border: 1px solid #d8d2c3; border-radius: 10px;
  padding: 5px; min-width: 170px; box-shadow: 0 8px 24px rgba(16,35,29,.12);
  opacity: 0; pointer-events: none; transform: translateY(-6px);
  transition: opacity .18s, transform .18s;
}
.app-nav-user:hover .app-nav-dropdown-inner { opacity: 1; pointer-events: auto; transform: translateY(0); }
.app-nav-dropdown-item {
  display: block; width: 100%; padding: 9px 14px; border-radius: 7px;
  font-size: 13px; font-weight: 500; color: #10231d;
  background: none; border: none; text-align: left; cursor: pointer; text-decoration: none;
  transition: background .12s;
}
.app-nav-dropdown-item:hover { background: #f7f5ef; }
.app-nav-dropdown-sep { height: 1px; background: #d8d2c3; margin: 4px 6px; }
.app-nav-dropdown-item.danger { color: #c0392b; }
.app-nav-dropdown-item.danger:hover { background: rgba(192,57,43,.07); }
@media (max-width: 540px) { .app-nav-link { display: none; } .app-nav-btn { display: none; } }