/* ---------- Header & Nav ---------- */
header{
  background:var(--card);
  color:var(--text);
  position:sticky; top:0; z-index:50;
  border-bottom:1px solid var(--border);
  box-shadow:var(--shadow);
}
header .container{display:flex; align-items:center; flex-wrap:nowrap; justify-content:flex-start; gap:14px}
.nav-shell{display:flex; align-items:center; gap:14px; margin-left:auto; flex-shrink:0}
.brand{display:flex; align-items:center;}
.brand__link{display:inline-flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.2px; color:var(--text); text-decoration:none;}
.brand__logo{height:36px; width:auto; max-width:160px; object-fit:contain; display:block;}
.brand__name{font-size:1.15rem; line-height:1.2; white-space:nowrap;}

/* Desktop nav */
nav#site-nav{display:flex; align-items:center; gap:14px}
nav#site-nav> a{color:var(--text); padding:0; border-radius:10px}
nav#site-nav> a.nav-link:hover{background:var(--primary-weak)}

.nav-link{display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:999px; background:transparent; color:var(--text); font-weight:500; position:relative; transition:background .2s ease, transform .2s ease}
.nav-link:hover{background:var(--primary-weak); transform:translateY(-1px)}
.nav-link-icon{display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; background:rgba(148,163,184,.15); font-size:1.2rem; position:relative}
.nav-link-badge{position:absolute; top:-6px; right:-6px; min-width:20px; height:20px; padding:0 6px; border-radius:999px; background:#ef4444; color:#fff; font-size:.7rem; font-weight:600; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 6px rgba(239,68,68,.45)}
.nav-link-label{font-size:.95rem; line-height:1.1}

.nav-user{position:relative; display:inline-flex; align-items:center; margin-left:4px}
.nav-user summary{list-style:none; display:inline-flex; align-items:center; width:100%;}
.nav-link--user{cursor:pointer; border:1px solid transparent; padding-right:10px}
.nav-link--user::-webkit-details-marker{display:none}
.nav-link--user:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.nav-link-avatar{display:inline-flex; width:32px; height:32px; border-radius:50%; overflow:hidden; box-shadow:0 0 0 1px rgba(255,255,255,.6)}
.nav-link-avatar img{width:100%; height:100%; object-fit:cover}
.nav-link-icon--avatar{background:var(--primary-weak); font-weight:600}
.nav-link-caret{font-size:.7rem; opacity:.7; margin-left:2px}
.nav-user[open]>.nav-link--user,.nav-user:hover>.nav-link--user{background:var(--primary-weak); border-color:var(--primary)}
.nav-user-menu{display:none; position:absolute; left:0; top:calc(100% + 10px); min-width:190px; padding:10px 12px; background:#fff; border:1px solid var(--border); border-radius:14px; box-shadow:0 14px 40px rgba(15,23,42,.2); z-index:4000; flex-direction:column; gap:6px}
.nav-user[open] .nav-user-menu{display:flex}
.nav-user-menu a{color:var(--text); padding:8px 10px; border-radius:9px; display:flex; align-items:center; gap:8px}
.nav-user-menu a:hover{background:var(--primary-weak)}

.download-modal[hidden]{display:none}
.download-modal{position:fixed; inset:0; display:flex; align-items:center; justify-content:center; z-index:4500;}
.download-modal__backdrop{position:absolute; inset:0; background:rgba(15,23,42,.25); backdrop-filter:blur(1px);}
.download-modal__dialog{position:relative; z-index:1; background:#fff; border-radius:16px; box-shadow:0 16px 40px rgba(15,23,42,.2); padding:18px 20px; min-width:260px; max-width:360px; border:1px solid var(--border); display:flex; flex-direction:column; gap:12px}
.download-modal__header{display:flex; align-items:center; justify-content:space-between; gap:10px}
.download-modal__header h2{margin:0; font-size:1.05rem}
.download-modal__close{background:transparent; border:1px solid var(--border); border-radius:10px; width:34px; height:34px; cursor:pointer; font-size:1.1rem; line-height:1; color:var(--muted)}
.download-modal__close:hover{background:var(--primary-weak)}
.download-modal__hint{margin:0; color:var(--muted); font-size:.9rem}
.download-modal__pitch{margin:0; color:var(--text); font-size:.95rem; line-height:1.5}
.download-modal__links{display:flex; flex-direction:column; gap:10px}
.download-modal__link{display:flex; align-items:center; gap:10px; border:1px solid var(--border); border-radius:12px; padding:10px 12px; background:var(--surface-2); color:var(--text); text-decoration:none; font-weight:600}
.download-modal__link:hover{background:var(--primary-weak); text-decoration:none}
.download-modal__icon{width:34px; height:34px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; background:#fff; border:1px solid var(--border); font-size:1.1rem}
.download-modal__label{flex:1}

@media (max-width:640px){
  .download-modal{align-items:flex-end; padding:14px 12px;}
  .download-modal__dialog{width:100%; max-width:none; min-width:0; margin:0 4px 8px; border-radius:14px; max-height:calc(100vh - 36px); overflow:auto; box-shadow:0 12px 32px rgba(15,23,42,.2);} 
  .download-modal__links{gap:8px;}
}

/* Toggle (hidden on desktop) */
.nav-toggle-btn{
  display:none;
  font-size:1.5rem; line-height:1;
  padding:8px 10px;
  border:1px solid #cbd5e1;
  border-radius:8px;
  color:var(--text);
  background:#fff;
}

/* Backdrop kept invisible to avoid grey overlay */
.nav-backdrop{
  position:fixed; inset:0;
  background:transparent;
  opacity:0; pointer-events:none;
  z-index:3000;
}

/* Desktop keeps normal flow */
@media (min-width:761px){
  .nav-backdrop{display:none!important}
  nav#site-nav{
    position:static!important; transform:none!important; opacity:1!important;
    pointer-events:auto!important; width:auto!important; max-height:none!important; z-index:auto!important;
  }
}

/* Mobile pop-up nav (no grey overlay) */
@media (max-width:760px){
  header .container{flex-wrap:nowrap; gap:10px; align-items:center;}
  .brand__logo{height:30px;}
  .brand__name{font-size:1rem;}
  .nav-warning{flex:1 1 auto; min-width:0; text-align:center; justify-content:center; padding-inline:8px;}
  .nav-toggle-btn{
    display:inline-flex!important;
    position:relative; z-index:3001!important; background:#fff;
  }
  .nav-backdrop{
    background:transparent!important; opacity:0!important; pointer-events:none!important;
  }
  nav#site-nav{
    position:fixed!important; top:58px; right:16px;
    width:auto!important; max-width:80vw; max-height:60vh; overflow-y:auto;
    display:flex!important; flex-direction:column; gap:8px;
    padding:12px; background:#fff; color:var(--text);
    border:1px solid var(--border); border-radius:12px; box-shadow:0 6px 24px rgba(0,0,0,.15);
    transform:scale(.96); opacity:0; pointer-events:none;
    transition:transform .2s ease, opacity .2s ease; z-index:3002!important;
  }
  body.nav-open nav#site-nav{transform:scale(1); opacity:1; pointer-events:auto}
  nav#site-nav> a{display:block; color:var(--text); border-radius:10px}
  nav#site-nav> a:hover{background:#f8fafc}
  .nav-link{width:100%; justify-content:flex-start; display:flex}
  .nav-user{width:100%; position:relative; display:flex; flex-direction:column; align-items:stretch;}
  .nav-link--user{width:100%; justify-content:flex-start; border-radius:10px; margin-bottom:6px;}
  .nav-user-menu{position:static; width:100%; margin:0; box-shadow:none; border-radius:10px; border:1px solid var(--border); padding:8px; background:#f8fafc; align-items:stretch;}
}