/**
 * Seango L0 设计令牌 + 旧项目 Element 映射。
 * 新项目：由 zhongshu-console.css 前置拼接。
 * 旧项目：单独引入本文件，不要拉整个 zhongshu-hub。
 */
:root {
  --ink: #18181b;
  --muted: #71717a;
  --line: #e4e4e7;
  --soft: #f4f4f5;
  --shell-canvas: var(--soft);
  --panel: #ffffff;
  --brand: #2563eb;
  --brand-dark: #1d4ed8;
  --brand-soft: #eff6ff;
  --sidebar-bg: #ffffff;
  --sidebar-accent: #f4f4f5;
  --sidebar-foreground: #18181b;
  --sidebar-primary: #18181b;
  --sidebar-primary-foreground: #fafafa;
  --green: #16875d;
  --green-soft: #e9f8f1;
  --orange: #bd650b;
  --orange-soft: #fff5e8;
  --red: #bd2f36;
  --red-soft: #fff0f1;
  --violet: #7250c9;
  --shadow: 0 1px 3px rgba(15, 23, 42, .10), 0 1px 2px -1px rgba(15, 23, 42, .10);
  --shadow-hover: 0 4px 12px rgba(15, 23, 42, .10);
  --radius: 10px;
  --background: var(--panel);
  --foreground: var(--ink);
  --card: var(--panel);
  --card-foreground: var(--ink);
  --popover: var(--panel);
  --popover-foreground: var(--ink);
  --primary: var(--brand);
  --primary-foreground: #fff;
  --secondary: #f4f4f5;
  --secondary-foreground: var(--ink);
  --accent: var(--sidebar-accent);
  --accent-foreground: var(--ink);
  --destructive: var(--red);
  --destructive-foreground: #fff;
  --muted-foreground: var(--muted);
  --border: var(--line);
  --input: #d4d4d8;
  --ring: #6366f1;
  --chart-1: #2563eb;
  --chart-2: #0d9488;
  --chart-3: #7c3aed;
  --chart-4: #ea580c;
  --chart-5: #db2777;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: var(--radius);
  --radius-xl: 14px;
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, .04);
  --shadow-sm: 0 2px 8px 0 rgba(15, 23, 42, 0.114);
  --shadow-md: 0 4px 16px rgba(15, 23, 42, .10);
  --shadow-lg: 0 10px 30px rgba(15, 23, 42, .12);
  --shadow-inset-left: 0 0 0 transparent;
  --shadow-inset-panel: var(--shadow-inset-left), var(--shadow-sm);
  --sidebar-inset-gap: 0;
  --sg-font-table-head: 600 12px/1.4 ui-sans-serif, system-ui, sans-serif;
  --sg-font-table-body: 400 13px/1.5 ui-sans-serif, system-ui, sans-serif;
  --sg-font-table-primary: 500 13px/1.5 ui-sans-serif, system-ui, sans-serif;
  /* 吨吨钢 --zs-* 过渡别名，源是 --brand */
  --zs-color-primary: var(--brand);
  --zs-color-primary-hover: var(--brand-dark);
  --zs-color-primary-active: var(--brand-dark);
  --zs-color-primary-soft: var(--brand-soft);
  --zs-color-danger: var(--red);
  --zs-color-bg-page: var(--soft);
  --zs-color-bg-card: var(--panel);
  --zs-color-text-title: var(--ink);
  --zs-color-text-main: var(--muted);
  --zs-color-border-subtle: var(--line);
  --zs-radius-card: var(--radius);
  --zs-radius-component: var(--radius-md);
  --zs-radius-small: var(--radius-sm);
  font-family: Inter, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", ui-sans-serif, system-ui, sans-serif;
  color: var(--ink);
  background: var(--soft);
}

.theme-dark {
  --ink: #e2e8f0;
  --muted: #94a3b8;
  --line: #263449;
  --soft: #0f172a;
  --panel: #111c2f;
  --brand: #60a5fa;
  --brand-dark: #93c5fd;
  --brand-soft: #172554;
  --sidebar-bg: #0f172a;
  --sidebar-accent: #1e293b;
  --sidebar-foreground: #f8fafc;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 10px 24px rgba(0,0,0,.16);
  --background: #111c2f;
  --foreground: #f8fafc;
  --card: #111c2f;
  --card-foreground: #f8fafc;
  --popover: #111c2f;
  --popover-foreground: #f8fafc;
  --secondary: #172033;
  --secondary-foreground: #f8fafc;
  --accent: #172033;
  --accent-foreground: #f8fafc;
  --border: #334155;
  --input: #334155;
  --muted-foreground: #94a3b8;
}

/* L1 语义类：旧项目可包一层，不必改 DOM */
.sg-page-head { margin: 0 0 12px; }
.sg-page-head h1 { margin: 0; font-size: 16px; font-weight: 600; color: var(--foreground); }
.sg-table-wrap { overflow: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); }
.sg-list-table { width: 100%; border-collapse: collapse; }
.sg-list-table th { font: var(--sg-font-table-head); color: var(--foreground); text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); background: var(--soft); }
.sg-list-table td { font: var(--sg-font-table-body); color: var(--muted-foreground); padding: 10px 12px; border-bottom: 1px solid var(--border); }
.sg-list-table td.sg-primary-cell, .sg-list-table .primary-cell { font: var(--sg-font-table-primary); color: var(--foreground); }
.sg-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; border: 1px solid var(--border); }
.sg-button { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--card); color: var(--foreground); font-size: 13px; cursor: pointer; }
.sg-button-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.sg-empty { padding: 32px 16px; text-align: center; color: var(--muted); font-size: 13px; }

.sg-date-range { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sg-date-range input[type="date"] { height: 32px; padding: 0 8px; border: 1px solid var(--input); border-radius: var(--radius-sm); background: var(--card); color: var(--foreground); }
.sg-toast-stack { position: fixed; z-index: 80; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; max-width: 360px; }
.sg-toast { padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--card); color: var(--foreground); font-size: 13px; box-shadow: var(--shadow-sm); }
.sg-toast-success { border-color: var(--green); background: var(--green-soft); }
.sg-toast-danger { border-color: var(--red); background: var(--red-soft); }
.sg-host-upload { display: grid; gap: 8px; }
.sg-host-upload-preview img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--border); }
.sg-tree { list-style: none; margin: 0; padding: 0; }
.sg-tree ul { list-style: none; margin: 4px 0 0; padding-left: 16px; border-left: 1px solid var(--border); }
.sg-tree-label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--foreground); }
.sg-transfer-panes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sg-transfer-pane { border: 1px solid var(--border); border-radius: var(--radius); padding: 10px; min-height: 120px; background: var(--card); }
.sg-transfer-title { margin: 0 0 8px; font-size: 12px; font-weight: 600; color: var(--foreground); }
.sg-transfer-row { display: flex; align-items: center; gap: 6px; font-size: 13px; margin: 0 0 6px; color: var(--foreground); }
.sg-stepper-list { display: flex; flex-wrap: wrap; gap: 12px; list-style: none; margin: 0 0 12px; padding: 0; }
.sg-stepper-item { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; }
.sg-stepper-index { width: 22px; height: 22px; border-radius: 999px; display: grid; place-items: center; border: 1px solid var(--border); font-size: 11px; font-weight: 600; }
.sg-stepper-item.is-current { color: var(--foreground); font-weight: 600; }
.sg-stepper-item.is-current .sg-stepper-index, .sg-stepper-item.is-done .sg-stepper-index { background: var(--brand); border-color: var(--brand); color: #fff; }
.sg-stepper-item.is-done { color: var(--foreground); }
.sg-stepper-body { padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); font-size: 13px; }
.sg-rich-text .textarea { min-height: 8rem; }

/* Element Plus 改肤：只改外观变量与表头密度 */
html.seango-theme, .seango-theme {
  --el-color-primary: var(--brand);
  --el-color-primary-light-3: color-mix(in srgb, var(--brand) 70%, #fff);
  --el-color-primary-light-5: color-mix(in srgb, var(--brand) 50%, #fff);
  --el-color-primary-light-7: var(--brand-soft);
  --el-color-primary-light-9: var(--brand-soft);
  --el-color-primary-dark-2: var(--brand-dark);
  --el-color-danger: var(--red);
  --el-color-success: var(--green);
  --el-color-warning: var(--orange);
  --el-border-radius-base: var(--radius-sm);
  --el-font-size-base: 13px;
  --el-text-color-primary: var(--foreground);
  --el-text-color-regular: var(--muted-foreground);
  --el-border-color: var(--border);
  --el-bg-color: var(--card);
  --el-bg-color-page: var(--soft);
  --el-fill-color-light: var(--soft);
}
.seango-theme .el-table th.el-table__cell {
  font: var(--sg-font-table-head);
  color: var(--foreground);
  background: var(--soft);
}
.seango-theme .el-table td.el-table__cell {
  font: var(--sg-font-table-body);
  color: var(--muted-foreground);
}
.seango-theme .el-button {
  border-radius: var(--radius-sm);
  font-size: 13px;
}
.seango-theme .el-button--primary {
  --el-button-bg-color: var(--brand);
  --el-button-border-color: var(--brand);
}
.seango-theme .el-empty__description { font-size: 13px; color: var(--muted); }

.sg-topbar-widgets { display: inline-flex; align-items: center; gap: 8px; }
.sg-topbar-widgets button {
  position: relative;
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--foreground);
  cursor: pointer;
}
.sg-topbar-widgets .sg-widget-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-size: 10px;
  line-height: 16px;
}
.sg-widget-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  width: 320px;
  max-height: 360px;
  overflow: auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  z-index: 90;
}
.sg-widget-panel a, .sg-widget-panel button.sg-widget-row {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border: 0;
  background: transparent;
  color: var(--foreground);
  font-size: 13px;
  cursor: pointer;
}
.sg-widget-wrap { position: relative; }