/* ══════════════════════════════════════════════════════════
   nav-ui.css — 导航管理重设计（覆盖层）
   去掉 index.html 里这一行 <link> 即可回退到 app.js 的原实现。
   ══════════════════════════════════════════════════════════ */

.navm-wrap{display:flex;flex-direction:column;gap:14px;}

/* ── 两个分区 ── */
.navm-zone{border-radius:16px;padding:12px;
  border:1px solid var(--glass-border,rgba(255,183,197,.16));
  background:rgba(255,255,255,.03);transition:border-color .2s,background .2s;}
body.ds-dragging .navm-zone{border-style:dashed;}
.navm-zt{display:flex;align-items:baseline;gap:9px;padding:2px 4px 10px;}
.navm-zt b{font-size:.86rem;font-weight:700;}
.navm-zt span{font-size:.7rem;color:var(--text-sub,#9d93b5);}
.navm-count{margin-left:auto;font-style:normal;font-size:.7rem;
  padding:1px 9px;border-radius:999px;font-variant-numeric:tabular-nums;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);
  color:var(--text-sub,#9d93b5);}

.navm-list{display:flex;flex-direction:column;gap:6px;min-height:52px;}
.navm-empty{display:grid;place-items:center;min-height:52px;border-radius:11px;
  border:1px dashed rgba(255,255,255,.14);
  font-size:.74rem;color:var(--text-sub,#9d93b5);opacity:.7;}

/* ── 条目 ── */
.navm-row{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:11px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);
  cursor:grab;user-select:none;-webkit-user-select:none;touch-action:none;
  transition:background .16s,border-color .16s,transform .16s;}
.navm-row:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.16);}
.navm-row:active{cursor:grabbing;}



.navm-ico{font-size:1.1rem;line-height:1;flex:0 0 auto;width:22px;text-align:center;}
.navm-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.navm-txt b{font-size:.82rem;font-weight:600;}
.navm-txt i{font-style:normal;font-size:.68rem;color:var(--text-sub,#9d93b5);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

.navm-move{flex:0 0 auto;padding:4px 10px;border-radius:8px;cursor:pointer;
  font-size:.68rem;font-family:inherit;white-space:nowrap;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  color:var(--text-sub,#9d93b5);transition:.16s;}
.navm-move:hover{background:rgba(255,183,197,.16);border-color:rgba(255,183,197,.3);
  color:var(--pink-sakura,#ffb7c5);}


/* ── 白天主题 ── */
body.theme-light .navm-zone{background:rgba(0,0,0,.025);border-color:rgba(0,0,0,.08);}
body.theme-light .navm-row{background:#fff;border-color:rgba(0,0,0,.08);}
body.theme-light .navm-row:hover{background:rgba(0,0,0,.03);}
body.theme-light .navm-row.ds-ghost{background:#fff;}
body.theme-light .navm-empty{border-color:rgba(0,0,0,.14);}

@media(max-width:560px){
  .navm-txt i{display:none;}          /* 窄屏只留名称，别把行挤成两行 */
  .navm-row{padding:10px;}
}
@media(prefers-reduced-motion:reduce){
  .navm-ph{animation:none;}
  .navm-ghost{transform:none;}
}

/* Apex 用真实的猎杀徽章，不是 emoji */
.navm-img{width:20px;height:20px;object-fit:contain;vertical-align:-4px;}

/* 百宝箱自己那一条：可以拖位置，但不能收进自己 */
.navm-row.navm-self{border-style:dashed;border-color:rgba(255,183,197,.3);
  background:rgba(255,183,197,.06);}
.navm-lock{flex:0 0 auto;font-size:.66rem;padding:3px 9px;border-radius:8px;
  color:var(--text-sub,#9d93b5);background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.09);white-space:nowrap;}

/* 百宝箱下拉：居中对齐到按钮下方 */
#nav-more-dropdown{left:50% !important;right:auto !important;
  transform:translateX(-50%) translateY(-6px);
  transform-origin:top center;}
#nav-more-dropdown.open{transform:translateX(-50%) translateY(0);}
/* 指向按钮的小三角 */
#nav-more-dropdown::before{content:'';position:absolute;top:-7px;left:50%;
  width:14px;height:14px;transform:translateX(-50%) rotate(45deg);
  background:inherit;border-left:1px solid var(--glass-border,rgba(255,183,197,.2));
  border-top:1px solid var(--glass-border,rgba(255,183,197,.2));}
@media(max-width:560px){
  /* 窄屏居中会顶出屏幕，改回贴右 */
  #nav-more-dropdown{left:auto !important;right:0 !important;
    transform:translateY(-6px);}
  #nav-more-dropdown.open{transform:translateY(0);}
  #nav-more-dropdown::before{left:auto;right:16px;transform:rotate(45deg);}
}

/* 百宝箱最多露出三行，其余下滑查看。
   高度不写死：写死行高会把图标压扁（条目本身有自己的内边距和
   两行文字）。改由 nav-ui.js 量出第 4 个条目的位置再设 max-height，
   条目样式怎么变都不会挤到图标。 */
#nav-more-grid{overflow-y:auto;overscroll-behavior:contain;
  padding-right:4px;scrollbar-width:thin;
  scrollbar-color:rgba(255,183,197,.35) transparent;}
#nav-more-grid::-webkit-scrollbar{width:5px}
#nav-more-grid::-webkit-scrollbar-thumb{background:rgba(255,183,197,.35);border-radius:5px}
#nav-more-grid::-webkit-scrollbar-thumb:hover{background:rgba(255,183,197,.6)}
#nav-more-grid::-webkit-scrollbar-track{background:transparent}