/* 后台框架布局：左固定侧栏 + 顶栏 + 内容区（对应 white_red dashboard 结构）*/

.shell { min-height: 100vh; }

/* 侧栏 */
.sidebar {
  position: fixed; inset: 0 auto 0 0; width: var(--sidebar-w);
  display: flex; flex-direction: column; padding: var(--sp-lg) 0;
  background: var(--c-surface-low);
  border-right: 1px solid var(--c-outline-var);
  box-shadow: var(--shadow-sm); z-index: 50;
}
.sidebar__brand { display: flex; align-items: center; gap: var(--sp-sm); padding: 0 var(--sp-lg) var(--sp-lg); }
.sidebar__logo {
  width: 40px; height: 40px; display: grid; place-items: center;
  background: var(--c-primary-container); color: var(--c-on-primary);
  font-weight: 800; box-shadow: var(--shadow-md);
  clip-path: polygon(0 0, 100% 0, 86% 100%, 0 100%);
}
.sidebar__name { font-weight: 800; letter-spacing: .04em; }
.sidebar__nav { flex: 1; padding: 0 var(--sp-md); display: flex; flex-direction: column; gap: 4px; }
.sidebar__footer { padding: var(--sp-lg) var(--sp-md) 0; margin-top: auto; border-top: 1px solid var(--c-outline-var); }

/* 主区 */
.main { margin-left: var(--sidebar-w); display: flex; flex-direction: column; min-height: 100vh; background: var(--c-surface-bright); }

/* 顶栏 */
.topbar {
  position: sticky; top: 0; z-index: 10;
  height: var(--topbar-h); display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--sp-lg);
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-outline-var);
  box-shadow: var(--shadow-sm);
}
.topbar__title { font-size: var(--fs-h2); font-weight: 700; }
.topbar__actions { display: flex; align-items: center; gap: var(--sp-md); }
.topbar__divider { width: 1px; height: 28px; background: var(--c-outline-var); }
.topbar__user { display: flex; align-items: center; gap: var(--sp-sm); font-size: var(--fs-sm); }
.topbar__avatar { width: 32px; height: 32px; border-radius: var(--r-full); background: var(--c-secondary-container); color: var(--c-on-surface); display: grid; place-items: center; font-weight: 700; }

/* 内容区 */
.view { flex: 1; overflow-y: auto; padding: var(--sp-lg); }
.view__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-lg); }

/* 网格 */
.grid { display: grid; gap: var(--sp-md); }
.grid--cards { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

@media (max-width: 860px) {
  .sidebar { transform: translateX(-100%); transition: transform .25s var(--ease); }
  .main { margin-left: 0; }
}