/* shell.css v2 — 模块通用骨架 */

/* Workspace base */
.workspace {
  grid-area: main;
  overflow: hidden;
  background: var(--bg-page);
}

/* 主区域可滚动容器 */
.content-scroll {
  height: 100%;
  overflow: auto;
  padding: var(--space-6) var(--space-8);
}

/* 内容最大宽度 */
.content-wrap {
  max-width: var(--content-max);
  margin: 0 auto;
}

/* 顶部筛选栏（替代旧版左侧栏） */
.filter-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  background: var(--bg-page);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
}
.filter-bar .group {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.filter-bar .label {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
}
.filter-bar .divider-v {
  width: 1px;
  height: 20px;
  background: var(--border-faint);
}
.filter-bar .grow { flex: 1; }

/* 抽屉（替代旧版右侧栏） */
.drawer {
  position: fixed;
  top: var(--topbar-h);
  right: 0;
  bottom: 0;
  width: 420px;
  background: var(--bg-page);
  border-left: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-lg);
  z-index: 50;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateX(0);
  transition: transform var(--duration-normal) var(--ease-out);
}
.drawer.closed { transform: translateX(100%); }
.drawer-head {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-faint);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.drawer-body {
  flex: 1;
  overflow: auto;
  padding: var(--space-5);
}
.drawer-foot {
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--border-faint);
  display: flex;
  gap: var(--space-2);
  flex-shrink: 0;
  background: var(--bg-soft);
}

/* Modal */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(14, 16, 25, 0.4);
  backdrop-filter: blur(4px);
  z-index: 100;
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-normal) var(--ease-out);
}
.modal-backdrop.open { opacity: 1; pointer-events: auto; }
.modal {
  background: var(--bg-page);
  border-radius: var(--radius-xl);
  width: 540px;
  max-width: 90vw;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  transform: scale(0.96);
  transition: transform var(--duration-normal) var(--ease-out);
}
.modal-backdrop.open .modal { transform: scale(1); }

/* Animate fade-in for content blocks */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-up { animation: fade-up 320ms var(--ease-out) both; }
.fade-up-1 { animation-delay: 40ms; }
.fade-up-2 { animation-delay: 80ms; }
.fade-up-3 { animation-delay: 120ms; }
.fade-up-4 { animation-delay: 160ms; }
@media (prefers-reduced-motion: reduce) {
  .fade-up, .fade-up-1, .fade-up-2, .fade-up-3, .fade-up-4 { animation: none; }
}