/* =====================================================================
 * layout.css —— 三栏架构与响应式（移动端优先：横屏 + 竖屏自适应）
 * ===================================================================== */
.app { display: flex; flex-direction: column; height: 100dvh; overflow: hidden; }

/* —— A. 顶部贯穿栏：仅状态，全局固定 —— */
.topbar {
  position: sticky; top: 0; z-index: var(--z-topbar);
  flex: none; height: var(--topbar-h);
  display: flex; align-items: center; gap: 14px; padding: 0 16px;
  background: rgba(255,255,255,0.82); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-color);
}
.topbar__logo { display: flex; align-items: center; gap: 8px; flex: none; font-size: var(--fs-title); }
.topbar__logo-mark { width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--border-color); display: grid; place-items: center; color: var(--primary-color); background: var(--surface-color); box-shadow: var(--shadow-soft); }
.topbar__metrics { display: flex; align-items: center; gap: 18px; margin-left: auto; overflow-x: auto; scrollbar-width: none; }
.topbar__metrics::-webkit-scrollbar { display: none; }
.metric { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.metric__label { font-size: 10px; color: var(--text-secondary); white-space: nowrap; letter-spacing: .4px; }
.metric__value { font-size: var(--fs-body); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* —— 主体：左栏 + 右栏 —— */
.app-body { flex: 1 1 auto; display: flex; min-height: 0; }

/* B. 左侧项目标签栏 */
.left-rail { flex: none; width: var(--rail-width); min-width: var(--rail-min); display: flex; flex-direction: column; border-right: 1px solid var(--border-color); background: var(--bg-color); min-height: 0; }
.left-rail__head { flex: none; padding: 10px 12px; font-size: var(--fs-caption); color: var(--text-secondary); letter-spacing: .4px; border-bottom: 1px solid var(--border-color); }
.left-rail__tabs { flex: 1 1 auto; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.project-tab { display: flex; flex-direction: column; gap: 4px; min-height: var(--tap-min); padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border-color); background: var(--surface-color); cursor: pointer; text-align: left; transition: border-color .15s, box-shadow .15s, transform .1s; }
.project-tab:hover { border-color: var(--border-strong); }
.project-tab.is-active { border-color: var(--primary-color); box-shadow: var(--shadow-soft); }
.project-tab__name { font-weight: 600; display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.project-tab__meta { display: flex; align-items: center; gap: 8px; font-size: var(--fs-caption); color: var(--text-secondary); }

/* C. 右侧主操作面板 */
.right-panel { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; background: var(--bg-color); min-height: 0; }
.panel-bar { flex: none; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--border-color); background: rgba(255,255,255,0.82); backdrop-filter: blur(10px); flex-wrap: wrap; }
.module-tabs { display: flex; gap: 4px; overflow-x: auto; flex: 1 1 auto; scrollbar-width: none; }
.module-tabs::-webkit-scrollbar { display: none; }
.module-tab { min-height: 38px; padding: 0 12px; background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm); color: var(--text-secondary); cursor: pointer; white-space: nowrap; font-size: var(--fs-body); transition: color .15s, border-color .15s, background .15s; }
.module-tab:hover { color: var(--text-primary); }
.module-tab.is-active { color: var(--primary-color); border-color: var(--primary-color); background: var(--primary-soft); }
.panel-actions { display: flex; gap: 6px; flex: none; }

.panel-body { flex: 1 1 auto; overflow-y: auto; padding: 16px; min-height: 0; }
.module { display: none; }
.module.is-active { display: block; animation: mod-in .2s ease; }
@keyframes mod-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* 新闻浮层 */
.overlay-root { position: fixed; inset: 0; z-index: var(--z-overlay); pointer-events: none; display: flex; align-items: flex-start; justify-content: center; padding-top: 104px; }

/* 轻提示 */
.toast { position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 20px); background: var(--surface-2); border: 1px solid var(--border-strong); color: var(--text-primary); padding: 10px 18px; border-radius: 999px; opacity: 0; pointer-events: none; transition: .25s; z-index: 80; box-shadow: var(--shadow-card); }
.toast.is-show { opacity: 1; transform: translate(-50%, 0); }

/* =====================================================================
 * 响应式
 *  1) 横屏手机（窄）：保留三栏，收紧尺寸
 *  2) 竖屏 / 窄屏：左栏转顶部横向滚动条，控制条纵向堆叠
 * ===================================================================== */

/* 横屏小屏 */
@media (max-width: 900px) and (orientation: landscape) {
  :root { --rail-width: 26%; --rail-min: 150px; --topbar-h: 50px; }
  .topbar { gap: 10px; padding: 0 10px; }
  .topbar__metrics { gap: 10px; }
  .panel-body { padding: 12px; }
}

/* 竖屏 / 移动端优先：纵向堆叠 */
@media (orientation: portrait), (max-width: 720px) {
  .app-body { flex-direction: column; }
  /* 左栏 → 顶部横向项目标签条 */
  .left-rail { width: auto; min-width: 0; max-height: 96px; flex: none; border-right: 0; border-bottom: 1px solid var(--border-color); }
  .left-rail__tabs { flex-direction: row; overflow-x: auto; padding: 8px; }
  .project-tab { min-width: 132px; flex: none; }
  /* 控制条纵向 */
  .panel-bar { flex-direction: column; align-items: stretch; gap: 8px; }
  .panel-actions { justify-content: stretch; }
  .panel-actions .nm-btn { flex: 1 1 auto; }
  /* 模块标签换行 */
  .module-tabs { flex-wrap: wrap; overflow-x: visible; }
  .panel-body { padding: 12px; }
  .nm-grid, .nm-grid--2, .nm-grid--3 { grid-template-columns: 1fr; }
}

/* 超小竖屏：进一步收窄间距 */
@media (max-width: 380px) {
  :root { --topbar-h: 48px; --tap-min: 42px; }
  .topbar { gap: 8px; padding: 0 8px; }
  .topbar__metrics { gap: 10px; }
  .panel-body { padding: 10px; }
}