/* ============================================================
   ABSTRICT · Features v14 — UX Features CSS
   Random build, Budget presets, Checklist, Recent picks, Stats
   ============================================================= */

/* Budget presets */
.budget-presets {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 0; margin-bottom: 4px;
}
.bp-label {
  font-size: 9px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .5px; color: var(--text-muted); margin-right: 2px;
}
.bp-btn {
  padding: 3px 8px; font-size: 10px; font-weight: 600;
  font-family: var(--mono);
  background: var(--bg-alt); border: 1px solid var(--border-subtle);
  color: var(--text-secondary); border-radius: 4px;
  cursor: pointer; transition: all 150ms var(--ease);
}
.bp-btn:hover {
  border-color: var(--accent); color: var(--accent);
  background: rgba(99,102,241,.06);
}

/* Build checklist */
.build-checklist {
  margin-top: 12px; padding: 10px 12px;
  background: var(--bg-alt); border-radius: var(--radius);
  border: 1px solid var(--border-subtle);
}
.cl-head {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 8px; color: var(--text-muted);
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .5px;
}
.cl-pct { margin-left: auto; font-family: var(--mono); color: var(--accent); }
.cl-bar {
  height: 4px; background: var(--border); border-radius: 2px;
  overflow: hidden; margin-bottom: 8px;
}
.cl-bar-fill {
  height: 100%; background: var(--accent); border-radius: 2px;
  transition: width 500ms var(--ease);
}
.cl-items {
  display: grid; grid-template-columns: 1fr 1fr; gap: 3px 8px;
}
.cl-item {
  font-size: 10px; color: var(--text-muted);
  display: flex; align-items: center; gap: 4px;
}
.cl-item.done { color: var(--success); }
.cl-check { font-size: 10px; }

/* Recent picks */
.recent-picks {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 0; flex-wrap: wrap;
}
.rp-label {
  font-size: 9px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .5px; color: var(--text-muted);
}
.rp-chip {
  padding: 3px 8px; font-size: 10px;
  background: var(--bg-alt); border: 1px solid var(--border-subtle);
  color: var(--text-secondary); border-radius: 99px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 180px; cursor: default;
  transition: border-color 150ms;
}
.rp-chip:hover { border-color: var(--accent); }

/* Component stats */
.comp-stats {
  display: flex; gap: 12px; padding: 8px 12px;
  margin-bottom: 8px;
  background: var(--bg-alt); border-radius: var(--radius);
  border: 1px solid var(--border-subtle);
}
.cs-item { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.cs-label {
  font-size: 8px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .4px; color: var(--text-muted);
}
.cs-val {
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  color: var(--text);
}