/* 整体分栏布局与视图切换
   注意：不能给 #app 设置 z-index——否则会创建层叠上下文，
   导致移动端侧栏抽屉（z-60，位于 #app 内）被 body 直挂的 drawer-mask（z-40）盖住 */
#app {
  position: relative;
  height: 100vh;
  height: 100dvh;
}

/* ===== 主视图：左右分栏 ===== */
.view-home {
  display: flex;
  height: 100%;
  gap: var(--gap);
  padding: var(--gap);
}

.content {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  padding: 18px clamp(16px, 3vw, 40px) var(--gap-lg);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.content-inner {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--gap-lg);
}

/* ===== 管理视图 ===== */
.view-admin {
  height: 100%;
  overflow-y: auto;
  padding: var(--gap);
}

/* ===== 移动端抽屉遮罩 ===== */
.drawer-mask {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: var(--mask-strong);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  animation: fade-in 0.25s var(--ease-smooth);
}