.del-btn { background:none; border:none; color:var(--text3); cursor:pointer; font-size:13px; padding:2px 6px; border-radius:4px; line-height:1; transition:color .12s,background .12s; flex-shrink:0; }
.del-btn:hover { color:var(--red); background:rgba(240,96,96,.1); }
.trend-chip { padding:4px 12px; border-radius:20px; border:1px solid var(--border2); background:var(--bg3); color:var(--text2); font-size:12px; font-weight:600; cursor:pointer; transition:all .15s; white-space:nowrap; }
.trend-chip.active { background:var(--accent); color:#fff; border-color:var(--accent); }
.trend-chip:not(.active):hover { border-color:var(--accent); color:var(--accent); }
.diff-src-toggle { display:flex; gap:6px; margin-bottom:10px; }
.diff-mode-btn { flex:1; padding:6px 0; border-radius:6px; border:1px solid var(--border2); background:var(--bg3); color:var(--text2); font-size:12px; font-weight:600; cursor:pointer; transition:all .15s; }
.diff-mode-btn.active { background:var(--accent); color:#fff; border-color:var(--accent); }
.diff-mode-btn:not(.active):hover { border-color:var(--accent); color:var(--accent); }
.hist-picker { max-height:200px; overflow-y:auto; border:1px solid var(--border); border-radius:8px; background:var(--bg2); }
.hist-pick-row { display:flex; align-items:center; gap:10px; padding:9px 12px; cursor:pointer; border-bottom:1px solid var(--border); transition:background .12s; }
.hist-pick-row:last-child { border-bottom:none; }
.hist-pick-row:hover { background:var(--bg3); }
.hist-pick-row.selected { background:rgba(91,156,246,.13); }
.hist-pick-name { font-size:13px; font-weight:600; color:var(--text); flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hist-pick-meta { font-size:11px; color:var(--text3); white-space:nowrap; }
.diff-sel-pill { display:flex; align-items:center; gap:6px; margin-top:8px; background:var(--bg2); border:1px solid var(--border); border-radius:20px; padding:5px 12px; font-size:12px; font-weight:600; color:var(--text); }
.diff-kpi-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
.diff-kpi { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r); padding: 14px 20px; flex: 1; min-width: 120px; }
.diff-kpi .dk-label { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--text3); margin-bottom: 6px; font-weight: 600; }
.diff-kpi .dk-val { font-size: 22px; font-weight: 700; letter-spacing: -.02em; line-height: 1; }
.pos { color: var(--red); } .neg { color: var(--green); } .zero { color: var(--text2); }
.sec-diff-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px; margin-top:4px; }
.sec-diff-item { background:var(--bg3); border-radius:8px; padding:10px 14px; }
.sec-diff-name { font-family:var(--mono); font-size:11px; color:var(--text2); margin-bottom:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sec-diff-val { font-size:17px; font-weight:700; letter-spacing:-.02em; }

.cmp-chip { display:flex; align-items:center; gap:6px; background:var(--bg3); border:1px solid var(--border2); border-radius:6px; padding:5px 10px; font-size:12px; font-weight:500; color:var(--text2); }
.cmp-chip button { background:none; border:none; color:var(--text3); cursor:pointer; display:flex; align-items:center; padding:0; transition:color .12s; }
.cmp-chip button:hover { color:var(--red); }

/* Compare upload-zone redesign */
.btn-cmp-action {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; background: var(--bg3); border: 1px solid var(--border2);
  border-radius: 7px; font-size: 13px; font-weight: 600;
  color: var(--text2); cursor: pointer;
  transition: border-color .12s, color .12s, background .12s;
}
.btn-cmp-action:hover { border-color: var(--accent); color: var(--text); background: var(--bg4); }

.cmp-slot-card {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 9px; padding: 10px 14px;
  min-width: 240px; max-width: 320px;
  transition: border-color .12s;
}
.cmp-slot-card:hover { border-color: var(--border2); }
.cmp-slot-badge {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
  color: #fff; font-weight: 700; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
}
.cmp-slot-text { flex: 1; min-width: 0; }
.cmp-slot-name {
  font-size: 13px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-family: var(--mono);
}
.cmp-slot-sub {
  font-size: 11px; color: var(--text3); margin-top: 1px;
}
.cmp-slot-x {
  flex-shrink: 0;
  width: 24px; height: 24px; border-radius: 6px;
  background: none; border: none; color: var(--text3);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .12s, color .12s;
}
.cmp-slot-x:hover { background: rgba(244, 114, 114, .12); color: #f47272; }