/* ============================================================
   LAYOUT — 侧边栏 / 顶栏 / 主体视图容器
   所有尺寸 = 8px 整数倍，模块高度 = 32px 整数倍
   ============================================================ */
.app{
  position:relative; z-index:2;
  display:grid;
  grid-template-columns:var(--sidebar-w) 1fr;
  height:100vh;
}

/* ---------------- SIDEBAR ---------------- */
.sidebar{
  display:flex; flex-direction:column;
  background:var(--panel);
  border-right:1px solid var(--line);
  height:100vh;
  overflow:hidden;
}

.brand{
  height:var(--topbar-h);
  display:flex; align-items:center; gap:var(--u2);
  padding:0 var(--u3);
  border-bottom:1px solid var(--line);
  flex:0 0 auto;
}
.brand-mark{
  width:40px; height:40px; flex:0 0 40px;
  display:grid; place-items:center;
  background:var(--acid); color:#04120A;
  font-family:var(--pixel); font-size:11px;
  box-shadow:0 0 0 1px var(--acid), 0 0 16px -4px var(--acid-glow);
}
.brand-txt{ min-width:0; }
.brand-title{
  font-family:var(--pixel); font-size:11px; color:var(--txt);
  letter-spacing:.02em;
}
.brand-sub{ font-size:10px; color:var(--txt-3); letter-spacing:.1em; margin-top:4px; }

.nav{ padding:var(--u3) 0; display:flex; flex-direction:column; gap:var(--u1); flex:0 0 auto; }
.nav-item{
  display:flex; align-items:center; gap:var(--u2);
  height:48px; padding:0 var(--u3);
  color:var(--txt-2); font-size:13px;
  border-left:2px solid transparent;
  position:relative;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav-item:hover{ background:var(--panel-2); color:var(--txt); }
.nav-item .nav-ico{
  width:16px; height:16px; flex:0 0 16px; display:block; color:currentColor;
}
.nav-item .nav-ico svg{ width:16px; height:16px; display:block; fill:currentColor; }
.nav-item .nav-label{ flex:1; letter-spacing:.02em; }
.nav-item .nav-key{
  font-size:10px; color:var(--txt-4); border:1px solid var(--line);
  padding:0 6px; line-height:16px;
}
.nav-item.is-active{
  background:linear-gradient(90deg, var(--acid-dim) 0%, transparent 100%);
  color:var(--acid);
  border-left-color:var(--acid);
}
.nav-item.is-active .nav-key{ color:var(--acid); border-color:var(--acid-dim2); }
.nav-item.is-active .nav-ico{ filter:drop-shadow(0 0 4px var(--acid-glow)); }

/* 侧栏只剩导航 + 底部一行存储提示 */
.side-foot{
  margin-top:auto; padding:var(--u2) var(--u3);
  border-top:1px solid var(--line);
  flex:0 0 auto;
}
.side-foot-meta{ font-size:10px; color:var(--txt-4); letter-spacing:.08em; }

/* ---------------- MAIN / TOPBAR ---------------- */
.main{
  display:flex; flex-direction:column;
  height:100vh; min-width:0;
}

.topbar{
  height:var(--topbar-h); flex:0 0 var(--topbar-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--u5);          /* 40px：面板边缘压在背景大网格线上 */
  border-bottom:1px solid var(--line);
  background:rgba(11,14,11,.82);
  backdrop-filter:blur(6px);
}
.topbar-crumb{
  font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--txt-3);
  margin-bottom:var(--u1);
}
.topbar-title{ font-size:20px; font-weight:700; letter-spacing:.02em; }
.topbar-r{ display:flex; align-items:center; gap:var(--u3); }

.clock{ text-align:right; }
.clock-date{ font-size:11px; color:var(--txt-2); letter-spacing:.06em; }
.clock-time{ font-size:13px; color:var(--acid); letter-spacing:.04em; }

.view{
  flex:1; min-height:0;
  overflow-y:auto;
  padding:var(--u5);           /* 40px = 1 个网格单元，面板边缘对齐网格线 */
  display:flex; flex-direction:column;
  gap:var(--u5);               /* 区块间距同样对齐网格 */
}

/* 视图内区块：左对齐网格起始线 */
.section{ display:flex; flex-direction:column; gap:var(--u3); }
.section-h{
  display:flex; align-items:center; gap:var(--u2);
  height:32px;
}
.section-h .bar{ width:4px; height:16px; background:var(--acid); }
.section-h .t{ font-size:13px; font-weight:700; letter-spacing:.04em; }
.section-h .sub{ font-size:11px; color:var(--txt-3); }

@media (max-width:1100px){
  .app{ grid-template-columns:80px 1fr; }
  .brand-txt,.nav-item .nav-label,.nav-item .nav-key,.side-foot-meta{ display:none; }
  .brand{ justify-content:center; padding:0; }
  .nav-item{ justify-content:center; padding:0; }
  .view,.topbar{ padding-left:var(--u3); padding-right:var(--u3); }
}