/* nav.css - Shared navigation styles */
*,*::before,*::after{box-sizing:border-box}

:root{
  --bg:#ffffff;--surface:#fafafa;--surface-2:#f4f4f5;
  --ink:#09090b;--ink-2:#27272a;--ink-3:#52525b;--ink-4:#71717a;--ink-5:#a1a1aa;
  --line:#e4e4e7;--line-2:#d4d4d8;
  --green:#15803d;--green-soft:#f0fdf4;--green-line:#bbf7d0;
  --sans:'Geist',system-ui,sans-serif;--mono:'Geist Mono',monospace;
}

nav{position:sticky;top:0;z-index:1000;background:rgba(255,255,255,0.9);backdrop-filter:saturate(180%) blur(12px);-webkit-backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--line);font-family:var(--sans)}
.nav-inner{max-width:1240px;margin:0 auto;padding:0 32px;height:56px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.nav-logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);flex-shrink:0}
.nav-mark{width:28px;height:28px;background:var(--ink);border-radius:6px;display:grid;place-items:center;font-family:var(--mono);font-size:11px;font-weight:600;color:white;letter-spacing:-0.04em}
.nav-name{font-size:15px;font-weight:600;letter-spacing:-0.02em}

/* Main nav links */
.nav-links{display:flex;align-items:center;gap:2px;flex:1;justify-content:center}
.nav-item{position:relative}
.nav-link{display:flex;align-items:center;gap:5px;font-size:14px;font-weight:500;color:var(--ink-3);padding:8px 12px;border-radius:6px;cursor:pointer;transition:all 0.15s;background:none;border:none;font-family:var(--sans);text-decoration:none;white-space:nowrap}
.nav-link:hover,.nav-link.active{color:var(--ink);background:var(--surface)}
.nav-chevron{width:12px;height:12px;transition:transform 0.2s;opacity:0.5}
.nav-item.open .nav-chevron{transform:rotate(180deg)}

/* Dropdown */
.nav-dropdown{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);background:white;border:1px solid var(--line);border-radius:12px;box-shadow:0 4px 24px rgba(0,0,0,0.08),0 1px 4px rgba(0,0,0,0.04);padding:8px;min-width:240px;opacity:0;visibility:hidden;transform:translateX(-50%) translateY(-4px);transition:all 0.15s;z-index:100}
.nav-item.open .nav-dropdown{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.nav-dropdown-item{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:8px;text-decoration:none;color:var(--ink);transition:background 0.12s;cursor:pointer}
.nav-dropdown-item:hover{background:var(--surface)}
.nav-dropdown-item.active{background:var(--green-soft)}
.nav-dropdown-label{font-size:13px;font-weight:600;color:var(--ink-2);letter-spacing:-0.01em}
.nav-dropdown-desc{font-size:12px;color:var(--ink-4);line-height:1.4}
.nav-dropdown-divider{height:1px;background:var(--line);margin:4px 0}

/* Nav right */
.nav-right{display:flex;align-items:center;gap:8px;flex-shrink:0}
.nav-btn-ghost{font-size:13px;font-weight:500;color:var(--ink-3);padding:8px 14px;border-radius:6px;transition:all 0.15s;text-decoration:none;border:1px solid var(--line)}
.nav-btn-ghost:hover{color:var(--ink);border-color:var(--line-2);background:var(--surface)}
.nav-btn-primary{font-size:13px;font-weight:500;color:white;background:var(--ink);padding:8px 16px;border-radius:6px;transition:opacity 0.15s;text-decoration:none}
.nav-btn-primary:hover{opacity:0.85}

/* Mobile */
@media(max-width:768px){
  .nav-inner{padding:0 16px}
  .nav-links{display:none}
  .nav-btn-ghost{display:none}
}

/* Hamburger button */
.nav-hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px;border-radius:6px;transition:background 0.15s}
.nav-hamburger:hover{background:var(--surface)}
.nav-hamburger span{display:block;width:20px;height:2px;background:var(--ink);border-radius:2px;transition:all 0.2s}
.nav-hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-hamburger.open span:nth-child(2){opacity:0}
.nav-hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media(max-width:768px){
  .nav-hamburger{display:flex}
}

/* Mobile menu overlay */
.nav-mobile{display:none;position:fixed;top:56px;left:0;right:0;bottom:0;background:white;z-index:999;overflow-y:auto;padding:16px}
.nav-mobile.open{display:block}
.nav-mobile-section{margin-bottom:8px}
.nav-mobile-label{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-5);padding:8px 12px 6px;display:block}
.nav-mobile-item{display:flex;flex-direction:column;gap:2px;padding:12px;border-radius:8px;text-decoration:none;color:var(--ink);transition:background 0.12s;margin-bottom:2px}
.nav-mobile-item:hover,.nav-mobile-item:active{background:var(--surface)}
.nav-mobile-item-label{font-size:15px;font-weight:600;color:var(--ink-2)}
.nav-mobile-item-desc{font-size:12px;color:var(--ink-4);margin-top:2px}
.nav-mobile-divider{height:1px;background:var(--line);margin:8px 0}
.nav-mobile-actions{display:flex;flex-direction:column;gap:8px;padding:16px 0;margin-top:8px;border-top:1px solid var(--line)}
.nav-mobile-btn-primary{background:var(--ink);color:white;padding:14px;border-radius:8px;font-size:15px;font-weight:500;text-align:center;text-decoration:none;display:block}
.nav-mobile-btn-ghost{background:white;color:var(--ink);padding:14px;border-radius:8px;font-size:15px;font-weight:500;text-align:center;text-decoration:none;display:block;border:1px solid var(--line-2)}