/* App Hub panel styles: legacy system (pre-2026-11-11) + hub-ui chassis.
   Pico.css v2.1.1 classless is vendored separately as pico.min.css;
   its global element rules are neutralized at the end of this file. */
:root {
  --bg: #f4f6f9;
  --surface: #ffffff;
  --border: #dfe4ec;
  --text: #1c2430;
  --muted: #5e6b7c;
  --primary: #1a66e5;
  --primary-hover: #1350b8;
  --success: #16803c;
  --success-bg: #e7f6ec;
  --warning: #b45309;
  --warning-bg: #fef3c7;
  --danger: #c81e1e;
  --danger-bg: #fde8e8;
  --code-bg: #161b22;
  --code-text: #e6edf3;
  --radius: 8px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  font-size: 14px;
}

a {
  color: var(--primary);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

.topbar {
  background: #111827;
  color: #fff;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  min-height: 54px;
}

.brand {
  font-weight: 700;
  font-size: 16px;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
}

.nav-links {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

.nav-links a {
  color: #d1d5db;
  padding: 8px 12px;
  border-radius: 6px;
  font-weight: 500;
  text-decoration: none;
}

.nav-links a:hover,
.nav-links a.active {
  background: #1f2937;
  color: #fff;
}

.container {
  /* UI batch 2 (2026-11-11): tool-UI measure narrowed 1180px -> 68rem
     (aligns with the hub-ui showcase width ~1060px; wide tables keep
     their .table-wrap horizontal scroll, long text keeps its own
     narrower reading column). */
  max-width: 68rem;
  margin: 20px auto;
  padding: 0 16px 40px;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 18px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

.card-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 18px;
}

.metric-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 15px;
}

.metric-label {
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.metric-value {
  font-size: 22px;
  font-weight: 700;
  margin: 6px 0 4px;
}

.progress-bar {
  height: 7px;
  background: #e5e7eb;
  border-radius: 4px;
  overflow: hidden;
  margin: 6px 0;
}
.progress-fill {
  height: 100%;
  background: var(--primary);
}
.progress-fill.warn {
  background: var(--warning);
}
.progress-fill.danger {
  background: var(--danger);
}

.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}
.badge-running, .badge-ready, .badge-success, .badge-synced {
  background: var(--success-bg);
  color: var(--success);
}
.badge-stopped, .badge-untracked {
  background: #f3f4f6;
  color: #4b5563;
}
.badge-warning, .badge-modified, .badge-queued {
  background: var(--warning-bg);
  color: var(--warning);
}
.badge-error, .badge-failed, .badge-conflict, .badge-timeout {
  background: var(--danger-bg);
  color: var(--danger);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  background: var(--primary);
  color: #fff;
}
.btn:hover {
  background: var(--primary-hover);
  text-decoration: none;
}
.btn-sm {
  padding: 4px 10px;
  font-size: 12px;
}
.btn-outline {
  background: #fff;
  border-color: var(--border);
  color: var(--text);
}
.btn-outline:hover {
  background: #f9fafb;
}
.btn-success {
  background: var(--success);
  color: #fff;
}
.btn-danger {
  background: var(--danger);
  color: #fff;
}

.form-group {
  margin-bottom: 12px;
}
.form-group label {
  display: block;
  font-weight: 600;
  margin-bottom: 4px;
  font-size: 13px;
}
.form-control {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
}
textarea.code-editor {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 13px;
  background: var(--code-bg);
  color: var(--code-text);
  line-height: 1.45;
  padding: 12px;
  border-radius: 6px;
  width: 100%;
  min-height: 260px;
  resize: vertical;
}

pre.log-viewer {
  background: var(--code-bg);
  color: var(--code-text);
  padding: 12px;
  border-radius: 6px;
  font-size: 12px;
  overflow-x: auto;
  max-height: 380px;
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
}

.table-wrap {
  overflow-x: auto;
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
th, td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
th {
  background: #f9fafb;
  color: var(--muted);
  font-weight: 600;
}

.alert {
  padding: 10px 14px;
  border-radius: 6px;
  margin-bottom: 14px;
  font-weight: 500;
}
.alert-success {
  background: var(--success-bg);
  color: var(--success);
  border: 1px solid #bbf7d0;
}
.alert-error {
  background: var(--danger-bg);
  color: var(--danger);
  border: 1px solid #fecaca;
}
.alert-warning {
  background: var(--warning-bg);
  color: var(--warning);
  border: 1px solid #fde68a;
}

.inline-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

@media (max-width: 640px) {
  .topbar {
    padding: 8px 12px;
  }
  .grid-2 {
    grid-template-columns: 1fr;
  }
}

/* hub-ui.css — App Hub 薄组件层（样板 D1，v2 2026-11-11 按用户反馈收敛）
   底盘：Pico.css v2.1.1 classless（vendored）。本文件补 Pico 不管的：
   深色顶栏、目录、长节折叠、正文可读列宽与长行、可读层级（摘要/主次/元信息）。
   v2 变更（用户 2026-11-11：按钮文字过大；地图文字平行无层级、又臭又长）：
   - 锁定根字号 100%：Pico 默认随视口升到 131%，是全站偏大的总根源；
   - 按钮与标题梯度收敛到工具型界面的克制尺寸（按钮 0.875rem）；
   - 新增层级呈现：节摘要 .hub-sec-sum、长条目首句 .hub-item-head + 展开 .hub-more、
     历史折叠 .hub-hist、元信息小字 .hub-meta。
   v3（同日续裁「细分条例也需要分层、类似提前分类」）：节内小组标题 .hub-group
   （md 里的 h3）以低于节标题一级的视觉层呈现：小字重 + 左侧细竖线 + 上方留白，
   组内条目靠留白分团、扫读时先见组名再见条。分组是写作时的预先分类
   （见 README「地图写作规矩草案」），渲染层只认 h3 结构。 */

:root {
  --pico-font-size: 100%; /* 锁死：覆盖 Pico 的视口放大（106%~131%） */
  --hub-ink: #101828;
  --hub-accent: #f5b301;
  --hub-border: #d9dee6;
  --hub-muted: #667085;
  --hub-aside-w: 17rem;
  --hub-read-w: 46rem; /* 约 72 汉字宽的可读行宽上限 */
}

/* ---------- 按钮收敛（Pico 默认 1rem 字号 + 0.75/1rem 内边距，桌面根字号下约 28px 字，偏大） ---------- */
button, [type="submit"], [type="button"], [type="reset"], [role="button"],
details summary[role="button"] {
  font-size: 0.875rem;
  line-height: 1.35;
  padding: 0.375rem 0.75rem;
  --pico-form-element-spacing-vertical: 0.375rem;
  --pico-form-element-spacing-horizontal: 0.75rem;
}
input, select, textarea { font-size: 0.9375rem; }

/* ---------- 标题梯度收敛（三级分明即可，不做营销页大字） ---------- */
h1 { font-size: 1.625rem; --pico-font-size: 1.625rem; }
h2 { font-size: 1.3rem;   --pico-font-size: 1.3rem; }
h3 { font-size: 1.1rem;   --pico-font-size: 1.1rem; }
h4 { font-size: 1rem;     --pico-font-size: 1rem; }

/* ---------- 深色顶栏（保留原站身份感：深底 + ★） ---------- */
.hub-top {
  background: var(--hub-ink);
  color: #f2f4f7;
  position: sticky;
  top: 0;
  z-index: 20;
}
.hub-top-in {
  max-width: 76rem;
  margin: 0 auto;
  padding: 0.55rem 1rem;
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  flex-wrap: wrap;
}
.hub-brand { font-weight: 700; letter-spacing: 0.01em; }
.hub-star { color: var(--hub-accent); }
.hub-crumb { color: #cbd2dc; font-size: 0.875rem; }
.hub-badge {
  margin-left: auto;
  font-size: 0.75rem;
  color: var(--hub-ink);
  background: var(--hub-accent);
  border-radius: 999px;
  padding: 0.1rem 0.6rem;
  font-weight: 600;
}

/* ---------- 布局：大屏侧栏目录 + 窄正文；小屏单列 ---------- */
.hub-layout {
  max-width: 76rem;
  margin: 0 auto;
  padding: 1rem;
  display: grid;
  grid-template-columns: var(--hub-aside-w) minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
}
.hub-main { max-width: var(--hub-read-w); min-width: 0; }
@media (max-width: 1023px) {
  .hub-layout { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 目录 ---------- */
.toc-side {
  position: sticky;
  top: 3.6rem;
  max-height: calc(100vh - 4.5rem);
  overflow: auto;
  font-size: 0.9rem;
}
.toc ul { list-style: none; padding-left: 0; margin: 0; }
.toc li { margin: 0.18rem 0; }
.toc li.toc-sub { padding-left: 1rem; font-size: 0.85rem; }
.toc a { text-decoration: none; color: inherit; display: block; padding: 0.14rem 0.4rem; border-radius: 0.375rem; }
.toc a:hover { background: #eef1f5; }
.toc-title { font-weight: 700; margin: 0 0 0.4rem; }
.toc-foot { font-size: 0.8125rem; color: var(--hub-muted); margin-top: 0.8rem; }
.toc-mobile { display: none; }
@media (max-width: 1023px) {
  .toc-side { display: none; }
  .toc-mobile {
    display: block;
    max-width: 76rem;
    margin: 0.6rem auto 0;
    padding: 0 1rem;
  }
  .toc-mobile > summary { font-weight: 700; cursor: pointer; padding: 0.4rem 0; }
}

/* ---------- 长节折叠：h2 在 summary 内常驻可见，锚点永远可达 ---------- */
details.hub-sec {
  border-top: 1px solid var(--hub-border);
  padding: 0.4rem 0 0.8rem;
  margin-top: 0.6rem;
}
details.hub-sec > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
details.hub-sec > summary::-webkit-details-marker { display: none; }
details.hub-sec > summary::before {
  content: "▸";
  color: var(--hub-muted);
  transition: transform 0.15s ease;
  flex: none;
}
details.hub-sec[open] > summary::before { transform: rotate(90deg); }
details.hub-sec > summary h2 { margin: 0.35rem 0; font-size: 1.3rem; }
.hub-main h1, .hub-main h2, .hub-main h3, .hub-main h4 { scroll-margin-top: 4.2rem; }

/* ---------- 层级呈现（v2 新增）：摘要 / 首句 / 全文 / 历史 / 元信息 ---------- */
.hub-sec-sum {
  color: var(--hub-muted);
  font-size: 0.9375rem;
  line-height: 1.55;
  border-left: 3px solid var(--hub-accent);
  padding-left: 0.7rem;
  margin: 0.2rem 0 0.7rem;
}
.hub-main li { overflow-wrap: break-word; margin: 0.3rem 0; }
.hub-item-head { }
details.hub-more { display: inline; }
details.hub-more > summary {
  display: inline;
  cursor: pointer;
  color: #175cd3;
  font-size: 0.8125rem;
  margin-left: 0.45rem;
  list-style: none;
  white-space: nowrap;
}
details.hub-more > summary::-webkit-details-marker { display: none; }
details.hub-more[open] > summary { display: none; }
.hub-more-body { display: block; margin-top: 0.25rem; }
details.hub-hist {
  margin: 0.7rem 0 0.3rem;
  border: 1px dashed var(--hub-border);
  border-radius: 0.5rem;
  padding: 0.35rem 0.8rem 0.5rem;
  background: #fafbfc;
}
details.hub-hist > summary {
  cursor: pointer;
  color: var(--hub-muted);
  font-size: 0.8125rem;
  font-weight: 600;
  list-style: none;
}
details.hub-hist > summary::-webkit-details-marker { display: none; }
details.hub-hist > summary::before { content: "▸ "; }
details.hub-hist[open] > summary::before { content: "▾ "; }
details.hub-hist li { color: #475467; font-size: 0.9375rem; }
.hub-meta { color: var(--hub-muted); font-size: 0.8125em; }

/* ---------- 节内小组（v3）：h3 组标题，视觉低于节标题一级 ---------- */
.hub-main h3.hub-group {
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--hub-ink);
  border-left: 3px solid var(--hub-border);
  padding-left: 0.55rem;
  margin: 1.1rem 0 0.35rem;
  line-height: 1.4;
}
.hub-main h3.hub-group:first-of-type { margin-top: 0.55rem; }
.hub-main h3.hub-group + ul,
.hub-main h3.hub-group + ol { margin-top: 0.15rem; }

/* ---------- 长行 / 不可断字符串处理 ---------- */
.hub-main p { overflow-wrap: break-word; }
.hub-main code { overflow-wrap: anywhere; font-size: 0.86em; }
.hub-main pre { overflow-x: auto; }
.hub-main pre code { overflow-wrap: normal; }

/* ---------- 表格：横滚包裹，不撑破列宽 ---------- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0.8rem 0; }
.table-scroll table { min-width: 34rem; margin: 0; font-size: 0.9375rem; }

/* ---------- 回顶部 / 说明 ---------- */
.to-top {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--hub-ink);
  color: #fff;
  text-align: center;
  line-height: 2.25rem;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(16, 24, 40, 0.35);
  z-index: 30;
}
.hub-note {
  color: var(--hub-muted);
  font-size: 0.8125rem;
  border-top: 1px dashed var(--hub-border);
  padding-top: 0.8rem;
  margin-top: 2rem;
}

/* ---- batch 1 additions (design-logic doc 2026-11-11) ---- */
.hub-meta { font-size: 0.8125rem; color: var(--hub-muted); }
.hub-details > summary { cursor: pointer; font-size: 0.8125rem; color: var(--hub-muted); padding: 0.15rem 0; }
.hub-details { margin-top: 0.35rem; }
.hub-filterbar { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0 0 0.75rem; }
.hub-filterbar input[type="search"], .hub-filterbar select { margin: 0; width: auto; }
.hub-filterbar input[type="search"] { min-width: 12rem; flex: 1 1 12rem; }
.hub-errline { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; font-size: 0.8125rem; color: var(--danger); }
.hub-jumpbar { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 0.75rem; }
.hub-jumpbar a { font-size: 0.8125rem; border: 1px solid var(--border); border-radius: 999px; padding: 0.1rem 0.6rem; text-decoration: none; color: inherit; }
.hub-empty { padding: 0.75rem 0.25rem; color: var(--hub-muted); font-size: 0.875rem; }
.hub-empty strong { color: inherit; }
.hub-cols { columns: 2; column-gap: 2rem; }
@media (max-width: 640px) { .hub-cols { columns: 1; } .hub-filterbar input[type="search"] { min-width: 0; } }

/* ---- Pico neutralization (LAST: wins over both legacy and Pico) ----
   Panel templates style everything via .btn/.form-control/.card classes and
   would be mangled by Pico's global button/input/table rules. Pico stays
   vendored for the token scale and future classless-ready pages; here its
   element-level side effects are rolled back to the legacy baseline. */
button, [type="submit"], [type="button"], [type="reset"] { padding: 0; font-size: inherit; line-height: inherit; background-color: transparent; border: none; border-radius: 0; color: inherit; width: auto; margin-bottom: 0; }
button.btn, [type="submit"].btn, [type="button"].btn { padding: 8px 16px; font-size: 14px; line-height: 1.5; border-radius: var(--radius); border: 1px solid transparent; background-color: var(--primary); color: #fff; font-weight: 500; }
button.btn-outline, [type="submit"].btn-outline { background-color: transparent; color: var(--text); border-color: var(--border); }
button.btn-success, [type="submit"].btn-success { background-color: var(--success); border-color: var(--success); }
button.btn-danger, [type="submit"].btn-danger { background-color: transparent; color: var(--danger); border-color: var(--danger); }
button.btn-sm, [type="submit"].btn-sm { padding: 4px 10px; font-size: 13px; }
input:not([type="checkbox"]):not([type="radio"]), select, textarea { width: auto; margin-bottom: 0; padding: 0; background-color: transparent; border: none; border-radius: 0; font-size: inherit; color: inherit; height: auto; }
input.form-control, select.form-control, textarea.form-control { width: 100%; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius); background-color: var(--bg); font-size: 14px; margin-bottom: 0; color: var(--text); }
input[type="checkbox"], input[type="radio"] { width: auto; margin: 0 4px 0 0; padding: 0; }
table { border-collapse: collapse; }
th, td { padding: 10px 12px; border-bottom: 1px solid var(--border); background-color: transparent; text-align: left; }
details summary { list-style: revert; }
ul, ol { padding-left: 0; }
li { margin-bottom: 0; }
pre code { background-color: transparent; padding: 0; }
code { background-color: rgba(127,127,127,0.12); }
a { text-decoration: revert; color: revert; }
nav a { text-decoration: none; color: inherit; }
h1, h2, h3, h4 { margin: revert; line-height: 1.3; }
.card h2, .card h3 { margin-top: 0; }