/* ==========================================================================
   玄予量化 v3.1 · 侧栏 HUD 导航（Side Command Rail）
   --------------------------------------------------------------------------
   设计目标：与 104px 深空顶带连成完整 L 形指挥舱；分组标题、菜单项、
   图标、高亮态、徽章统一为玻璃态 + 霓虹科幻语言；底部行情通道不再是
   孤立白卡，而是与侧栏同底、由分隔线连接的一体化「状态坞」并带发光 logo。
   只覆盖视觉，不改动 .sidebar / .nav / .nav-item / .side-foot 的 DOM 语义，
   NAV 渲染与 data-view 事件委托照常工作。
   ========================================================================== */
:root{
  --rail-w:230px;
  --rail-cyan:#5eead4;
  --rail-blue:#60a5fa;
  --rail-violet:#a78bfa;
  --rail-text:#e8f1ff;
  --rail-dim:#8ba4cb;
  --rail-mono:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
}

/* ---------- 侧栏主体：深空渐变 + 右侧霓虹竖线 ---------- */
.sidebar{
  position:relative;isolation:isolate;
  background:
    radial-gradient(420px 300px at -10% 0%,rgba(94,234,212,.09),transparent 62%),
    radial-gradient(420px 420px at -20% 100%,rgba(139,92,246,.12),transparent 66%),
    linear-gradient(178deg,#0a1329 0%,#0b1731 46%,#091329 100%);
  border-right:1px solid rgba(120,180,255,.16);
  box-shadow:6px 0 34px rgba(6,14,32,.18);
  color:var(--rail-text);
}
.sidebar::after{
  content:"";position:absolute;top:var(--hud-h);right:0;bottom:0;width:1px;z-index:3;pointer-events:none;
  background:linear-gradient(180deg,rgba(94,234,212,.55),rgba(96,165,250,.18) 42%,rgba(167,139,250,.5));
  box-shadow:0 0 14px rgba(94,234,212,.28);
}
/* 侧栏里一条极淡的纵向扫描光，缓慢下移 */
.sidebar::before{
  content:"";position:absolute;left:0;right:0;top:var(--hud-h);height:120px;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(94,234,212,.045),transparent);
  animation:railScan 14s linear infinite;
}
@keyframes railScan{0%{transform:translateY(-140px)}100%{transform:translateY(900px)}}

/* ---------- 品牌区下方与导航区分隔 ---------- */
.sidebar .nav{
  position:relative;z-index:2;
  /* v3.1：14 个菜单项 + 5 个分组，收紧密度保证「系统 / 用户管理」在 900px 高度首屏可见 */
  padding:9px 10px 8px;
  counter-reset:railsec;
  scrollbar-width:thin;scrollbar-color:rgba(94,234,212,.32) transparent;
}
.sidebar .nav::-webkit-scrollbar{width:5px}
.sidebar .nav::-webkit-scrollbar-thumb{background:rgba(94,234,212,.28);border-radius:6px}
.sidebar .nav::-webkit-scrollbar-track{background:transparent}

/* ---------- 分组标题：HUD 编号 + 发光短线 ---------- */
.sidebar .nav-lbl{
  counter-increment:railsec;
  display:flex;align-items:center;gap:8px;
  font:10px/1 var(--rail-mono);letter-spacing:.2em;
  color:rgba(94,234,212,.78);text-transform:none;
  padding:10px 10px 6px;margin:1px 0 2px;
  border-bottom:1px solid rgba(120,180,255,.1);
}
.sidebar .nav-lbl::before{
  content:"0" counter(railsec) " /";
  font:9px/1 var(--rail-mono);letter-spacing:.08em;
  color:rgba(167,139,250,.85);
  border:1px solid rgba(167,139,250,.34);border-radius:3px;
  padding:3px 5px;background:rgba(167,139,250,.07);
}
.sidebar .nav-lbl::after{
  content:"";flex:1;height:1px;
  background:linear-gradient(90deg,rgba(94,234,212,.32),transparent);
}

/* ---------- 菜单项：玻璃态 + 左侧霓虹光条 ---------- */
.sidebar .nav-item{
  position:relative;overflow:hidden;
  gap:11px;padding:7px 11px;margin-bottom:2px;border-radius:8px;
  color:#a9bfe0;font-size:12.8px;font-weight:500;letter-spacing:.2px;
  border:1px solid transparent;background:transparent;
  transition:background .18s,color .18s,border-color .18s,box-shadow .18s,transform .18s;
}
.sidebar .nav-item .ic{color:#7f9dc9;transition:color .18s,filter .18s;flex:none}
.sidebar .nav-item::before{
  content:"";position:absolute;left:0;top:18%;height:64%;width:2px;border-radius:2px;
  background:linear-gradient(180deg,var(--rail-cyan),var(--rail-violet));
  opacity:0;transform:scaleY(.4);transition:opacity .18s,transform .18s;
  box-shadow:0 0 10px rgba(94,234,212,.7);
}
.sidebar .nav-item:hover{
  background:rgba(96,165,250,.1);color:#eaf4ff;
  border-color:rgba(120,180,255,.18);transform:translateX(2px);
}
.sidebar .nav-item:hover .ic{color:var(--rail-cyan);filter:drop-shadow(0 0 5px rgba(94,234,212,.5))}
.sidebar .nav-item:hover::before{opacity:.5;transform:scaleY(1)}
.sidebar .nav-item.active{
  background:linear-gradient(90deg,rgba(94,234,212,.16),rgba(96,165,250,.1) 62%,rgba(167,139,250,.06));
  color:#f2fbff;font-weight:650;
  border-color:rgba(94,234,212,.32);
  box-shadow:inset 0 0 20px rgba(94,234,212,.07),0 0 18px rgba(94,234,212,.09);
}
.sidebar .nav-item.active .ic{color:var(--rail-cyan);filter:drop-shadow(0 0 7px rgba(94,234,212,.75))}
.sidebar .nav-item.active::before{opacity:1;transform:scaleY(1)}
/* 高亮项右上角的微型脉冲点 */
.sidebar .nav-item.active::after{
  content:"";position:absolute;right:10px;top:50%;transform:translateY(-50%);
  width:5px;height:5px;border-radius:50%;background:var(--rail-cyan);
  box-shadow:0 0 8px var(--rail-cyan);animation:railPulse 2.2s ease-in-out infinite;
}
@keyframes railPulse{0%,100%{opacity:1}50%{opacity:.35}}

/* 数字徽章（因子库 106）改玻璃发光 */
.sidebar .nav-item .badge{
  background:rgba(94,234,212,.1);border:1px solid rgba(94,234,212,.34);
  color:#a9f3e5;border-radius:5px;padding:1px 7px;
  font:10px/1.5 var(--rail-mono);font-weight:600;
  box-shadow:0 0 10px rgba(94,234,212,.12);
}
.sidebar .nav-item.active .badge{background:rgba(94,234,212,.18);color:#dcfff7}

/* ---------- 底部状态坞：与侧栏同底、不再浮起白卡 ---------- */
.sidebar .side-foot{
  position:relative;z-index:2;
  padding:10px 14px 9px;margin-top:auto;
  background:linear-gradient(180deg,rgba(94,234,212,.045),rgba(10,19,41,.5));
  border-top:1px solid rgba(94,234,212,.24);
  box-shadow:inset 0 1px 0 rgba(94,234,212,.06);
}
.sidebar .side-foot::before{
  content:"";position:absolute;left:14px;right:14px;top:-1px;height:1px;
  background:linear-gradient(90deg,var(--rail-cyan),rgba(96,165,250,.2) 60%,transparent);
  box-shadow:0 0 12px rgba(94,234,212,.5);
}
.sidebar .auth-box{
  background:transparent;border:0;border-radius:0;padding:0;
  display:flex;align-items:center;gap:11px;
}
.dock-txt{min-width:0;flex:1}
/* 一体化发光 logo：复用品牌折线图形语言 */
.dock-logo{
  position:relative;flex:none;width:32px;height:32px;border-radius:9px;
  display:grid;place-items:center;color:var(--rail-cyan);
  background:linear-gradient(140deg,rgba(94,234,212,.16),rgba(96,165,250,.2) 50%,rgba(167,139,250,.22));
  border:1px solid rgba(94,234,212,.42);
  box-shadow:0 0 0 4px rgba(94,234,212,.04),0 0 18px rgba(94,234,212,.24),inset 0 0 14px rgba(94,234,212,.1);
}
.dock-logo::after{
  content:"";position:absolute;inset:-6px;border-radius:50%;
  border:1px dashed rgba(94,234,212,.28);animation:hudSpin 22s linear infinite;
}
.sidebar .auth-box .t{
  font-size:12px;font-weight:600;letter-spacing:.3px;color:#dff7f1;
  display:flex;align-items:center;gap:7px;
}
.sidebar .auth-box .t .dot{
  width:6px;height:6px;color:#0f9d58;background:#34d399;
  box-shadow:0 0 8px #34d399;animation:railPulse 2.2s ease-in-out infinite;
}
.sidebar .auth-box .d{
  font:9.5px/1.4 var(--rail-mono);letter-spacing:.04em;
  color:var(--rail-dim);margin-top:3px;
}
.dock-seq{
  display:flex;align-items:center;justify-content:space-between;
  margin-top:8px;padding-top:7px;border-top:1px solid rgba(120,180,255,.1);
  font:8.5px/1 var(--rail-mono);letter-spacing:.16em;color:rgba(94,234,212,.55);
}
.dock-seq b{font-weight:400;color:rgba(167,139,250,.75)}

/* ---------- 侧栏与主内容之间的浅色过渡保持干净 ---------- */
.main{background:var(--bg)}

/* ---------- 窄屏：侧栏收敛为 60px 图标条，隐藏文字与状态坞 ---------- */
@media(max-width:820px){
  .sidebar .nav{padding:12px 6px}
  .sidebar .nav-lbl{
    font-size:0;letter-spacing:0;padding:8px 4px 6px;justify-content:center;
    border-bottom:1px solid rgba(120,180,255,.12);margin:6px 2px;
  }
  .sidebar .nav-lbl::before{content:"0" counter(railsec);font-size:8px;padding:2px 3px}
  .sidebar .nav-lbl::after{display:none}
  .sidebar .nav-item{justify-content:center;padding:10px;gap:0}
  .sidebar .nav-item .badge,.sidebar .nav-item.active::after{display:none}
  .sidebar .side-foot,.dock-seq{display:none}
}

/* 尊重系统减少动效设置 */
@media(prefers-reduced-motion:reduce){
  .sidebar::before,.dock-logo::after,
  .sidebar .nav-item.active::after,.sidebar .auth-box .t .dot{animation:none}
}