/* 汇赛通 · 抽签管理系统 设计系统 */
:root {
  --brand-50:#eef4ff; --brand-100:#dbe6ff; --brand-200:#bccffe; --brand-300:#8fb0fc;
  --brand-400:#5c88f7; --brand-500:#3468f1; --brand-600:#1f4fe0; --brand-700:#1a3fb4;
  --brand-800:#18358f; --brand-900:#142a6b;
  --ink-900:#0f172a; --ink-800:#1a2338; --ink-700:#2b3548;
  --gray-900:#0f172a; --gray-700:#334155; --gray-600:#475569; --gray-500:#64748b;
  --gray-400:#94a3b8; --gray-300:#cbd5e1; --gray-200:#e2e8f0; --gray-100:#f1f5f9; --gray-50:#f7f9fc;
  --green:#0f9d58; --green-bg:#e7f6ee; --green-ink:#0b7a44;
  --amber:#d98511; --amber-bg:#fdf3e2; --amber-ink:#a8630a;
  --red:#dc3545; --red-bg:#fdecee; --red-ink:#b02a37;
  --blue:#2563eb; --blue-bg:#e8f0fe; --blue-ink:#1a49c9;
  --purple:#7c4dff; --purple-bg:#f0ebff; --purple-ink:#5a2fd6;
  --teal:#0d9488; --teal-bg:#e4f5f3; --teal-ink:#0b6e66;
  --pink:#db2777; --pink-bg:#fce7f3; --pink-ink:#9d174d;
  --r-sm:6px; --r-md:10px; --r-lg:14px; --r-xl:20px;
  --sh-1:0 1px 2px rgba(15,23,42,.05);
  --sh-2:0 2px 8px rgba(15,23,42,.06);
  --sh-3:0 8px 28px rgba(15,23,42,.10);
  --sh-4:0 18px 50px rgba(15,23,42,.16);
}

* { box-sizing:border-box; margin:0; padding:0; }
html,body { height:100%; }
body {
  font-family:"PingFang SC","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
  background:var(--gray-50); color:var(--gray-900);
  font-size:13.5px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
::-webkit-scrollbar { width:9px; height:9px; }
::-webkit-scrollbar-thumb { background:#d3dbe8; border-radius:9px; }
::-webkit-scrollbar-thumb:hover { background:#b9c4d6; }
::-webkit-scrollbar-track { background:transparent; }

/* 布局 */
.layout { display:flex; min-height:100vh; }
.sidebar {
  width:236px; flex:0 0 236px; background:#0f172a;
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh;
}
.sb-brand { padding:20px 20px 18px; display:flex; gap:11px; align-items:center; }
.sb-logo {
  width:38px; height:38px; flex:0 0 38px; border-radius:11px; font-size:17px; font-weight:800;
  background:linear-gradient(135deg,var(--brand-400),var(--brand-600)); color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 16px rgba(52,104,241,.38);
}
.sb-title { color:#fff; font-size:14.5px; font-weight:700; letter-spacing:.3px; }
.sb-sub { color:#5f6f8c; font-size:9.5px; letter-spacing:1.5px; margin-top:2px; }
.sb-nav { flex:1; overflow-y:auto; padding:6px 12px 12px; }
.sb-group { color:#4d5b76; font-size:10.5px; letter-spacing:1px; padding:14px 10px 6px; font-weight:600; }
.sb-item {
  display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:8px;
  color:#a9b6cd; font-size:13px; cursor:pointer; margin-bottom:2px; transition:.16s; user-select:none;
}
.sb-item:hover { background:rgba(255,255,255,.06); color:#e4ebf7; }
.sb-item.on { background:linear-gradient(90deg,rgba(52,104,241,.34),rgba(52,104,241,.10)); color:#fff; font-weight:600; }
.sb-item.on .sb-ic { color:#8fb0fc; }
.sb-ic { width:17px; text-align:center; font-size:14px; color:#7b8aa5; }
.sb-tag { margin-left:auto; background:var(--red); color:#fff; font-size:10px; padding:1px 6px; border-radius:9px; font-weight:700; }
.sb-foot { padding:14px 20px 18px; border-top:1px solid rgba(255,255,255,.07); color:#4d5b76; font-size:11px; }
.sb-back { display:block; margin-top:8px; color:#6d84b0; text-decoration:none; font-size:11px; }
.sb-back:hover { color:#8fb0fc; }

.main { flex:1; min-width:0; display:flex; flex-direction:column; }
.topbar {
  height:58px; flex:0 0 58px; background:#fff; border-bottom:1px solid var(--gray-200);
  display:flex; align-items:center; padding:0 22px; gap:14px;
  position:sticky; top:0; z-index:40; box-shadow:var(--sh-1);
}
.crumb { font-size:14px; font-weight:700; color:var(--gray-900); }
.crumb span { color:var(--gray-400); font-weight:400; margin:0 6px; }
.crumb .sub { color:var(--gray-500); font-weight:400; font-size:12.5px; }
.tb-right { margin-left:auto; display:flex; align-items:center; gap:12px; }
.icon-btn {
  width:34px; height:34px; border:1px solid var(--gray-200); background:#fff; border-radius:9px;
  cursor:pointer; font-size:15px; position:relative; color:var(--gray-600); transition:.15s;
}
.icon-btn:hover { background:var(--gray-100); border-color:var(--gray-300); }
.dot { position:absolute; top:5px; right:5px; width:7px; height:7px; background:var(--red); border-radius:50%; border:1.5px solid #fff; }
.dot.hide { display:none; }
.evt-switch {
  display:flex; align-items:center; gap:7px; padding:6px 10px; border:1px solid var(--gray-200);
  border-radius:9px; cursor:pointer; font-size:12.5px; color:var(--gray-700); background:#fff; max-width:290px;
}
.evt-switch:hover { border-color:var(--brand-300); background:var(--brand-50); }
.evt-switch b { font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:220px; }
.user-chip { display:flex; align-items:center; gap:9px; cursor:pointer; padding:4px 8px; border-radius:9px; }
.user-chip:hover { background:var(--gray-100); }
.avatar {
  width:31px; height:31px; border-radius:50%; background:linear-gradient(135deg,var(--brand-400),var(--brand-600));
  color:#fff; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700;
}
.uname { font-size:12.5px; font-weight:600; line-height:1.25; }
.urole { font-size:10.5px; color:var(--gray-500); line-height:1.25; }
.view { padding:20px 22px 46px; flex:1; min-width:0; }

/* 通用组件 */
.card { background:#fff; border:1px solid var(--gray-200); border-radius:var(--r-lg); box-shadow:var(--sh-1); }
.card-h { padding:15px 18px; border-bottom:1px solid var(--gray-200); display:flex; align-items:center; gap:10px; }
.card-h h3 { font-size:14px; font-weight:700; }
.card-h .desc { font-size:11.5px; color:var(--gray-500); font-weight:400; }
.card-h .right { margin-left:auto; display:flex; gap:8px; align-items:center; }
.card-b { padding:16px 18px; }
.card-b.tight { padding:0; }
.grid { display:grid; gap:14px; }
.g2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.g3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.g4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
.g5 { grid-template-columns:repeat(5,minmax(0,1fr)); }
.row { display:flex; gap:12px; align-items:center; }
.row.wrap { flex-wrap:wrap; }
.spacer { margin-left:auto; }
.mt10{margin-top:10px}.mt14{margin-top:14px}.mt18{margin-top:18px}.mt22{margin-top:22px}
.muted { color:var(--gray-500); }
.small { font-size:12px; }
.tiny { font-size:11.5px; }
.b { font-weight:700; }
.mono { font-family:"SFMono-Regular",Consolas,"Courier New",monospace; }
.center{text-align:center}

.btn {
  display:inline-flex; align-items:center; gap:6px; padding:7px 14px; border-radius:8px;
  border:1px solid var(--gray-300); background:#fff; color:var(--gray-700);
  font-size:12.5px; font-weight:600; cursor:pointer; transition:.15s; font-family:inherit; white-space:nowrap;
}
.btn:hover { background:var(--gray-100); border-color:var(--gray-400); }
.btn.pri { background:var(--brand-500); border-color:var(--brand-500); color:#fff; box-shadow:0 2px 8px rgba(52,104,241,.26); }
.btn.pri:hover { background:var(--brand-600); border-color:var(--brand-600); }
.btn.ghost { border-color:var(--brand-200); color:var(--brand-600); background:var(--brand-50); }
.btn.ghost:hover { background:var(--brand-100); }
.btn.danger { background:var(--red); border-color:var(--red); color:#fff; }
.btn.danger:hover { filter:brightness(.94); }
.btn.sm { padding:4px 10px; font-size:11.5px; border-radius:7px; }
.btn.lg { padding:10px 22px; font-size:14px; border-radius:10px; }
.btn:disabled { opacity:.45; cursor:not-allowed; box-shadow:none; }
.btn.ok { background:var(--green); border-color:var(--green); color:#fff; }
.btn.dis { opacity:.42; cursor:not-allowed; box-shadow:none; filter:grayscale(.7); }

.badge { display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:20px; font-size:11px; font-weight:600; line-height:1.7; }
.b-gray { background:var(--gray-100); color:var(--gray-600); }
.b-blue { background:var(--blue-bg); color:var(--blue-ink); }
.b-green { background:var(--green-bg); color:var(--green-ink); }
.b-amber { background:var(--amber-bg); color:var(--amber-ink); }
.b-red { background:var(--red-bg); color:var(--red-ink); }
.b-purple { background:var(--purple-bg); color:var(--purple-ink); }
.b-teal { background:var(--teal-bg); color:var(--teal-ink); }
.b-pink { background:var(--pink-bg); color:var(--pink-ink); }
.b-brand { background:var(--brand-50); color:var(--brand-600); }

table.tb { width:100%; border-collapse:collapse; font-size:12.5px; }
table.tb th {
  text-align:left; padding:10px 12px; background:var(--gray-50); color:var(--gray-500);
  font-weight:600; font-size:11.5px; border-bottom:1px solid var(--gray-200); white-space:nowrap;
}
table.tb td { padding:11px 12px; border-bottom:1px solid var(--gray-100); vertical-align:middle; }
table.tb tbody tr:hover { background:var(--brand-50); }
table.tb tbody tr:last-child td { border-bottom:none; }
table.tb .num { font-variant-numeric:tabular-nums; }
.tb-wrap { overflow-x:auto; }

.tabs { display:flex; gap:3px; border-bottom:1px solid var(--gray-200); margin-bottom:16px; }
.tab { padding:9px 15px; font-size:13px; color:var(--gray-500); cursor:pointer; border-bottom:2px solid transparent; font-weight:600; transition:.15s; }
.tab:hover { color:var(--gray-800); }
.tab.on { color:var(--brand-600); border-bottom-color:var(--brand-500); }
.tab .cnt { font-size:11px; color:var(--gray-400); margin-left:4px; }

.field { margin-bottom:13px; }
.field label { display:block; font-size:12px; color:var(--gray-600); margin-bottom:5px; font-weight:600; }
.field label .req { color:var(--red); }
.inp, select.inp, textarea.inp {
  width:100%; padding:8px 11px; border:1px solid var(--gray-300); border-radius:8px;
  font-size:12.5px; font-family:inherit; color:var(--gray-900); background:#fff; transition:.15s;
}
.inp:focus { outline:none; border-color:var(--brand-400); box-shadow:0 0 0 3px rgba(52,104,241,.12); }
select.inp { cursor:pointer; }
textarea.inp { resize:vertical; min-height:74px; }
.f2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.f3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }

.switch { display:inline-flex; align-items:center; gap:9px; cursor:pointer; user-select:none; }
.sw { width:38px; height:21px; border-radius:20px; background:var(--gray-300); position:relative; transition:.2s; flex:0 0 38px; }
.sw::after { content:''; position:absolute; top:2.5px; left:2.5px; width:16px; height:16px; background:#fff; border-radius:50%; transition:.2s; box-shadow:0 1px 3px rgba(0,0,0,.2); }
.switch.on .sw { background:var(--brand-500); }
.switch.on .sw::after { transform:translateX(17px); }
.sw-label { font-size:12.5px; font-weight:600; }
.sw-desc { font-size:11px; color:var(--gray-500); }

.stat { background:#fff; border:1px solid var(--gray-200); border-radius:var(--r-lg); padding:16px 17px; box-shadow:var(--sh-1); position:relative; overflow:hidden; }
.stat .lb { font-size:12px; color:var(--gray-500); display:flex; align-items:center; gap:6px; }
.stat .vl { font-size:27px; font-weight:800; letter-spacing:-.5px; margin-top:5px; font-variant-numeric:tabular-nums; }
.stat .ex { font-size:11.5px; color:var(--gray-400); margin-top:3px; }
.stat .ic { position:absolute; right:14px; top:14px; width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:16px; }
.stat .trend { font-size:11.5px; font-weight:700; }
.up { color:var(--green); } .down { color:var(--red); }

.empty { padding:52px 20px; text-align:center; color:var(--gray-400); }
.empty .ei { font-size:40px; margin-bottom:10px; opacity:.5; }
.empty .et { font-size:14px; font-weight:600; color:var(--gray-600); margin-bottom:5px; }

/* 弹窗 / 抽屉 */
.mask { position:fixed; inset:0; background:rgba(15,23,42,.46); z-index:200; display:flex; align-items:center; justify-content:center; padding:24px; animation:fade .18s; }
@keyframes fade { from{opacity:0} to{opacity:1} }
.modal { background:#fff; border-radius:var(--r-xl); width:100%; max-width:620px; max-height:88vh; display:flex; flex-direction:column; box-shadow:var(--sh-4); animation:pop .22s cubic-bezier(.2,.9,.3,1.3); }
@keyframes pop { from{transform:translateY(14px) scale(.97); opacity:0} to{transform:none; opacity:1} }
.modal.wide { max-width:900px; }
.modal.xwide { max-width:1140px; }
.mo-h { padding:16px 20px; border-bottom:1px solid var(--gray-200); display:flex; align-items:center; }
.mo-h h3 { font-size:15px; font-weight:700; }
.mo-h .x { margin-left:auto; cursor:pointer; color:var(--gray-400); font-size:19px; line-height:1; padding:2px 6px; border-radius:6px; }
.mo-h .x:hover { background:var(--gray-100); color:var(--gray-700); }
.mo-b { padding:18px 20px; overflow-y:auto; flex:1; }
.mo-f { padding:13px 20px; border-top:1px solid var(--gray-200); display:flex; gap:9px; justify-content:flex-end; background:var(--gray-50); border-radius:0 0 var(--r-xl) var(--r-xl); }

.toast-wrap { position:fixed; top:16px; right:16px; z-index:400; display:flex; flex-direction:column; gap:9px; }
.toast {
  background:#fff; border:1px solid var(--gray-200); border-left:3px solid var(--brand-500);
  border-radius:10px; padding:11px 15px; box-shadow:var(--sh-3); font-size:12.5px; min-width:230px;
  animation:slideIn .25s; display:flex; gap:9px; align-items:flex-start;
}
@keyframes slideIn { from{transform:translateX(30px); opacity:0} to{transform:none; opacity:1} }
.toast.ok { border-left-color:var(--green); }
.toast.warn { border-left-color:var(--amber); }
.toast.err { border-left-color:var(--red); }
.toast .ti { font-size:14px; }
.toast b { display:block; font-size:12.5px; }

/* 筛选条 */
.filters { display:flex; gap:9px; align-items:center; flex-wrap:wrap; margin-bottom:14px; }
.filters .inp { width:auto; min-width:150px; }
.chipf { padding:5px 12px; border-radius:20px; border:1px solid var(--gray-300); background:#fff; font-size:12px; cursor:pointer; color:var(--gray-600); transition:.15s; }
.chipf:hover { border-color:var(--brand-300); color:var(--brand-600); }
.chipf.on { background:var(--brand-500); border-color:var(--brand-500); color:#fff; font-weight:600; }

/* 队伍徽标 */
.tlogo { width:26px; height:26px; flex:0 0 26px; border-radius:7px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:11.5px; font-weight:700; }
.tcell { display:flex; align-items:center; gap:9px; }
.tcell .nm { font-weight:600; font-size:12.5px; }
.tcell .sb { font-size:11px; color:var(--gray-500); }
.tier-dot { display:inline-flex; width:18px; height:18px; border-radius:5px; align-items:center; justify-content:center; font-size:10.5px; font-weight:800; color:#fff; }

/* ===== 抽签执行台 ===== */
.stage { display:grid; grid-template-columns:266px 1fr; gap:14px; align-items:start; }
.stage.full { grid-template-columns:1fr; }
.pool-card { max-height:calc(100vh - 190px); display:flex; flex-direction:column; }
.pool-body { overflow-y:auto; padding:10px 12px 14px; flex:1; }
.pool-tier { margin-bottom:12px; }
.pool-tier-h { display:flex; align-items:center; gap:7px; font-size:11.5px; font-weight:700; color:var(--gray-600); margin-bottom:7px; padding:0 2px; }
.pool-tier-h .cnt { margin-left:auto; color:var(--gray-400); font-weight:600; }
.pool-item {
  display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:8px; margin-bottom:4px;
  border:1px solid var(--gray-200); background:#fff; font-size:12px; transition:.15s; cursor:default;
}
.pool-item.act { border-color:var(--brand-400); background:var(--brand-50); box-shadow:0 0 0 3px rgba(52,104,241,.12); }
.pool-item.done { opacity:.34; }
.pool-item.done .nm { text-decoration:line-through; }
.pool-item .rg { margin-left:auto; font-size:10.5px; color:var(--gray-400); }

.draw-main { display:flex; flex-direction:column; gap:14px; }
.roller {
  background:linear-gradient(135deg,#12203a,#1e3a6b); border-radius:var(--r-lg); padding:22px;
  text-align:center; position:relative; overflow:hidden; color:#fff; min-height:186px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.roller::before { content:''; position:absolute; inset:0; background:radial-gradient(circle at 50% 30%,rgba(91,141,247,.35),transparent 62%); }
.roller > * { position:relative; z-index:1; }
.rl-cap { font-size:11.5px; color:#8fa6d4; letter-spacing:1.6px; }
.rl-name { font-size:31px; font-weight:800; letter-spacing:-.5px; margin:9px 0 5px; min-height:42px; transition:.2s; }
.rl-name.roll { animation:shake .09s infinite; color:#8fb0fc; }
@keyframes shake { 0%{transform:translateY(-2px)} 50%{transform:translateY(2px)} 100%{transform:translateY(-2px)} }
.rl-meta { font-size:12px; color:#a9bddf; }
.rl-badges { display:flex; gap:7px; margin-top:11px; justify-content:center; }
.rl-badge { background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.18); padding:2px 10px; border-radius:20px; font-size:11px; }
.rl-idle { color:#7d93bd; font-size:14px; }

.ctrl-bar { display:flex; gap:9px; align-items:center; flex-wrap:wrap; background:#fff; border:1px solid var(--gray-200); border-radius:var(--r-lg); padding:12px 14px; box-shadow:var(--sh-1); }
.ctrl-bar .seg { display:flex; border:1px solid var(--gray-300); border-radius:8px; overflow:hidden; }
.ctrl-bar .seg button { padding:6px 13px; border:none; background:#fff; font-size:12px; cursor:pointer; color:var(--gray-600); font-family:inherit; font-weight:600; }
.ctrl-bar .seg button.on { background:var(--brand-500); color:#fff; }
.ctrl-bar .seg button:not(:last-child) { border-right:1px solid var(--gray-300); }
.prog-wrap { flex:1; min-width:170px; }
.prog-lb { display:flex; justify-content:space-between; font-size:11.5px; color:var(--gray-500); margin-bottom:4px; }
.prog { height:7px; background:var(--gray-200); border-radius:7px; overflow:hidden; }
.prog i { display:block; height:100%; background:linear-gradient(90deg,var(--brand-400),var(--brand-600)); border-radius:7px; transition:width .35s; }

.groups { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.grp {
  background:#fff; border:1px solid var(--gray-200); border-radius:var(--r-md); overflow:hidden; transition:.18s; position:relative;
}
.grp.pickable { border-color:var(--brand-400); cursor:pointer; box-shadow:0 0 0 3px rgba(52,104,241,.14); }
.grp.pickable:hover { transform:translateY(-2px); box-shadow:0 8px 20px rgba(52,104,241,.22); }
.grp.blocked { opacity:.48; cursor:not-allowed; }
.grp.flash { animation:flash .55s; }
@keyframes flash { 0%{background:#fff} 30%{background:var(--brand-100)} 100%{background:#fff} }
.grp-h { padding:8px 11px; background:var(--gray-50); border-bottom:1px solid var(--gray-200); display:flex; align-items:center; }
.grp-h .gn { font-weight:800; font-size:13px; color:var(--brand-700); }
.grp-h .gc { margin-left:auto; font-size:11px; color:var(--gray-500); }
.grp-h .gavg { font-size:10.5px; color:var(--gray-400); margin-left:6px; }
.grp-b { padding:7px; min-height:112px; }
.slot {
  display:flex; align-items:center; gap:7px; padding:5px 7px; border-radius:7px; margin-bottom:4px;
  font-size:12px; background:var(--gray-50); border:1px dashed var(--gray-300); color:var(--gray-400); min-height:29px;
}
.slot.filled { background:#fff; border:1px solid var(--gray-200); color:var(--gray-900); animation:drop .4s cubic-bezier(.2,.9,.3,1.4); }
@keyframes drop { from{transform:translateY(-14px) scale(.9); opacity:0} to{transform:none; opacity:1} }
.slot .sn { width:15px; height:15px; flex:0 0 15px; border-radius:4px; background:var(--gray-200); color:var(--gray-600); font-size:9.5px; display:flex; align-items:center; justify-content:center; font-weight:800; }
.slot.filled .sn { background:var(--brand-100); color:var(--brand-700); }
.slot .rt { margin-left:auto; font-size:10.5px; color:var(--gray-400); font-variant-numeric:tabular-nums; }
.grp-note { padding:5px 10px; font-size:10.5px; color:var(--red-ink); background:var(--red-bg); border-top:1px solid var(--gray-200); }

/* 对阵树 */
.bracket { display:flex; gap:20px; overflow-x:auto; padding:6px 0 12px; }
.br-round { display:flex; flex-direction:column; gap:12px; justify-content:space-around; min-width:186px; }
.br-round-t { font-size:11.5px; font-weight:700; color:var(--gray-500); text-align:center; margin-bottom:2px; }
.br-match { background:#fff; border:1px solid var(--gray-200); border-radius:9px; overflow:hidden; box-shadow:var(--sh-1); }
.br-m { display:flex; align-items:center; gap:7px; padding:7px 10px; font-size:12px; border-bottom:1px solid var(--gray-100); }
.br-m:last-child { border-bottom:none; }
.br-m .sc { margin-left:auto; font-weight:800; font-variant-numeric:tabular-nums; }
.br-m.win { background:var(--brand-50); font-weight:700; }
.br-m .seed { font-size:10px; color:var(--gray-400); width:14px; }

/* 时间轴 */
.tl { position:relative; padding-left:22px; }
.tl::before { content:''; position:absolute; left:6px; top:4px; bottom:4px; width:2px; background:var(--gray-200); }
.tl-i { position:relative; padding-bottom:16px; }
.tl-i::before { content:''; position:absolute; left:-19px; top:5px; width:9px; height:9px; border-radius:50%; background:var(--gray-300); border:2px solid #fff; box-shadow:0 0 0 1.5px var(--gray-300); }
.tl-i.ok::before { background:var(--green); box-shadow:0 0 0 1.5px var(--green); }
.tl-i.warn::before { background:var(--amber); box-shadow:0 0 0 1.5px var(--amber); }
.tl-i.err::before { background:var(--red); box-shadow:0 0 0 1.5px var(--red); }
.tl-t { font-size:12.5px; font-weight:600; }
.tl-d { font-size:11.5px; color:var(--gray-500); }
.tl-time { font-size:11px; color:var(--gray-400); font-variant-numeric:tabular-nums; }

/* 规则卡 */
.rule-card { border:1px solid var(--gray-200); border-radius:var(--r-md); padding:13px 14px; background:#fff; }
.rule-card .rh { display:flex; align-items:center; gap:8px; margin-bottom:9px; }
.rule-card .rn { font-size:12.5px; font-weight:700; }
.rule-list { font-size:12px; color:var(--gray-600); }
.rule-list li { list-style:none; padding:4px 0; border-bottom:1px dashed var(--gray-100); display:flex; align-items:center; gap:7px; }
.rule-list li:last-child { border-bottom:none; }

/* 图表 */
.chart { width:100%; display:block; }
.legend { display:flex; gap:13px; flex-wrap:wrap; font-size:11.5px; color:var(--gray-600); margin-top:9px; }
.legend i { width:9px; height:9px; border-radius:3px; display:inline-block; margin-right:5px; }

.hbar { display:flex; align-items:center; gap:9px; margin-bottom:8px; font-size:12px; }
.hbar .hl { width:62px; flex:0 0 62px; color:var(--gray-600); text-align:right; }
.hbar .ht { flex:1; height:19px; background:var(--gray-100); border-radius:5px; overflow:hidden; }
.hbar .hf { height:100%; border-radius:5px; transition:width .5s; }
.hbar .hv { width:44px; flex:0 0 44px; font-weight:700; font-variant-numeric:tabular-nums; font-size:11.5px; }

.kv { display:grid; grid-template-columns:96px 1fr; gap:7px 12px; font-size:12.5px; }
.kv .k { color:var(--gray-500); }
.kv .v { font-weight:600; }

.hash-box { background:var(--gray-900); color:#7dffb0; padding:12px 14px; border-radius:9px; font-family:Consolas,monospace; font-size:11.5px; word-break:break-all; line-height:1.7; }

.step-list { max-height:290px; overflow-y:auto; }
.step-i { display:flex; gap:9px; padding:7px 0; border-bottom:1px dashed var(--gray-100); font-size:12px; }
.step-i .sn { width:22px; height:22px; flex:0 0 22px; border-radius:6px; background:var(--brand-50); color:var(--brand-700); font-size:10.5px; font-weight:800; display:flex; align-items:center; justify-content:center; }
.step-i .st { flex:1; }
.step-i .sx { color:var(--gray-500); font-size:11px; }

.ribbon { display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:20px; font-size:11.5px; font-weight:700; }
.rib-live { background:var(--red-bg); color:var(--red-ink); }
.rib-live .pulse { width:7px; height:7px; border-radius:50%; background:var(--red); animation:pulse 1.3s infinite; }
@keyframes pulse { 0%{opacity:1;transform:scale(1)} 50%{opacity:.35;transform:scale(1.5)} 100%{opacity:1;transform:scale(1)} }

.notice-i { display:flex; gap:10px; padding:9px 0; border-bottom:1px solid var(--gray-100); font-size:12.5px; }
.notice-i:last-child { border-bottom:none; }
.notice-i .nd { width:6px; height:6px; border-radius:50%; background:var(--brand-500); margin-top:7px; flex:0 0 6px; }

@media (max-width:1400px) { .groups { grid-template-columns:repeat(3,minmax(0,1fr)); } .g5{grid-template-columns:repeat(3,minmax(0,1fr));} }
@media (max-width:1100px) {
  .stage { grid-template-columns:1fr; }
  .groups { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .g4,.g3 { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* ---------- 移动端 / 窄屏（≤768px）----------
   原断点只到 1100px，窄屏下侧边栏固定 236px + 顶栏右侧集群 279px 会撑出横向滚动条。
   此处把整体改为纵向堆叠：侧边栏变横向可滚动导航条，顶栏换行，所有网格降为单列。 */
@media (max-width:768px) {
  html, body { overflow-x:hidden; }
  .layout { flex-direction:column; }

  /* 侧边栏 → 顶部横向滚动导航 */
  .sidebar {
    width:100%; flex:none; height:auto; position:static;
    flex-direction:row; align-items:center; gap:10px; padding:0 10px;
  }
  .sb-brand { padding:10px 6px; gap:8px; flex:0 0 auto; }
  .sb-logo { width:32px; height:32px; flex:0 0 32px; font-size:15px; border-radius:9px; }
  .sb-sub { display:none; }
  .sb-nav {
    flex:1; min-width:0; overflow-x:auto; overflow-y:hidden; padding:8px 4px;
    display:flex; align-items:center; gap:6px; scrollbar-width:none;
  }
  .sb-nav::-webkit-scrollbar { display:none; }
  .sb-group { display:none; }
  .sb-item { flex:0 0 auto; margin-bottom:0; padding:7px 10px; font-size:12px; white-space:nowrap; }
  /* 页脚在窄屏折叠为导航条末尾的一个链接：只隐藏版本说明，保留跨系统返回入口 */
  .sb-foot { flex:0 0 auto; display:flex; align-items:center; padding:0 4px 0 6px; border-top:none; }
  .sb-foot > div { display:none; }
  .sb-back { margin-top:0; white-space:nowrap; font-size:11px; }

  /* 顶栏换行，右侧集群不再溢出 */
  .topbar {
    height:auto; flex:none; flex-wrap:wrap; padding:10px 12px; gap:8px; position:static;
  }
  .crumb { flex:1 1 100%; font-size:13px; }
  .tb-right { margin-left:0; flex:1 1 100%; justify-content:flex-end; gap:8px; flex-wrap:wrap; }
  .evt-switch { max-width:100%; flex:1 1 auto; min-width:0; }
  .evt-switch b { max-width:130px; }
  .user-chip .uname, .user-chip .urole { display:none; }

  .view { padding:14px 12px 40px; }

  /* 网格全部降为单列 */
  .grid, .g2, .g3, .g4, .g5 { grid-template-columns:minmax(0,1fr); }
  .groups { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .stage { grid-template-columns:minmax(0,1fr); }

  /* 卡片头与筛选栏允许换行 */
  .card-h { flex-wrap:wrap; padding:13px 14px; }
  .card-h .right { margin-left:0; width:100%; flex-wrap:wrap; }
  .filters { gap:7px; }
  .filters .inp { min-width:0; width:100%; }

  /* 模态框与提示条适配窄屏 */
  .modal { width:calc(100vw - 24px) !important; max-height:88vh; }
  .mo-b { max-height:60vh; }
  .toast-wrap { left:12px; right:12px; }
  .toast-wrap .toast { min-width:0; max-width:100%; }
}