/* ============================================================
   子页面共享导航：左上角汉堡按钮 + 左侧抽屉导航
   供 packflow / shipflow / freightflow 统一引入
   浅色高级配色：白底抽屉 + 墨蓝文字 + 琥珀金强调
   ============================================================ */

/* ---- 汉堡按钮 ---- */
.nav-hamburger{
  display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;flex:none;border:none;border-radius:8px;
  background:transparent;color:#2A3950;cursor:pointer;
  transition:background .15s;
}
.nav-hamburger:hover{background:#FAF8F3}
.nav-hamburger:active{background:#F1EDE3}
.nav-hamburger svg{display:block}

/* ---- 遮罩 ---- */
.nav-mask{
  position:fixed;inset:0;z-index:110;
  background:rgba(15,20,28,.45);
  opacity:0;visibility:hidden;
  transition:opacity .22s ease,visibility .22s;
}
.nav-mask.on{opacity:1;visibility:visible}

/* ---- 抽屉 ---- */
.nav-drawer{
  position:fixed;top:0;left:0;bottom:0;z-index:120;
  width:288px;max-width:86vw;
  background:#FFFFFF;color:#1F2B3A;
  display:flex;flex-direction:column;
  transform:translateX(-104%);
  transition:transform .25s ease;
  box-shadow:4px 0 24px rgba(0,0,0,.14);
}
.nav-drawer.open{transform:translateX(0)}

.nav-drawer-head{
  position:relative;padding:18px 20px 14px;
  border-bottom:1px solid #E7E2D6;
}
.nav-brand{font-size:19px;font-weight:700;letter-spacing:.02em;color:#2A3950}
.nav-brand-sub{font-size:12px;color:#7A8494;margin-top:4px;letter-spacing:.02em}
.nav-close{
  position:absolute;top:13px;right:13px;
  width:30px;height:30px;border:none;border-radius:6px;
  background:transparent;color:#A7AEBB;
  font-size:21px;line-height:1;cursor:pointer;
}
.nav-close:hover{background:#FAF8F3;color:#2A3950}

.nav-drawer-body{flex:1;overflow-y:auto;padding:10px}
.nav-drawer-body::-webkit-scrollbar{width:6px}
.nav-drawer-body::-webkit-scrollbar-thumb{background:rgba(31,43,58,.18);border-radius:6px}
.nav-drawer-body::-webkit-scrollbar-track{background:transparent}
.nav-group-label{
  font-size:13px;color:#A7AEBB;letter-spacing:.06em;
  padding:14px 12px 6px;
}
.nav-item{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;border-radius:8px;
  color:#2A3950;text-decoration:none;font-size:14px;
  transition:background .13s;
}
.nav-item:hover{background:#FAF8F3}
.nav-item.active{background:#F6EFDF;color:#8A6420;font-weight:600}
.nav-item small{color:#A7AEBB;font-size:11px;margin-left:auto;letter-spacing:.05em}
.nav-item.active small{color:#A07A2E}
.nav-item svg{flex:none;width:18px;height:18px}

.nav-drawer-foot{
  padding:12px 20px;font-size:12px;color:#A7AEBB;
  border-top:1px solid #E7E2D6;
}
.nav-drawer-foot b{color:#A07A2E;font-weight:600}

/* ---- 可折叠分组（二级菜单）---- */
.nav-group-toggle{
  display:flex;align-items:center;gap:6px;
  width:100%;padding:0;margin:0;
  background:none;border:none;cursor:pointer;
  font:inherit;color:inherit;text-align:left;
}
.nav-group-toggle .nav-group-label{flex:1;margin:0}
.nav-group-arrow{
  flex:none;width:14px;height:14px;color:#A7AEBB;
  margin-right:10px;
  transition:transform .18s ease;
}
.nav-group.open .nav-group-arrow{transform:rotate(90deg)}
.nav-group-items{
  max-height:0;overflow:hidden;opacity:0;
  transition:max-height .22s ease,opacity .18s ease;
}
.nav-group.open .nav-group-items{max-height:220px;opacity:1}
.nav-group-items .nav-item{padding-left:26px}

/* ---- 会员/定价 行动项（登录态动态文案，固定抽屉底部）---- */
.nav-item-cta{
  display:flex;align-items:center;gap:10px;
  flex:none;margin:10px 12px 8px;padding:11px 12px;border-radius:8px;
  background:rgba(138,100,32,.12);
  border:1px solid rgba(138,100,32,.3);
  color:#8A6420;text-decoration:none;font-size:14px;font-weight:600;
  transition:background .15s,border-color .15s,color .15s;
}
.nav-item-cta:hover{background:rgba(138,100,32,.2);border-color:rgba(138,100,32,.45);color:#6E4F18}
.nav-item-cta svg{flex:none;width:18px;height:18px}

body.nav-lock{overflow:hidden}

/* ---- AI 知识库 菜单项（突出显示，引导用户进入知识库问答）---- */
.nav-item-ai{color:#C2410C;font-weight:600}
.nav-item-ai svg{color:#F08A24}
.nav-item-ai:hover{background:#FFF5EC;color:#C2410C}
.nav-item-ai.active{background:#FDEADB;color:#C2410C}
.nav-item-ai.active small{color:#C2410C}

/* ---- 会员弹窗（子页注入版：nav- 前缀，与后台 portal.css 隔离不冲突）---- */
.nav-modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:300;
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .22s;
  padding:20px;
}
.nav-modal-overlay.open{opacity:1;pointer-events:auto}
.nav-modal{
  background:#fff;border-radius:14px;max-width:640px;width:100%;
  max-height:90vh;overflow-y:auto;position:relative;
  box-shadow:0 20px 60px rgba(0,0,0,.2);
  transform:scale(.94) translateY(8px);transition:transform .22s;
}
.nav-modal-overlay.open .nav-modal{transform:scale(1) translateY(0)}
.nav-modal-header{padding:22px 26px 0}
.nav-modal-title{font-size:20px;font-weight:700;color:#2A3950}
.nav-modal-sub{font-size:13px;color:#7A8494;margin-top:4px}
.nav-modal-close{
  position:absolute;top:16px;right:16px;
  width:34px;height:34px;border:none;background:#FAF8F3;
  border-radius:50%;font-size:18px;cursor:pointer;color:#7A8494;
  display:flex;align-items:center;justify-content:center;line-height:1;
  transition:background .15s,color .15s;
}
.nav-modal-close:hover{background:#EFEBE1;color:#1F2B3A}
.nav-modal-body{padding:20px 26px 26px;position:relative}
.nav-tier-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-top:6px}
.nav-tier-card{
  border:1.5px solid #E7E2D6;border-radius:12px;padding:22px 16px;
  text-align:center;position:relative;transition:border-color .2s,box-shadow .2s;
  background:#fff;
}
.nav-tier-card:hover{border-color:#8A6420;box-shadow:0 1px 2px rgba(0,0,0,.06)}
.nav-tier-card.featured{border-color:#F08A24;border-width:2px}
.nav-tier-card.featured::before{
  content:'推荐';position:absolute;top:-10px;left:50%;transform:translateX(-50%);
  background:#F08A24;color:#2A3950;font-size:10px;font-weight:700;
  padding:2px 12px;border-radius:999px;letter-spacing:.05em;
}
.nav-tier-name{font-size:15px;font-weight:700;color:#2A3950;margin-bottom:8px}
.nav-tier-price{font-size:32px;font-weight:800;color:#1F2B3A;margin-bottom:2px}
.nav-tier-price .nav-unit{font-size:14px;font-weight:500;color:#A7AEBB}
.nav-tier-price.free{color:#1F7A44}
.nav-tier-badge{font-size:11px;color:#A7AEBB;margin-bottom:16px}
.nav-tier-feats{list-style:none;text-align:left;margin-bottom:20px}
.nav-tier-feats li{font-size:12px;color:#7A8494;line-height:1.7;padding-left:18px;position:relative}
.nav-tier-feats li::before{content:'✓';position:absolute;left:0;color:#1F7A44;font-weight:700}
.nav-tier-feats li.disabled{color:#A7AEBB;opacity:.6}
.nav-tier-feats li.disabled::before{content:'—';color:#A7AEBB}
.nav-tier-btn{
  width:100%;height:38px;border:none;border-radius:8px;
  font-size:13px;font-weight:700;cursor:pointer;transition:background .15s;
}
.nav-tier-btn.free{background:#8A6420;color:#fff}
.nav-tier-btn.free:hover{background:#6E4F18}
.nav-tier-btn.paid{background:#F08A24;color:#2A3950}
.nav-tier-btn.paid:hover{background:#FFAD33}
.nav-tier-btn.current{background:#FAF8F3;color:#7A8494;border:1.5px solid #E7E2D6;cursor:default}
.nav-member-note{text-align:center;font-size:11.5px;color:#A7AEBB;margin-top:18px;line-height:1.6}