/* chank-admin-frame (wc-layout-chank-admin-frame)
   抽取自 chank.orbitx.cn 的 .app-shell 框架：236px 深藏青侧栏（#111827）+
   白色顶栏（58px，三栏：页题 / 版本横幅 / 运行状态）+ 内容视图区。
   视图区按 keep-alive 规范（AGENTS.md 第 7 节）：惰性构建、display 切换不销毁。

   ── chank 系列设计令牌（--ck-*，全系列共用；宿主在 :root 覆写即全局换肤）──
   --ck-bg-page      #eef1f5   页面底色
   --ck-surface      #fff      卡面
   --ck-border       #d8dee6   常规描边
   --ck-border-subtle#edf2f7   弱描边（表格行线）
   --ck-border-input #cbd5e1   输入描边
   --ck-text         #1f2933   正文
   --ck-heading      #111827   标题
   --ck-text-body    #334155   次级正文
   --ck-text-secondary #475569  次要文字（表头/日期行）
   --ck-text-label   #4b5563   表单标签
   --ck-text-hint    #64748b   提示/弱化（slate-500）
   --ck-text-soft    #6b7280   弱化（gray-500）
   --ck-accent       #2563eb   主蓝；--ck-accent-strong #1d4ed8
   --ck-accent-soft  #eff6ff   蓝淡染底；--ck-accent-border #bfdbfe
   --ck-info #1d4ed8 / --ck-info-soft #dbeafe
   --ck-success #15803d / --ck-success-soft #dcfce7 / --ck-success-tint #f7fef9
   --ck-warning #d97706 / --ck-warning-soft #fef3c7 / --ck-warning-tint #fffbeb
   --ck-danger-strong #dc2626 / --ck-danger #b91c1c / --ck-danger-soft #fee2e2 / --ck-danger-tint #fff7f7
   --ck-violet #6d28d9 / --ck-violet-soft #ede9fe
   --ck-neutral #475569 / --ck-neutral-soft #e2e8f0
   --ck-positive #dc2626（红涨） / --ck-negative #16a34a（绿跌）——A 股口径，源自源站
   --ck-teal #0f766e（源站 candidate-number 青）
   --ck-secondary #475569 / --ck-ghost #e5e7eb（按钮 secondary/ghost 底）
   --ck-sidebar #111827 / --ck-sidebar-text #f9fafb / --ck-sidebar-muted #9ca3af / --ck-sidebar-item #d1d5db
   --ck-radius 8px / --ck-radius-sm 6px
   --ck-mono ui-monospace 等宽栈 / --ck-font 系统字体栈
   ── 源站依赖全局 *{box-sizing:border-box} 复位；组件侧以作用域复位等价实现，零全局污染 ── */
.ckf-shell,
.ckf-shell *,
.ckf-shell *::before,
.ckf-shell *::after { box-sizing: border-box; }
.ckf-shell {
  display: grid;
  grid-template-columns: 236px 1fr;
  min-height: 100vh;
  background: var(--ck-bg-page, #eef1f5);
  color: var(--ck-text, #1f2933);
  font-family: var(--ck-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  font-size: 14px;
}

/* ── 侧栏 ── */
.ckf-sidebar {
  background: var(--ck-sidebar, #111827);
  color: var(--ck-sidebar-text, #f9fafb);
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.ckf-brand {
  padding: 10px 10px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.ckf-brand-title { font-size: 18px; font-weight: 700; }
.ckf-brand-subtitle { margin-top: 4px; color: var(--ck-sidebar-muted, #9ca3af); font-size: 12px; }
.ckf-nav-group + .ckf-nav-group { margin-top: 14px; }
.ckf-nav-group-title { color: var(--ck-sidebar-muted, #9ca3af); font-size: 12px; padding: 0 10px 6px; }
.ckf-nav-btn {
  width: 100%;
  min-height: 38px;
  border: 0;
  border-radius: var(--ck-radius-sm, 6px);
  background: transparent;
  color: var(--ck-sidebar-item, #d1d5db);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  cursor: pointer;
  text-align: left;
  font: inherit;
}
.ckf-nav-btn:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.ckf-nav-btn.ckf-active { background: var(--ck-accent, #2563eb); color: #fff; }
.ckf-nav-btn-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
}
.ckf-nav-badge {
  min-width: 22px;
  height: 22px;
  border-radius: 999px;
  padding: 0 7px;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--ck-danger-strong, #dc2626);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}
.ckf-nav-badge.ckf-show { display: inline-flex; }

/* ── 顶栏 ── */
.ckf-main { min-width: 0; display: flex; flex-direction: column; }
.ckf-topbar {
  min-height: 58px;
  background: var(--ck-surface, #fff);
  border-bottom: 1px solid var(--ck-border, #d8dee6);
  display: grid;
  grid-template-columns: minmax(160px, 1fr) auto minmax(160px, 1fr);
  align-items: center;
  gap: 16px;
  padding: 0 24px;
}
.ckf-page-title { font-size: 18px; font-weight: 650; }
.ckf-banner {
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 6px 14px;
  border: 1px solid var(--ck-accent-border, #bfdbfe);
  border-radius: var(--ck-radius, 8px);
  background: var(--ck-accent-soft, #eff6ff);
  color: #1e3a8a;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.10);
}
.ckf-banner strong { font-size: 16px; }
.ckf-banner span { color: var(--ck-info, #1d4ed8); font-size: 12px; font-weight: 650; white-space: nowrap; }
.ckf-status {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ck-text-soft, #6b7280);
  font-size: 12px;
}
.ckf-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ck-negative, #16a34a);
  display: inline-block;
}
.ckf-dot.ckf-dot-warning { background: var(--ck-warning, #d97706); }
.ckf-dot.ckf-dot-offline { background: var(--ck-danger-strong, #dc2626); }

/* ── 内容与视图（keep-alive：display 切换，组件实例永不重建） ── */
.ckf-content { padding: 22px 24px 36px; width: 100%; }
.ckf-view { display: none; min-width: 0; }
.ckf-view.ckf-view-active { display: block; }

/* ── 响应式（对齐源站 1100px / 640px 断点） ── */
@media (max-width: 1100px) {
  .ckf-shell { grid-template-columns: 1fr; }
  .ckf-sidebar { position: static; }
  .ckf-topbar {
    grid-template-columns: 1fr;
    justify-items: start;
    padding: 12px 16px;
    gap: 8px;
  }
  .ckf-banner { justify-self: stretch; justify-content: center; }
  .ckf-status { justify-self: start; }
}
@media (max-width: 640px) {
  .ckf-content { padding: 16px; }
  .ckf-topbar { padding: 0 16px; }
}