/* ==========================================================================
   home.css  |  「6」v7.0 首页工作台（P1）
   --------------------------------------------------------------------------
   首屏拒绝空洞 Hero：定位语 + 快速动作条 + 真实数据流（进行中部署/最近提交）
   + 社区精选入口。零硬编码 hex，全部 var(--*)。
   断点：>=1280 双列 7:5 + 社区横排 | 1024-1279 双列 1:1 | <1024 单列堆叠
         <768 快速动作条纵排、搜索下移
   ========================================================================== */

/* ---- 页头（定位语，非 Hero：左对齐 + 紧凑，禁居中大字口号）---- */
.wb-head { margin-bottom: var(--space-5); }
.wb-title {
  margin: 0; font-size: var(--text-2xl); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-display); color: var(--fg); line-height: var(--leading-tight);
}
.wb-sub { margin: var(--space-1) 0 0; font-size: var(--text-base); color: var(--muted); }
.wb-account { margin: var(--space-3) 0 0; font-size: var(--text-sm); color: var(--muted); }
.wb-account[hidden] { display: none; }

/* ---- 快速动作条 ---- */
.quick-actions {
  display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
  padding: var(--space-3) var(--space-4); margin-bottom: var(--space-5);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
}
.quick-actions .btn svg { width: 16px; height: 16px; }

/* ---- 双列网格（桌面 12 列 7:5）---- */
.wb-grid {
  display: grid; grid-template-columns: 7fr 5fr; gap: var(--space-5);
  margin-bottom: var(--space-5); align-items: start;
}
@media (max-width: 1279px) { .wb-grid { grid-template-columns: 1fr; } }

/* ---- 进行中部署行 ---- */
.deploy-row .data-name { display: inline-flex; align-items: center; gap: var(--space-2); }
.deploy-elapsed { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--meta); }

/* ---- 最近提交行 ---- */
.commit-sha {
  font-family: var(--font-mono); font-size: var(--text-xs); color: var(--accent-text);
  background: var(--surface-warm); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 1px 6px; flex-shrink: 0;
}
.commit-msg { font-size: var(--text-sm); color: var(--fg-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; }

/* ---- 社区精选（入口）---- */
.community-card {
  display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
}
.community-body { flex: 1; min-width: 200px; }
.community-title { margin: 0; font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--fg); display: inline-flex; align-items: center; gap: var(--space-2); }
.community-title svg { width: 20px; height: 20px; color: var(--muted); }
.community-desc { font-size: var(--text-sm); color: var(--muted); margin-top: var(--space-1); }

/* ---- 区块骨架（Loading 三行 shimmer）---- */
.wb-skel { padding: var(--space-1) 0; }

/* ---- 既有工具区（粘贴/文件/短链，防功能回归）---- */
.tools-section { margin-top: var(--space-8); }
.tools-section > .panel-title { margin-bottom: var(--space-3); }
.tools-section .card { margin-bottom: 0; }
.tools-note { font-size: var(--text-xs); color: var(--meta); margin: var(--space-3) 0 0; }

/* ---- <768：快速动作条纵排满宽、搜索下移 ---- */
@media (max-width: 767px) {
  .quick-actions { flex-direction: column; align-items: stretch; }
  .quick-actions .btn { width: 100%; }
  .wb-title { font-size: var(--text-xl); }
  .community-card { flex-direction: column; align-items: stretch; }
}

/* ==========================================================================
   首次登录引导（PAGE-PROMPTS P5，居中容器 max-width 720px）
   ========================================================================== */
.onb { max-width: 720px; margin: 0 auto; padding: var(--section-y-desktop) 0; text-align: center; }
.onb-hero { margin-bottom: var(--space-8); }
.onb-title {
  margin: 0; font-size: var(--text-3xl); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-display); color: var(--fg); line-height: var(--leading-tight);
}
.onb-sub { margin: var(--space-2) 0 0; font-size: var(--text-base); color: var(--muted); }
.onb-starts {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin-bottom: var(--space-8);
}
.onb-start {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2); text-align: center;
  padding: var(--space-5); background: var(--surface); color: var(--fg-2);
  border: 1px solid var(--border); border-radius: var(--radius-md); cursor: pointer; min-width: 0;
  transition: border-color var(--duration-base) var(--ease-standard), background-color var(--duration-base) var(--ease-standard);
}
.onb-start:hover { border-color: var(--accent); background: var(--surface-warm); color: var(--fg); }
.onb-start svg { width: 24px; height: 24px; color: var(--accent-text); }
.onb-start-title { font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--fg); }
.onb-start-desc { font-size: var(--text-xs); color: var(--muted); }
.onb-templates[hidden] { display: none; }
.onb-tpl-title { margin: 0 0 var(--space-4); font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--fg); }
.onb-tpl-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); margin-bottom: var(--space-4); }
.onb-tpl {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-1); text-align: center;
  padding: var(--space-4) var(--space-2); background: var(--surface); color: var(--fg-2);
  border: 1px solid var(--border); border-radius: var(--radius-md); cursor: pointer; min-width: 0;
  transition: border-color var(--duration-base) var(--ease-standard), background-color var(--duration-base) var(--ease-standard);
}
.onb-tpl:hover { border-color: var(--accent); background: var(--surface-warm); color: var(--fg); }
.onb-tpl svg { width: 24px; height: 24px; color: var(--accent-text); }
.onb-tpl span { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--fg); }
.onb-tpl small { font-size: var(--text-2xs); color: var(--muted); }
.onb-back { margin-bottom: var(--space-4); }
.onb-skip {
  display: inline-block; margin-top: var(--space-4); font-size: var(--text-sm);
  color: var(--muted); text-decoration: none;
}
.onb-skip:hover { color: var(--fg-2); text-decoration: underline; }
/* 焦点环（选择卡 / 模板卡）*/
.onb-start:focus-visible, .onb-tpl:focus-visible, .onb-skip:focus-visible {
  outline: none; box-shadow: 0 0 0 3px var(--focus-ring);
}
@media (max-width: 767px) {
  .onb-starts { grid-template-columns: 1fr; }
  .onb-tpl-grid { grid-template-columns: repeat(2, 1fr); }
  .onb-title { font-size: var(--text-2xl); }
  .onb-skip { margin-top: var(--space-6); }
}