/* 视频号工具台 · 设计 token 与基础组件
 * 依据：HANDOFF-前端落地.md 第 3 节（颜色/字号/圆角/间距）
 * 布局实测（对设计稿像素扫描）：侧栏 232pt、内容区 1140pt、三列卡片、工作台右侧历史面板 300pt。
 *
 * 一条硬性修正：设计稿里「资产卡 372pt / 方向卡 370pt」两个尺寸并存，
 * 导致列表页与详情页的列边界差约 4pt（跨页面切换能看到错位）。
 * 这里统一用 grid 等分（repeat(3, 1fr) + gap 20px），任何页面列边界都一致。
 */

:root {
  /* 主色 */
  --brand: #07C160;
  --brand-strong: #05A050;
  --brand-soft: #E8F8EF;
  /* 中性 */
  --bg-app: #F6F7F9;
  --surface: #FFFFFF;
  --border: #E8EDF2;
  --fact-bg: #F7F9FA;
  --chip-bg: #F2F4F6;
  /* 文字 */
  --text-title: #16181C;
  --text-body: #5F6672;
  --text-muted: #9AA1AC;
  /* 状态 */
  --success-bg: #E8F8EF; --success-fg: #05A050;
  --warning-bg: #FFF4E5; --warning-fg: #B26A00;
  --danger-bg: #FDECEC;  --danger-fg: #D93025;
  --danger-bg-2: #FFF6F5;
  /* 尺寸 */
  --sidebar-w: 232px;
  --radius-card: 14px;
  --radius-pill: 6px;
  --radius-input: 10px;
  --radius-nav: 8px;
  --gap-grid: 20px;
  --pad-page: 28px;
  --shadow-none: none;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; height: 100%;
  background: var(--bg-app);
  color: var(--text-body);
  font-family: "Noto Sans SC", -apple-system, BlinkMacSystemFont, "PingFang SC",
    "Microsoft YaHei", "Hiragino Sans GB", "Source Han Sans SC", sans-serif;
  font-size: 14px;
  line-height: 20px;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #DDE2E8; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #C8D0D9; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- 壳层 ----------
 * 侧边栏由 shell.js 注入到 body 首位，所以 body 本身是横向 flex 容器；
 * .app-shell 承接侧栏右侧的全部内容（各页面自己决定内部再怎么分栏）。 */
body.has-shell { display: flex; height: 100vh; overflow: hidden; }
.app-shell { flex: 1; min-width: 0; display: flex; overflow: hidden; }

.sidebar {
  width: var(--sidebar-w); flex: 0 0 var(--sidebar-w);
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  padding: 18px 12px 12px;
}

.brand { display: flex; align-items: center; gap: 10px; padding: 0 8px 18px; }
.brand-mark {
  width: 28px; height: 28px; border-radius: 8px;
  background: var(--brand); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 600; letter-spacing: -0.5px;
}
.brand-text { font-size: 15px; font-weight: 600; color: var(--text-title); }

.nav { flex: 1; overflow-y: auto; }
.nav-group { margin-bottom: 4px; }
.nav-item {
  display: flex; align-items: center; gap: 10px;
  height: 38px; padding: 0 10px; margin-bottom: 2px;
  border-radius: var(--radius-nav);
  color: var(--text-body); font-size: 14px; font-weight: 500;
  transition: background .15s, color .15s;
}
.nav-item:hover { background: var(--chip-bg); }
.nav-item.active { background: var(--brand-soft); color: var(--brand-strong); font-weight: 600; }
.nav-item .ico { width: 18px; height: 18px; flex: 0 0 18px; opacity: .9; }
.nav-item.active .ico { opacity: 1; }
.nav-sub { padding-left: 38px; height: 32px; font-size: 13px; }
.nav-badge {
  margin-left: auto; font-size: 11px; color: var(--text-muted);
  background: var(--chip-bg); border-radius: var(--radius-pill); padding: 1px 6px;
}

.sidebar-foot { border-top: 1px solid var(--border); padding-top: 10px; }
.user-chip {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: var(--radius-nav);
}
.user-avatar {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--brand-soft); color: var(--brand-strong);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600; flex: 0 0 26px;
}
.user-meta { min-width: 0; flex: 1; }
.user-name { font-size: 13px; font-weight: 600; color: var(--text-title); }
.user-role { font-size: 11px; color: var(--text-muted); }
.link-out {
  font-size: 12px; color: var(--text-muted); background: none; border: 0; padding: 4px;
}
.link-out:hover { color: var(--danger-fg); }

/* ---------- 主区 ---------- */
.main { flex: 1; min-width: 0; overflow-y: auto; background: var(--bg-app); }
.page { padding: var(--pad-page); max-width: 1440px; margin: 0 auto; }
.page-head { display: flex; align-items: flex-end; gap: 12px; margin-bottom: 20px; }
.page-title { font-size: 21px; font-weight: 600; color: var(--text-title); line-height: 28px; }
.page-sub { font-size: 13px; color: var(--text-muted); margin-top: 2px; }
.page-actions { margin-left: auto; display: flex; gap: 8px; }

/* ---------- 卡片 / 网格 ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
}
.card-pad { padding: 18px 20px; }

/* 三列等分：不用设计稿的固定 372/370，避免列表页与详情页列边界错位 */
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-grid); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-grid); }
@media (max-width: 1280px) { .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1024px) { .grid-3, .grid-2 { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 标签 / 徽章 ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 4px;
  height: 22px; padding: 0 8px; border-radius: var(--radius-pill);
  background: var(--chip-bg); color: var(--text-body);
  font-size: 12px; font-weight: 500; white-space: nowrap;
}
.chip-brand { background: var(--brand-soft); color: var(--brand-strong); }
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px; border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 600;
}
.badge-success { background: var(--success-bg); color: var(--success-fg); }
.badge-warning { background: var(--warning-bg); color: var(--warning-fg); }
.badge-danger  { background: var(--danger-bg);  color: var(--danger-fg); }
.badge-muted   { background: var(--chip-bg);    color: var(--text-muted); }

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 34px; padding: 0 14px; border-radius: var(--radius-input);
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text-title); font-size: 13px; font-weight: 500;
  transition: background .15s, border-color .15s, color .15s;
}
.btn:hover { background: #FAFBFC; border-color: #D8DFE6; }
.btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-strong); border-color: var(--brand-strong); }
.btn-ghost { border-color: transparent; background: transparent; color: var(--text-body); }
.btn-ghost:hover { background: var(--chip-bg); border-color: transparent; }
.btn-sm { height: 28px; padding: 0 10px; font-size: 12px; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-saved { background: var(--chip-bg); color: var(--text-muted); border-color: transparent; }

/* ---------- 输入 ---------- */
.input, .textarea, .select {
  width: 100%; border: 1px solid var(--border); border-radius: var(--radius-input);
  background: var(--surface); color: var(--text-title);
  font-size: 14px; padding: 8px 12px; outline: none;
  font-family: inherit;
}
.input:focus, .textarea:focus, .select:focus { border-color: var(--brand); }
.textarea { resize: vertical; min-height: 72px; line-height: 22px; }

/* ---------- 通用小块 ---------- */
.meta { font-size: 12px; color: var(--text-muted); }
.strong { color: var(--text-title); font-weight: 600; }
.section-title { font-size: 16px; font-weight: 600; color: var(--text-title); margin: 22px 0 12px; }
.divider { height: 1px; background: var(--border); margin: 16px 0; }
.empty {
  padding: 48px 20px; text-align: center; color: var(--text-muted); font-size: 13px;
}
.empty-ico { font-size: 28px; opacity: .35; margin-bottom: 8px; }
.skeleton {
  background: linear-gradient(90deg, #EEF1F4 25%, #F6F8FA 37%, #EEF1F4 63%);
  background-size: 400% 100%; animation: shimmer 1.3s ease infinite;
  border-radius: 8px;
}
@keyframes shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* 折叠行 */
.fold-head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; cursor: pointer; user-select: none;
}
.fold-head:hover { background: #FAFBFC; }
.fold-arrow { transition: transform .18s; color: var(--text-muted); flex: 0 0 16px; }
.fold.open .fold-arrow { transform: rotate(180deg); }
.fold-body { display: none; padding: 0 16px 16px; }
.fold.open .fold-body { display: block; }

/* 提示词框 */
.prompt-box {
  background: var(--fact-bg); border: 1px solid var(--border);
  border-radius: 10px; padding: 12px 14px;
  font-size: 13px; line-height: 20px; color: var(--text-body);
  white-space: pre-wrap; word-break: break-word;
}
.prompt-box-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.prompt-box-bar .label { font-size: 12px; color: var(--text-muted); }

/* 事实层 / 推断层：拆解可信度的关键区分，不能合并 */
.layer-fact { background: var(--fact-bg); border-radius: 10px; padding: 12px 14px; }
.layer-infer { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; }
.layer-tag { font-size: 11px; font-weight: 600; letter-spacing: .5px; margin-bottom: 8px; }
.layer-fact .layer-tag { color: var(--text-muted); }
.layer-infer .layer-tag { color: var(--brand-strong); }
.field { display: flex; gap: 10px; margin-bottom: 8px; }
.field:last-child { margin-bottom: 0; }
.field-k { flex: 0 0 44px; font-size: 12px; color: var(--text-muted); }
.field-v { flex: 1; font-size: 13px; color: var(--text-title); line-height: 20px; }

/* 提示条 */
.toast {
  position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%) translateY(8px);
  background: var(--text-title); color: #fff; font-size: 13px;
  padding: 9px 16px; border-radius: 8px; z-index: 999;
  opacity: 0; transition: opacity .18s, transform .18s; pointer-events: none;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }