/* LiEMS 7.0 设计令牌 —— 与门户 energy-bid-web/frontend/src/style.css 逐值对齐。
   为什么是复制而不是引用:两个系统不同域名、不共享构建产物;复制的代价是
   "改规范要改两处",而引用的代价是跨域加载失败时整站失去样式。取前者。
   **不得在此新增灰阶或色值**——门户那次「81 个散落硬编码色值、7 种肉眼难辨的灰」
   就是这么来的,不成体系才是廉价感的根源。 */
:root {
  --brand: #4880FF; --brand-hover: #4173E5; --brand-soft: #EDF3FF; --brand-border: #C8DAFF;
  --fg: #444C57; --fg-2: #90929B; --fg-3: #C5C8CE;
  --ok: #26A94E; --ok-soft: #E9F6EE;
  --warn: #F39800; --warn-fg: #B87503; --warn-soft: #FEF4E6;
  --danger: #FF4848; --danger-fg: #D93A3A; --danger-soft: #FEECEC;
  --bg-page: #F8FAFD; --bg-card: #FFFFFF; --bg-fill: #F4F5F9;
  --line: #E7E8EF; --line-strong: #D9DBE3;
  --font: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
  --fs-title: 18px; --fs-lg: 16px; --fs: 14px; --fs-sm: 12px;
  --lh-title: 1.3; --lh: 1.5;
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 32px;
  --r: 4px; --r-card: 8px;
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg-page); color: var(--fg);
  font: var(--fs)/var(--lh) var(--font);
}
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-hover); }

/* ---- 全局顶栏(.topbar)与页面标题区(.page-head)必须分名 ----
   门户踩过:两者同叫 .topbar,二级页并入主布局后嵌套,改一个误伤另一个。 */
.topbar {
  height: 56px; background: var(--bg-card); border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: var(--s-4); padding: 0 var(--s-5);
  position: sticky; top: 0; z-index: 10;
}
.topbar .brand { font-size: var(--fs-title); font-weight: 700; line-height: var(--lh-title); }
.topbar .brand em { color: var(--brand); font-style: normal; }
.topbar .spacer { flex: 1; }
.topbar .who { color: var(--fg-2); font-size: var(--fs-sm); }

.wrap { max-width: 1180px; margin: 0 auto; padding: var(--s-5); }

.page-head { display: flex; align-items: baseline; gap: var(--s-3); margin-bottom: var(--s-4); }
.page-head h1 { font-size: var(--fs-title); line-height: var(--lh-title); margin: 0; font-weight: 700; }
.page-head .sub { color: var(--fg-2); font-size: var(--fs-sm); }

.stats { display: flex; gap: var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-5); }
.stat {
  background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: var(--s-3) var(--s-4); min-width: 108px;
}
.stat .n { font-size: 22px; font-weight: 700; line-height: var(--lh-title); }
.stat .k { color: var(--fg-2); font-size: var(--fs-sm); margin-top: var(--s-1); }
.stat.-ok .n { color: var(--ok); }
.stat.-warn .n { color: var(--warn-fg); }
.stat.-danger .n { color: var(--danger-fg); }

.bar {
  display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap;
  background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: var(--s-3); margin-bottom: var(--s-4);
}
select, input[type=text] {
  font: var(--fs)/var(--lh) var(--font); color: var(--fg);
  border: 1px solid var(--line-strong); border-radius: var(--r);
  padding: 6px var(--s-2); background: var(--bg-card);
}
select:focus, input[type=text]:focus { outline: none; border-color: var(--brand); }

.btn {
  font: var(--fs)/1 var(--font); border: 1px solid var(--line-strong);
  background: var(--bg-card); color: var(--fg);
  border-radius: var(--r); padding: 8px var(--s-3); cursor: pointer;
}
.btn:hover { border-color: var(--brand); color: var(--brand); }
.btn[disabled] { color: var(--fg-3); border-color: var(--line); cursor: not-allowed; }
.btn.-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn.-primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); color: #fff; }
.btn.-ok { background: var(--ok); border-color: var(--ok); color: #fff; }
.btn.-ok:hover { color: #fff; opacity: .9; }
.btn.-danger { background: var(--bg-card); border-color: var(--danger); color: var(--danger-fg); }
.btn.-danger:hover { background: var(--danger-soft); color: var(--danger-fg); }
.btn.-sm { padding: 5px var(--s-2); font-size: var(--fs-sm); }

.list { display: flex; flex-direction: column; gap: var(--s-3); }
.card {
  background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: var(--s-4); display: flex; gap: var(--s-3);
}
.card.-picked { border-color: var(--brand); background: var(--brand-soft); }
.card .pick { padding-top: 2px; }
.card .body { flex: 1; min-width: 0; }
.card .title { font-size: var(--fs-lg); line-height: var(--lh-title); font-weight: 700; }
.card .meta { color: var(--fg-2); font-size: var(--fs-sm); margin-top: var(--s-1); }
.card .summary { margin-top: var(--s-2); color: var(--fg); }
.card .attrs { margin-top: var(--s-2); display: flex; flex-wrap: wrap; gap: var(--s-2); }
.card .ops { display: flex; flex-direction: column; gap: var(--s-2); }

/* 标签一律不带过渡:门户踩过 el-tag 的 zoom-in 首帧停在 opacity:0、整个看不见 */
.tag {
  display: inline-block; font-size: var(--fs-sm); line-height: 1.6;
  padding: 1px var(--s-2); border-radius: var(--r);
  background: var(--bg-fill); color: var(--fg-2); border: 1px solid var(--line);
  transition: none;
}
.tag.-brand { background: var(--brand-soft); color: var(--brand); border-color: var(--brand-border); }
.tag.-ok { background: var(--ok-soft); color: var(--ok); border-color: var(--ok-soft); }
.tag.-warn { background: var(--warn-soft); color: var(--warn-fg); border-color: var(--warn-soft); }
.tag.-danger { background: var(--danger-soft); color: var(--danger-fg); border-color: var(--danger-soft); }

.empty { color: var(--fg-2); text-align: center; padding: var(--s-6); background: var(--bg-card);
         border: 1px solid var(--line); border-radius: var(--r-card); }
.pager { display: flex; gap: var(--s-2); align-items: center; justify-content: center;
         margin-top: var(--s-5); color: var(--fg-2); font-size: var(--fs-sm); }
.notice { padding: var(--s-3) var(--s-4); border-radius: var(--r-card); margin-bottom: var(--s-4);
          background: var(--warn-soft); color: var(--warn-fg); border: 1px solid var(--warn-soft); }
.notice.-danger { background: var(--danger-soft); color: var(--danger-fg); border-color: var(--danger-soft); }