/* 组件：卡片 / 按钮 / chip / pill / 表格 / 空态 / 弹出菜单 / toast */

/* ── 卡片 ─────────────────────────────── */
.card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  display:flex; flex-direction:column; min-height:0;
}
.card.grow{flex:1}
.card .hd{
  flex:0 0 auto; padding:9px 13px; border-bottom:1px solid var(--border-soft);
  display:flex; align-items:center; gap:9px; min-height:36px;
}
.card .hd h2{font-size:12.5px; font-weight:600; white-space:nowrap}
.card .hd .sub{font-size:11.5px; color:var(--faint); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.card .hd .right{margin-left:auto; display:flex; gap:6px; align-items:center; flex:0 0 auto}
.card .bd{padding:12px 13px; flex:1; min-height:0; overflow:auto}
.card .bd.flush{padding:0}
.card .bd.center{display:flex; flex-direction:column; align-items:center; justify-content:center}

/* ── 按钮 ─────────────────────────────── */
.btn{
  font:inherit; font-size:12.5px; height:30px; padding:0 12px; border-radius:5px;
  border:1px solid var(--border); background:#fff; color:var(--ink);
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  cursor:pointer; white-space:nowrap; text-decoration:none;
  transition:background .12s, border-color .12s;
}
.btn:hover:not(:disabled){background:var(--surface-sunk); border-color:var(--border-strong)}
.btn:disabled{background:#F4F7FA; color:var(--faint); border-color:var(--border-soft); cursor:not-allowed}
.btn.pri{background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600}
.btn.pri:hover:not(:disabled){background:var(--accent-hover); border-color:var(--accent-hover)}
.btn.pri:disabled{background:#A9BECF; border-color:#A9BECF; color:#fff}
.btn.quiet{border-color:transparent; background:transparent; color:var(--muted)}
.btn.quiet:hover:not(:disabled){background:var(--surface-sunk); color:var(--ink)}
.btn.danger{color:var(--danger); border-color:var(--danger-line)}
.btn.danger:hover:not(:disabled){background:var(--danger-soft)}
.btn.sm{height:26px; padding:0 9px; font-size:11.5px}
.btn.icon{width:30px; padding:0}
.btn .caret{font-size:9px; color:var(--faint)}
.btn.pri .caret{color:rgba(255,255,255,.75)}

/* ── 工具条 ───────────────────────────── */
.toolbar{
  flex:0 0 auto; padding:8px 13px; display:flex; align-items:center; gap:6px;
  border-bottom:1px solid var(--border-soft); flex-wrap:wrap;
}
.toolbar .sep{width:1px; height:16px; background:var(--border-soft); margin:0 3px}
.toolbar .grow{flex:1}
.toolbar .hint{font-size:11.5px; color:var(--faint)}

/* ── chip 筛选 ────────────────────────── */
.filters{display:flex; gap:5px; align-items:center; flex-wrap:wrap}
.chip{
  font:inherit; font-size:11.5px; height:25px; padding:0 9px; border-radius:13px;
  border:1px solid var(--border); background:#fff; color:var(--muted); cursor:pointer;
  display:inline-flex; align-items:center; gap:5px; white-space:nowrap;
  transition:background .12s, border-color .12s;
}
.chip b{font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums}
.chip:hover{background:var(--surface-sunk)}
.chip.on{background:var(--accent-soft); border-color:var(--accent-line); color:var(--accent)}
.chip.on b{color:var(--accent)}
.chip.ok.on{background:var(--ok-soft); border-color:var(--ok-line); color:var(--ok)}
.chip.ok.on b{color:var(--ok)}
.chip.warn.on{background:var(--warn-soft); border-color:var(--warn-line); color:var(--warn)}
.chip.warn.on b{color:var(--warn)}
.chip.danger.on{background:var(--danger-soft); border-color:var(--danger-line); color:var(--danger)}
.chip.danger.on b{color:var(--danger)}

/* ── pill ─────────────────────────────── */
.pill{
  display:inline-flex; align-items:center; gap:4px; height:19px; padding:0 7px;
  border-radius:10px; font-size:10.5px; font-weight:600; white-space:nowrap;
  background:var(--neutral-soft); color:var(--neutral);
}
.pill i{width:5px;height:5px;border-radius:50%;background:currentColor;display:block;flex:0 0 5px}
.pill.ok{background:var(--ok-soft); color:var(--ok)}
.pill.warn{background:var(--warn-soft); color:var(--warn)}
.pill.bad{background:var(--danger-soft); color:var(--danger)}
.pill.info{background:var(--accent-soft); color:var(--accent)}
.pill.mut{background:var(--neutral-soft); color:var(--neutral)}
.pill.solid{background:var(--c,var(--neutral)); color:#fff}
.pill.solid i{background:rgba(255,255,255,.85)}

/* ── 表格 ─────────────────────────────── */
table{width:100%; border-collapse:separate; border-spacing:0; font-size:12px}
thead th{
  position:sticky; top:0; z-index:2; background:var(--surface-sunk); color:var(--muted);
  font-weight:600; font-size:11px; text-align:left; height:30px; padding:0 10px;
  border-bottom:1px solid var(--border); white-space:nowrap; letter-spacing:.02em;
}
thead th.r{text-align:right}
tbody td{
  height:29px; padding:0 10px; border-bottom:1px solid var(--border-soft);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:300px;
  vertical-align:middle;
}
tbody td.r{text-align:right}
tbody td.wrap{white-space:normal; overflow:visible; text-overflow:clip; padding:8px 10px; line-height:1.6}
tbody tr.clickable{cursor:pointer}
tbody tr:hover td{background:#F4F8FB}
tbody tr.selected td{background:var(--accent-soft)!important; box-shadow:inset 0 1px 0 var(--accent-line), inset 0 -1px 0 var(--accent-line)}
td.idx{color:var(--faint); font-size:10.5px; width:32px; font-variant-numeric:tabular-nums}
.mono{font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:11.5px}

/* ── 空态 ─────────────────────────────── */
.empty{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; color:var(--faint); padding:32px 24px; text-align:center;
}
.empty svg{width:34px;height:34px;opacity:.32}
.empty b{font-size:12.5px;color:var(--muted);font-weight:600}
.empty span{font-size:11.5px;max-width:320px;line-height:1.6}
.empty .btn{margin-top:4px}

/* ── 加载 ─────────────────────────────── */
.spinner{
  width:14px;height:14px;border-radius:50%;flex:0 0 14px;
  border:2px solid var(--border); border-top-color:var(--accent);
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-row{display:flex;align-items:center;gap:8px;padding:14px;color:var(--muted);font-size:12px}

/* ── 提示条 ───────────────────────────── */
.banner{
  flex:0 0 auto; display:flex; align-items:center; gap:10px;
  padding:9px 13px; border-radius:var(--r-md); font-size:12px;
  border:1px solid var(--border); background:var(--surface-sunk); color:var(--muted);
}
.banner b{color:var(--ink); font-weight:600}
.banner.ok{background:var(--ok-soft); border-color:var(--ok-line); color:var(--ok)}
.banner.ok b{color:var(--ok)}
.banner.warn{background:var(--warn-soft); border-color:var(--warn-line); color:var(--warn)}
.banner.warn b{color:var(--warn)}
.banner.bad{background:var(--danger-soft); border-color:var(--danger-line); color:var(--danger)}
.banner.bad b{color:var(--danger)}
.banner.info{background:var(--accent-soft); border-color:var(--accent-line); color:var(--accent)}
.banner.info b{color:var(--accent)}
.banner .right{margin-left:auto; display:flex; gap:6px; flex:0 0 auto}
.banner .x{cursor:pointer; color:inherit; opacity:.6; padding:0 2px; font-size:14px; line-height:1}
.banner .x:hover{opacity:1}

/* ── 弹出菜单 ─────────────────────────── */
.menu-wrap{position:relative; display:inline-flex}
.menu{
  position:absolute; top:calc(100% + 5px); right:0; z-index:50;
  background:#fff; border:1px solid var(--border); border-radius:var(--r-md);
  box-shadow:var(--shadow-pop); padding:4px; min-width:200px; font-size:12.5px;
}
.menu[hidden]{display:none}
.menu a,.menu button{
  display:flex; align-items:center; gap:8px; width:100%; text-align:left;
  padding:7px 9px; border-radius:4px; color:var(--ink); text-decoration:none;
  font:inherit; font-size:12.5px; border:none; background:none; cursor:pointer;
}
.menu a:hover,.menu button:hover{background:var(--accent-soft)}
.menu button:disabled{color:var(--faint); cursor:not-allowed; background:none}
.menu .hr{height:1px;background:var(--border-soft);margin:4px 2px}
.menu .lbl{font-size:10.5px;color:var(--faint);padding:6px 9px 3px;letter-spacing:.05em}
.menu small{margin-left:auto;color:var(--faint);font-size:11px}

/* ── 对话框 ───────────────────────────── */
dialog{
  width:min(720px,92vw); max-height:86vh; padding:0; border:1px solid var(--border);
  border-radius:var(--r-xl); box-shadow:var(--shadow-pop); color:var(--ink);
  font:inherit; font-size:13px; background:#fff;
}
dialog::backdrop{background:rgba(16,32,48,.4)}
dialog .dlg-hd{
  display:flex; align-items:center; gap:10px; padding:13px 16px;
  border-bottom:1px solid var(--border-soft); position:sticky; top:0; background:#fff; z-index:2;
}
dialog .dlg-hd h2{font-size:14px; font-weight:600}
dialog .dlg-hd .x{margin-left:auto;cursor:pointer;color:var(--faint);font-size:18px;line-height:1;padding:0 4px;border:none;background:none}
dialog .dlg-hd .x:hover{color:var(--ink)}
dialog .dlg-bd{padding:16px; overflow:auto; max-height:calc(86vh - 56px)}
dialog .dlg-ft{
  display:flex; gap:8px; justify-content:flex-end; padding:11px 16px;
  border-top:1px solid var(--border-soft); position:sticky; bottom:0; background:#fff;
}

/* ── toast ────────────────────────────── */
#toasts{
  position:fixed; bottom:calc(var(--statusbar-h) + 16px); right:16px; z-index:200;
  display:flex; flex-direction:column; gap:8px; align-items:flex-end; pointer-events:none;
}
.toast{
  display:flex; align-items:flex-start; gap:9px; padding:10px 13px; border-radius:var(--r-md);
  background:#fff; border:1px solid var(--border); box-shadow:var(--shadow-pop);
  font-size:12.5px; max-width:400px; pointer-events:auto; animation:toastIn .18s ease-out;
}
.toast.ok{border-color:var(--ok-line); background:var(--ok-soft); color:var(--ok)}
.toast.bad{border-color:var(--danger-line); background:var(--danger-soft); color:var(--danger)}
.toast.warn{border-color:var(--warn-line); background:var(--warn-soft); color:var(--warn)}
.toast.info{border-color:var(--accent-line); background:var(--accent-soft); color:var(--accent)}
.toast .txt{flex:1; min-width:0; word-break:break-word; line-height:1.5}
.toast .x{cursor:pointer;opacity:.6;line-height:1;font-size:14px;padding:0 2px;border:none;background:none;color:inherit}
.toast .x:hover{opacity:1}
@keyframes toastIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ── 通用表单 ─────────────────────────── */
label.field{display:flex; flex-direction:column; gap:3px; font-size:11px; color:var(--muted); min-width:0}
label.field > span{font-weight:500; letter-spacing:.02em}
input[type=text],input[type=search],select,textarea{
  font:inherit; font-size:12.5px; color:var(--ink); background:#fff;
  border:1px solid var(--border); border-radius:5px; padding:0 9px; height:30px;
  min-width:0;
}
textarea{padding:7px 9px; height:auto; line-height:1.6; resize:vertical}
input:focus,select:focus,textarea:focus{
  outline:none; border-color:#9CC0D8; box-shadow:0 0 0 3px rgba(31,95,139,.10);
}
input[type=checkbox]{accent-color:var(--accent); width:14px; height:14px; cursor:pointer}
.check{display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--ink); cursor:pointer; user-select:none}

/* ── 键位提示 ─────────────────────────── */
kbd{
  font-family:var(--mono); font-size:10px; padding:1px 5px; border-radius:3px;
  background:var(--neutral-soft); border:1px solid var(--border); color:var(--muted);
}